Download Source Files
In this tutorial, we’ll take a look at the Photoshop animation feature to create a nice animated GIF. I’m sure all of you already noticed the ads at the right side of this page. For some of you, they are annoying, others even click on them, which is why they are there. I personally think there’s nothing to be said against them, so I thought why not creating a nice 125 pixel by 125 pixel ad to demonstrate how easy it is to create nice animations inside of Photoshop.
All we need to do is open up Photoshop, create our final image and animate it the way we want it to move the single elements to achieve the final effect. Additionally, we’ll stop by at the beautiful GraphicRiver website, where we’ll download their logo, which we’ll use to create our GIF.
Final GIF Preview
Take a look at the animated GIF we’ll be creating below. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month.
Step 1
First, open up Photoshop and create a new 125 pixel by 125 pixel document. In our case, a 72 pixel/inch resolution and the RGB Color mode with a white background will be sufficient, since we’ll use it on the web.
Step 2
Now, unlock the Background layer, call it “BG” for Background and select the Paint Bucket Tool (G). Instead of using the rich black (#000000) for the background, I use the slightly brighter #111111 black, which looks better. Click to fill the layer.
Step 3
Gradients in designs, layouts or images are very popular and give your final product an extra glance. That’s why we’ll now select the Gradient Tool (G). Choose the Radial Gradient from the options bar and make sure the gradient goes from white to transparent. The images below show you how to do it.
Step 4
After selecting the Radial Gradient, going from white to transparent, it’s time to operate. Put your mouse in the center, click and hold, and drag it to the right. For a straight line and better control, press the Shift key while dragging. The image below shows you how it should look afterwards. Make sure you give this layer a name like “Gradient” and play with its opacity for a smoother look.
Step 5
You might not have noticed it, but our final image includes a nice dark gray one pixel border, which helps emphasize the logo and text, which we’ll add later. There are multiple ways of creating this border, but the way I did it in this tutorial, was as follows:
First, select the Rectangle Tool (U). After that, open up the Rectangle options in the Options bar to set a fixed size of 123 pixels by 123 pixels. The color isn’t important, just make sure you align it properly. Click inside the canvas to create a square. Make sure it covers the Background layer, but reveals it at the edges. I called this layer “Extra.”
Step 6
Now, it’s time to open up the Layer Style window. To do that, double-click on the Extra layer. What we need to do, is bring down the Fill Opacity to 0 and give it an inner 1 pixel stroke with a dark gray (#4d4d4d) color. Take a look at the images below for reference.
Step 7
As mentioned earlier, we’ll now jump over to graphicriver.net to download the nice pre-designed logo files. I highly recommend signing up to graphicriver.net to join the Author Program, or simply shop beautiful graphics.
Should you already be a member, make sure you check out the Referral Program where you can receive a 30% commission from the first Cash Deposit a referred user makes! By selling or buying different graphics and layered files, you’ll be able to either earn money or support other designers with your work.
Now click on the Make Money button in the main navigation to reveal the sub-navigation. Click on Referral Program and scroll down until you can see the Referral Graphics. You can choose between the different marketplaces and download their logos and graphics in high quality. I chose the graphicriver.net logo, but from this point, you can choose the one you like the most. Please make sure you read the Copyright Policy to avoid problems.
Step 8
This is how the logo will look like inside of Photoshop. As you’ve noticed, each Graphic Pack comes with layered PSD files. What we’ll do now, is drag or copy and paste the logo to our animation project.
Step 9
In this case, the logo fits perfectly, but should it be too big or small, just transform it. As you can see in the image below, I placed the logo at the top and added additional text at the bottom-left side. Those are just a few things that you can find and buy on graphicriver.net. Make sure the logo and text are on separate layers. It is important to place them on separate layers, since we later want to turn single layers on or off to create our animation.
Step 10
In the next step, I’ll be using Illustrator to create the waves, which we’ll place at the bottom right side. Some of you might think: why isn’t he just doing it inside of Photoshop? I could, but the reason why I’m doing this inside of Illustrator is because I want to explain the difference between Smart Objects, Pixels, Paths and Shape Layers while importing. If you don’t have the opportunity to use Illustrator, then just grab the Pen Tool inside Photoshop, or use any other technique you like to create the nice waves.
Step 11
As you can see in the image below, I grabbed the Pen Tool to draw two triangular, but curved shapes. Make sure there’s no border set and the shape color is blue.
Step 12
We don’t want two similar colored waves so make sure you use two different tones. These are the ones I used.
Step 13
And this is how it should look like. It doesn’t matter how big it is at the moment, since we’ll only use the curved part of it and the rest will be out of sight. Select both shapes and copy and paste or drag it over to Photoshop.
Step 14
Photoshop will instantly ask you how you would like to paste the object. As mentioned earlier, you can choose between: Smart Object, Pixels, Path or Shape Layer. Some of them will obtain quality while others will make subsequent changes – without quality loss – impossible.
-
Smart Object: Pastes the art as a Vector Smart Object that can be scaled, transformed, or moved without degrading the image. As the art is placed, its file data is embedded in the Photoshop document on a separate layer.
-
Pixels: Pastes the art as pixels that can be scaled, transformed, or moved before it is rasterized and placed on its own layer in the Photoshop document. As soon as you confirm the changes, the object will be rasterized which will result in quality loss, should you want to change it at a later time.
-
Path: Pastes the art as a path that can be edited with the pen tools, Path Selection Tool, or Direct Selection Tool. The path is pasted into the layer that’s selected in the Layers panel.
-
Shape Layer: Pastes the art as a new shape layer (a layer containing a path filled with the foreground color). This can be useful in some cases, but we don’t need this for this project.
Select the Smart Object option and click on OK.
Step 15
We won’t need the entire object, so feel free to resize and position it the way you like. I did it as shown below.
Step 16
Now, it’s time to create the cool shine effect which hovers over our logo and waves. It’s a very simple technique, but the outcome is cool. The first step is choosing the Elliptical Marquee Tool with a 10 pixel feather. I’m using a Feather of 10 pixels on it because we don’t want it to be sharp-edged, which would definitely not look good. Make sure the selection is still inside of our 125 pixel by 125 pixel canvas with enough space around it to be filled with a bright color. Select the Paint Bucket Tool and click inside the active selection.
Step 17
As you can see, we now have a bright, smooth and highlighted ellipse, which will build up the nice glow effect. But one thing’s for sure, it doesn’t look nice this way. We have to limit the highlighted area to the logo, text and waves.
The way I did it, is by selecting the single objects one after another by Shift-clicking on the proper layer thumbnails to create a quick selection of the elements. Now obtain the selection, click on the “Glow” layer and choose Add layer mask.
The layer mask will black out and hide the unselected area, while the white area will display the glow effect on the logo, text and waves. Should the glow be to intensive, simply adjust the brightness by changing its opacity. That’s it. Our final image is done. In the next step, we’ll take a look at how to animate this design.
Step 18
Normally, the animation panel isn’t visible, but you can open it by going to Window > Animation. By default, the Animation panel will open up at the bottom.
Step 19
This is how it will look like by default. It’s the Timeline view, which we don’t want to use in this project. Instead, we’ll work in the Frame view where we can see each animated frame listed inside the Animation panel. To change the view, click on the little fly-out menu button and select Convert to Frame Animation. The images below show you how to do it.
Step 20
In Photoshop, you use the Animation panel to create animation frames. Each frame represents a configuration of layers. The first image below, shows you the Frame listing I mentioned above. The second image, shows you exactly how to configure your layers to achieve the final animation.
Simply select the first Frame, turn on, off or move the elements like mentioned below and you’re done. Work off each Frame after another until you have six frames listed in the Animation Panel. In the next step, we’ll create the tweening, which will add additional frames to create our smooth fade in or moving animation effects.
Step 21
The first step in the animation process is to specify a delay (the time that a frame is displayed) for single frames or for multiple frames in an animation and the tween. As you can see, I’ve changed the frame delay time to 0, which will result in an abrupt switch between the frames.
To make the switch more smooth, we’ll use the Tween command to automatically add or modify a series of frames between two existing frames. You can either tween with the previous frame or the next frame. In this case, we’ll tween with the previous frame. By doing this Photoshop will create the appearance of movement and smooth fade.
To add additional frames, click on the Tween command, enter a number and hit OK.
-
Frame 1 – Frame 2: Add two additional frames.
-
Frame 2 – Frame 3: Add two additional frames.
-
Frame 3 – Frame 4: None.
-
Frame 4 – Frame 5: Add five additional frames.
-
Frame 5 – Frame 6: Don’t add additional frames, but make sure you give the sixth frame a two second delay, since we want it to stay there before looping the animation.
Step 22
You can of course use the play option at the bottom of the Animation Panel to play the animation, but we’ll skip that and export the animation as a GIF directly. We’ll save our project as a GIF file for viewing on the web.
To open up the Save for Web & Devices Window, go to File > Save for Web & Devices. There are a lot of different options for you to play with, but for this project we can use a predefined setting. Make sure you choose GIF as your output file type, play with the settings and hit save. Give your GIF a name and save it to a directory you like. That’s it!
Conclusion
I hope all of you guys reading this tutorial, will use the tips and tricks to create your own animated images inside of Photoshop. The best thing to do is later uploading them to Graphic River for the others to see and buy.
Unfortunately, there aren’t many GIF’s or animated images on Graphic River yet, so your job is to change that! Make sure you sign up on GraphicRiver and upload your designs. That’s it for now and I hope this tutorial was useful for you and informative. Feel free to leave a comment. I’ll try to answer your questions, should there be any. Thanks!
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Kajik
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
haha first
cool tut but looks simple
because it just shows how to create them, if you really wanna do smooth animation use flash…
OMG, I wanted to create animated GIFs since I first started designing as a 14 year old in 1996. Back when the internet just was becoming accessible to the general public (and I was creating crappy sailor moon tribute sites LOL!).
Oh nostalgia! Well it will be nice to play around with this now, even though I’d forgotten about this for half my lifetime. :P
You seem so nostalgic
its simple and nice
Sailor moon tribute website ! I see what you meant ! Big lol
Sweet, I suppose the process would be about the same in CS3, no? I want to make gifs too.
Yes, more or less.
it’s absolutely the same. i did it in cs3
It’s about time someone on PSDtuts team posted an UI tutorial, thanks!
I never knew that was inside of Photoshop and I really know my way around PS!
This was a great one, thanks a lot!!!!!!!!!!
The same thing here.. hahaha :P
This is a great tutorial for anyone unfamiliar with animation inside of Photoshop. I think this feature used to be exclusive to ImageReady – but since CS3 it’s been part of Photoshop (someone correct me please, if I am mistaken)
The one thing I don’t like about animating GIF images with Photoshop is that it seems to add a bit of bloat. When I do animate with Photoshop I tend to then port the image into another application for optimization- personally I’m fond of Gamani’s “Gif Movie Gear” which is a Windows-only application, but still quite nice for the purpose of optimizing animations.
Yes you are right – it was feature of ImageReady but the same result was able to do in PhotoshopCS2, but you have to turn rhe Animation Window on.
This is a really nicely and cleanly done gif ad. The process is relatively the same in cs3 as I know since I’ve made several ads recently.
@prodesigner, sometimes keeping graphics simply done is what works out for the best.
Less is more!
Nice Tutorial
It is a very nice tutorial but you lost me at step 11 with illustrator. I have never used that program before, it just came with my suite; and had no idea what I was doing. A little more instruction would have been nice.
Hi David,
Thanks for your comment.
Check out this tutorial: “Photoshop’s Pen Tool: The Comprehensive Guide” which covers everything you need to know about the Pen Tool:
http://psd.tutsplus.com/tutorials/tools-tips/photoshops-pen-tool-the-comprehensive-guide/
Working with the Pen Tool inside of Illustrator is very similar to working with Photoshop’s Pen Tool.
If you want to learn more about Illustrator, make sure you jump over to vector.tutsplus.com.
Bye
cool tutorial
Ha, I was just trying to do this recently, and I managed to figure everything out except for the saving part at the end… this clears it all up though
cheers
I’ve always wanted to try this, but every other tut on it assumes that you’ve done this for years! Great tut!
Very useful. Thanks.
I’m glad that Adobe finally added the features of ImageReady directly into Photoshop! I’m surprised it took them this long to do it!
can i convert to .PNG ? why use .GIF?
Because I think .Png is not capable of showing animation. Just plain picture.
Whereas .GIF (The Animated Gif) can and does show animation.
PNG CAN be animated and is more or less now considered better than GIF for animations for its cleaner animations. PNG-A is currently in the process of format wars, and we will eventually have a full animation replacement for GIF-A.
Oh, and nearly all major browsers can and do support the PNG-Animation format. You can read more about it on Wikipedia.
niceee!!
Wow, so you got $150 for that?
could of atleast tweened the amination back to the original frame so it fades out instead.
Hi L1,
This is one way of creating a “Tween” between the last and first Frame. The steps are listed below:
1. Select the last frame ( Frame 20 ) and click on the “Duplicate selected frame” button.
2. After Photoshop creates a copy of the last frame, select it and turn off the logo, text, waves and glow layers.
3. Now, set the “Frame delay time”, from the last Frame, to 0 ( No Delay ).
4. Click on the “Tween animation frames” button. The Tween window should pop up. Select “Tween with previous frame”, add as many frames as you like ( I chose 5 ), make sure “All Layers” and the “Parameters” are selected. Click on OK.
5. Since the new Frames result from the previous Frame, you have to keep an eye on the Frame delay times. Make sure they are set to 0 ( No Delay ).
6. From this Point, you can continue with the export part from this tutorial.
7. Thanks for your comment and Tip.
Bye
Excellent
very nice…..I was looking for something like this one. Thanks
i really like to create gif animations, but unfortunately the size are sometimes really huge.. it’s ok for small banners like 120×60, but 468×60 is really fast 200kb or more..
Haha, I never thought to create gifs in PS, I just used Flash.
there is a giant lack of tuts on gif creation,
and an even greater lack of tuts on the new animation panel in photoshop cs4.
great job
p.s. Check out my latest banner here:
http://img18.imageshack.us/img18/3765/starluckban400.gif
welcome i am not understand please make video photoshop
Cool!
Hi,
Sorry you just lost me in step 20 and I am desperately trying everything and couldn’t finish the tut. It got very confusing at that step.
Hi goga,
First, you need to select frame one, turn off the logo and text layers. After that, move down the wave layer vertically, until it disappears from your canvas (Select the wave layer, hit and hold down the Shift key, click on the wave layer and drag it downwards).
Now, click on the “Duplicate selected frame” button, to create a copy of frame one. What you need to do now on frame two, is turn back on the logo, leave the text turned off, but repeat the last step from above to bring up the waves half way.
Each of those six listed “Frames”, in the second image of step 20, represent what you need to do next on each frame. The next step, would be creating another copy of frame two and apply the changes listed next to the third image.
In the end, you should have six frames. The description right next to the Frame, shows you which layers were turned on, off or moved to achieve the final effect.
I hope this helps. If not, feel free to ask any questions you have.
Bye
Im stuck here too, how do I ‘turn off’ the text and logo? Do you mean put the layer’s fill or opacity to zero or is there an actual way to turn the layers on and off?
Wow old school!! It’s cool to see a throw back from my ImageReady days, almost makes me want to throw these back into my work flow!
This tutorial is cool, and everything that. But using flash for this kind of stuff is still going to be the best thing to do.
By using flash, you would have:
Smoother and Better Animation.
Much more controlled.
It’s Faster and Easier to Create.
Totally random question… What font you use? :P
I tested some fonts in PS, looks like Arial to me.
-David
Hi Alex,
The font I used to create the description text in the bottom left corner was Myriad Pro, but I’m not sure which font was used to create the Graphic River logo. I think it’s custom made.
Bye
Nice Animate !
Very cool indeed… and simple
Shows that you could do a lot more with it.
Nice tut. Did not know the tween command :)
I’ve been doing a few mobile sites lately. Banners on mobiles are animated gif’s, so it back to the pre Flash days, while were waiting for smartphones to support Flash widely.
Cool stuff :)
muy bueno e interesante! gracias
Cool. Nice tut, I’ve been wondering ever since Animated GIFs in AE. Thanks for the PS tut :)
-David
sweet sweetness
Very cool tutorial..thank u :)
hai
i do not know anything about animation. i want to animate a jet engine. can any one help me to design my own jet engine technology
Great tut. I signed up to graphic river.
Another way to do the dark outline is to do Ctrl A to select the entire layer, then stroke a 1px black border. Its simple and easy. I am open to new ways to do things but I thought I’d share the knowledge.
Cheers. Listen to Pink Floyd
I am lost on step 17. I selected everything that i want the glow on, and I made a layer mask, but there is no shine. Please help!
Oh, I have finished this tut, but I was wondering how to make the .gif play itself in windows photo gallery
Hi Ben,
Make sure to select all layers and hit the create layer mask button. Depending on where your glow resides at that moment, you need to move the glow layer to the left or right to see the effect. It won’t be visible on the left part of the Logo where the text is very thin.
In response to your 2nd question, I can only say that it won’t play in the Windows Vista photo gallery, but you can always play GIF’s inside of your browser or any other preview tool.
Bye
I knew how to create an Animation in ImageReady then i learned it on Photoshop but i never knew how to animate it!.
Thanks alot for this
well i save another animation as gif but when i double click to open and play it opens in photoshop and just 1 image. it doesnot do any animation stuff
Inadvertently found here,very good
Pretty sweet tutorial sir. I have always wondered about GIF animation in photoshop, I thought we needed to use another program.
Nice thank u
This is a really nice tutorial. I was not aware it was that simple to create an animated gif in Photoshop. Thanks for the great tutorial.
i have done that but it seems that it doesnt work on my site why?
i dont know
hi best video photoshop
welcome i am not understand please make video photoshop
tanks man a lot very very useful
I also had no luck with getting my own animation to create more than one frame, even though it has 12 frames.
Had to grab the preview gif to get it to work! #_#
Thanks!