Click Here for the FULL Gaspar Noé Gif Experience
Seriously though people you have been warned. Don’t stare too long. It’s no good for your rods and cones.
Many animations that were common stay in the past such as; Flash animations or animated gifs aren’t used quite as much as they used to be at the dawn of the Internet. If you should find yourself needing to create animated gifs using Photoshop CS6 you’ll be happy to know that function is built into the newest iteration of Photoshop. In fact, it’s been an available feature in the image editing software since PS5.
That being said this quick graphic design tutorial will go over the steps you need to follow to make animated gifs with Photoshop. Recently, I had to create an animated gif for a presentation I was working on. I hadn’t done this since before I was a full-time Flash programmer so it’s been a while. However, creating an animated gif with Photoshop is as easy as it is elegant. When all was said and done I had an animated graphic that nested itself neatly inside my Powerpoint presentation.
- Fade options tab
- Loop options tab
- Tweening tab
- New frame tab
- Delete frame tab
Create Animated Gifs Using Photoshop a Step by Step Guide
- First you’ll need to create a layered PSD to import animation frames into the Photoshop timeline panel.
- Creating an animated gif is essentially making your own stop motion animation. You’ll need to separate each frame to its own layer.
- Once this is done you’ll want to open the “timeline” panel in Photoshop by going to…
Window > Timeline
…in the top navigation.
- You’ll see the Timeline panel open up near the bottom of the work area in Photoshop.
- Click on the new frame icon in the Timeline panel. It’s the post it note same icon as the layer panel.
- Once you have enough frames for you animation select the layer you want to display with the frame selected at the bottom of the screen to choose which image is displayed in which order.
- Turn on/ off the layers you choose to create your initial animation.
- Once you have the timeline of your choosing you can go back and work on the timing.
- On each frame you’ll see the timeline delay option in a drop down option.
- Adjust the delay until your animation looks how you want it to.
- At the bottom of the Timeline panel you’ll also see “Loop options”. Here you can set the animation to loop as many times as you like. Even infinitely.
- Images can be classically tweened like in Flash by clicking on the triple circle icon.
- By clicking the sliding scale icon you will notice the option to set further animation options for fades.
- There’s even an option to add music clips in the same panel. Don’t get nuts and try applying music for the web. If this is your intention please click away RIGHT NOW!!!
- When you’re done “Save for Web” and viola.
Animation fun fact: Tweening is an animating term used since the days of celluloid. It literally means the frames between frames being animated.
More Really Quick Graphic Design Tips
Even though creating animated gifs for web design isn’t as popular as it once was it still comes in really handy from time to time. Like I said it had been years since I’d created an animated gif. I used to use Microsoft Gif Animator any time I needed animated gifs. This can easily be pulled off with PS. So before searching the web archives or expired floppy discs for a copy of this antiquated piece of software give Photoshop a shot.
Please Comment and Share this on Social Networks
If this tutorial helped please, Please, PLEASE share it on your favorite social networks. Feel free to leave a comment. I’m interested in your feedback and WILL respond. Again thanks for stopping by now please tell everyone you know.
Inspiration for My Animated Gif
Gaspar Noé’s “ENTER THE VOID” Opening Credits. Bite down on a leather strap before watching the intro otherwise, you may have a seizure. You’ve been warned.
— Nate Balcom (@lukeslytalker) February 10, 2016