Hey friends! Like my animated GIF? :)
Is it just me or do these GIF's seem to be all the rage lately?!
I can see why. They are cute, fun, and capture attention without being obnoxious. So I thought I would put together a nice little Photoshop tutorial for my readers that are currently in a state of GIF envy!
Intimidated? Don't be! It's actually, quite possibly, one of the most simple tutorials ever. F'reals.
I'm going to walk you through it using Photoshop CS5. Now, I know there are many websites out there that will make one for you (www.makeagif.com) and if you want to take the easy way out, by all means, go ahead. But, if you are awesome and want to know the tricks behind the trade, open up that beautiful blue PS icon and let's get started!
HOW TO MAKE AN ANIMATED GIF:
1. So first and foremost (this may be obvious) is to have some photos of yourself ready to go. I would suggest keeping the background the same in each photo, so it's not just a slideshow of pictures but more of an animation. Use as many photos as you want. I spent a good hour making silly faces with Photobooth and narrowed it down to five images. Make sure to save them in their own folder.
2. Create a new document in Photoshop and make sure the dimensions match your photos (if you want it to be displayed on your blog make sure the sizing will fit the dimensions of your post section- more details on that later).
3. Have both your PS document and the photo file open so they are both visible on your screen. Select all of the photos you want to use and drag them onto your document. If you sized the document dimensions to match your photos they should all fit and line up perfectly.
4. You will notice the photos have an X across it. Place the photos by hitting Enter so each one will have their own layer. Keep hitting enter until all of your photos are on separate layers.
5. Next, you want to open your Animation palette (Window>Animation)
6. Go to the drop down menu on the top right hand side of the palette. Choose "Make Frames from Layers"
7. You should see small thumbnails of all of your photos appear. You can easily rearrange them by clicking and dragging the thumbnails to the desired frame order.
8. Now you want to set up the time delay and loop settings. Go to the palette drop down menu again and click on "Select All Frames"
9. You will notice there are default time delay settings at the bottom of each thumbnail. Since all of your photos are selected, click the arrow next to the time delay setting and choose the desired duration (I chose 0.5 seconds for mine). The new duration should now show up under all of your frames.
10. You will also notice there is a small drop down menu on the lower left hand side below the thumbnails with the loop setting. Choose "Forever."
11. Now you just need to save it! Go to File>Save for Web and Devices...
12. Make sure the format is set to GIF, click on Save, And you're done!
Now you can sit back and watch your pretty pictures come to life!
YOU. ROCK.
NOTE: When I uploaded my GIF to Blogger for publishing it did not animate unless it was clicked on. I guess this is a common glitch for Blogger users, so the way to get around it is by uploading to a free hosting site like Photobucket. Once uploaded it should start animating (if it's not then you did something wrong during saving). Grab the HTML image code and copy it into your post's HTML tab (This is why you want to have the dimensions match your posting area so it will fit- Photobucket did not offer any resizing options!).
Happy Photoshopping! Until next time... :)
I so want to give this a try! Yours is SO cute!!! HA love it!
ReplyDeleteThank you for posting this - way too cool! I've also got this linked to my blogging post today, your tutorial is a keeper!
ReplyDelete