Photoshop Animated GIF tutorial
I’ve been wanting to share my hair transformation from the last year on the blog for a while, but didn’t want to do a long, drawn out post.
It occurred to me today that I could create an animated GIF to show the transformation, and that I also could use the blog as an excuse to take 5 minutes and learn a useful trick in Photoshop.
I don’t spend as much time as I used to spend on experimentation with different techniques. It’s funny because I thought going back to grad school would allow for more time to do that, but I feel like I have so much work to do (readings, assignments, and — oh yeah, that whole thesis thing) that any time I spend doing experimentations seems like a waste. I think I’ll spend more time experimenting and less time on social media. Sounds like a solid plan.
Here is my hair transformation! Blonde to blue in 8 months.
I think I’m going to keep this cut for a while so I can keep the blonde ends, which allow me to have funky colors. I don’t want to bleach again because that destroys my hair. Blue isn’t as flattering on me as purple is, but blue makes me feel like I’m in the 90s Seattle scene (and makes me want to wear flannel 24/7!).
For those of you interested in funky-colored hair, at some point I’ll do a product breakdown because I’ve tried a lot of different brands of hair color.
Now I’m gonna go into teaching mode (because it’s what I do now! :)).
For those interested in how to create an animated GIF in Adobe Photoshop (CS6 & CC), it’s really simple:
1. Create a “New” document in Photoshop that is the size of the final image you want (I like 550×550 px for my blog).
2. Add all the images you want to include in your GIF as layers. Ideally, name these layers. I did not for this tutorial …
3. Open the “Timeline” panel.
4. Move your objects along the timeline to dictate when they appear (notice it’s in frames — 24 frames = 1 second of time).
5. Export / save for web.
Make sure you save as a GIF file, and adjust the view settings so your image looks more like a photo and not a bunch of pixels. GIF formats remove all the unnecessary data (such as extraneous colors), which is why they are ideal for web. However, GIF is best suited for line art and text, not for images, for this reason. You will notice a “play” button. Do this to check the timing of your graphic before you export. You may also want to change the loop options for your GIF before saving.
Tada! Animated GIF is done.
Do you ever feel like you’re wasting time by researching / writing / experimenting / doing other creative things? OR Do you like when I post tutorials about design things?
