Picture This: How to make a GIF in Photoshop

Guest post by GrowlingSteph

Hi! My name is Stephanie and I blog over at Growlingsteph.com. I am currently new to Denver, CO and a jobless, ranting blogger who spends most of my time at home with a cat in my lap. I like to share tech tips and tricks along with music I’m loving at the moment, my favorite TV shows and movies, and personal adventures.

Today, I am going to teach you something that I could not do for a long time but when I discovered how easy it was, I started making gifs for every blog. Haha!

Instructions:
Step 1. Take a few pictures to create your gif. To make it easy, I took only 3 pictures I will turn into a gif.

Step 2. Open Photoshop and create a document with each of your images as different layers. You can do this a couple different ways, but the easiest way to do this is: for each image, select all (crtl+a) and copy (ctrl+c) then paste (ctrl+v) onto the first one. After you’ve done this, you should have three layers. (Note: Make sure to have your layers window visible by pressing F7 or going to the Windows menu and selecting Layers.

Step 3.Go to the Windows menu and select Animation. You will see a window appear on the bottom. At first, you will only see one frame. At top right corner of the animation window, there is a small menu button. Click on the menu and select Make frames from layers. You should see 3 frames now.

Step 4. Click on the first animation frame. In your layers, there is a small eye (treat this as a check box) to the left of the image meaning that layer is visible. Toggle these eye icons on your images so only the image you want to show first has an eye next to it. Click on the second frame and only make one image visible. Ditto for the third frame.

Step 5. In the animation window, just below each frame, you can see a time with a drop down menu. I usually have each frame on 1 second but if you want it to be longer or shorter, that’s okay. Play the animation by clicking on the play button in the bottom row of the animation window.

Step 6. Save the image by going to the File menu, select Save for Web & Devices. A new window will pop up. On the top right, for the Preset drop down menu, select Gif 128 No Dither, change Color to 256, and uncheck Transparency. (Note: After you do this, you’ll see the preset is now call [unnamed]. If you want to save these new settings, click on the menu at the top right and save the preset.) On the bottom right, adjust the image size. My blog posts are 420 pixels wide so I use this size but I would suggest making it even smaller. Lastly, click Save on the very bottom.

 Step 7. Enjoy! 

Tweet