Tutorial Details
- Program: Adobe Photoshop CS5 Extended
- Difficulty: Intermediate
- Estimated Completion Time: 2 Hours
Download Source Files
Final Product What You'll Be Creating
Animated Gif files have been the butt of many jokes within the design community. That is because animated gifs are famous for being a bit cheesy and notorious for cluttering up a page. Used properly however, animation can draw interest to an otherwise overlooked area of a page. Today, we will demonstrate how to use Photoshop to create an animated gif in Photoshop CS5. Let’s get started!
Step 1
Create a new document 250 x 250 px and set the resolution to 70 px with the background color set to #f2f2f2.
Step 2
Place a logo in the top center of the canvas.
Step 3
Write a tag line under the logo.
Step 4
Draw a rectangle box and set the color to #90909.
Open the layer styles dialog box and check Drop shadow. Reduce the distance and size to 2px.
Now add a gradient overlay and set the blending mode to Multiply with an opacity of 28%.
Add a stroke and reduce the size to 1 px. Set the color to #a31b1b.
Step 5
Add some bullet points. In our case we added the text: Tutorials, Articles, Tips, Freebies, Basix, Videos, Premuim, as shown.
.Rasterize the text layers and create a clipping mask.
Step 6
Now place an eye-catching image. In our case we used the premium program icon for Psdtuts but feel free to use whatever suits your purpose.
Step 7
Draft some more supporting text as shown below the image you placed in Step 6.
Step 8
Create an oval Box and set the color to #fdfcfc.
Open the layer styles dialog bix and apply a drop shadow. Reduce the distance and size to 1 px.
Check Inner glow and leave it as it is.
Add a Gradient Overlay with the Opacity set to 6%.
Step 9
Now that we have finished creating all our layers, we are now ready to start work on the animation. First, open the Animation panel (Window > Animation). I will use the Timeline Animation panel (and not the frame animation). Note: This feature is only in Photoshop Extended. Now set all your layers to visible but reduce their opacity to 0%.
Step 10
Refer to the image below for instructions on how to insert keyframes and where to increase opacity.
Step 11
Your timeline should look similar to the example below.
Step 12
We have now completed our animation. Press play to see the result. Feel free to tweak it where necessary. To save your banner, go to File > Save for Web & Devices. Then use the settings from the following image and click Save.
Final Image
That’s it! You’re finished!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
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
Yep, let’s keep stepping all over Flash! But now I have to get CS5. Do they have a ‘No Flash’ bundle?
They have flash catalyst, which is totally worth the CS5 purchase, and has been super simple to achieve better than animated gif quality material (no crazy new timeline learning either!). Lynda’s tutorial on it is definitely worth the watch.
Definitely agree with everytuesday. Flash Catalyst is probably the most valuable new feature/program in CS5. It’s a great tool.
That’s quality. Very useful!
I’m still not going to leave CS3 though ;)
Nice Quick Tip. Some people should know that you can do this in CS3, CS4 and even in CS2 with ImageReady, though.
owh..poor me..I did not know it before..thanks a lot.I’m using CS3..is it the same like that?
I know that in CS2 photoshop you simply go to “file > edit in ImageReady”. Its not this Flash interface though. You have to go under Windows in Image Ready and open the animation window.
Thanks for this! Another great resource on Photoshop CS5 I found:
http://www.peachpit.com/promotions/promotion.aspx?promo=137726
Mmm, I have a few issues with this tut. The final .gif file weights 244kb, that’s too big for any ad network, also all this can be done with previous versions of Photoshop… come on PSDTuts, people come here to learn! give them something they can actually use!
a little on the heavy side no?
The transitions are very smooth! Can this be made by using the gif animation feature without using Photoshop Extended?
I’m curious as to why you used 70 dpi for the resolution, and not 72.
Nice tutorial. Just wondering why you chose 70px over 72 though?
Very useful. I ll try to update to CS5 :D
seriously?
the .gif file is a whopping 245kb in size and limited to 256 colours.
In real world where you send banners for online media, file size are usually restricted to 80-60kb max.
Flash was made to replace those fancy, smooth animated .gif because their file size is much lower and also has a wider colour range.
Though it’s possible creating smooth animated .gif, it is really a bad idea for banners.
wow… the timeline in cs5 is like 1000% better than cs3′s. i’ll take a ride tonight :D
A banner ad that’s roughly 240kb in size? Many advertisers only accept under 35kb…
very good tutorial but i don’t have cs5 yet :) on the other hand i am sorry for flash it seems that it is losing the battle because a lot of software start to incorporate animation features … where are the days when a flash website design was the coolest thing??!!
Nice tutorial.
Only i have one thing. Since i’m designing and building banners for years for big companies and networks, i realy think the size of the banner is a big problem.
If you safe the banner you see its over 254kb.. wich is way too large and way over the limits every banner network uses.
Most both flash and gif banners always have an max. kb limit ranging from 30kb and sometimes up to to 40/50 kb. Unless someone hosts their own banner and it doesn’t matter to them.
But that’s just a notice! the tutorial itself is about creating animation etc. with CS5, so nice work!
I’m totally with you, FL. I just landed a freelance gig doing web banners/ads and one of the requirements is to keep the file size to a minimum of 10KB and a maximum of 20KB. There is no way I can make something this good under the required file size, it’s pretty much impossible.
I had done a few banners with PS in the past and I never went over 10-12 frames, but this GIF if pretty much off the charts with 150 of them. Having animated GIF banners/ads this size would definitely and dramatically slow down the loading of any site, especially if you have a couple of them.
This is a very good tutorial and well explained, though.
Very nice and smooth but nothing that can’t be done with CS3. Then the file size… oh boy! A GIF banner with very basic colours like this should be well under 30K and probably in the region of 20K. Reducing the colours from 256 to 128 (or maybe even less as there is not a great variety of colours) would be the first step.
Good tut though!
There’s no way, absolutely no way, you get this animated gif banner, under 30kb.
Nog even when you bring down the colors to 20, believe me :)
Its an impressive gif file yes. However its still 244k which when creating banner ads for any website you have 30k max (so not much use really as a flash alternative would be 30k). Also why is this development going into Photoshop and not Fireworks?
you completely left out how u animated the scrolling words “Tutorial, Articles, Freebies, Tips” and so on in the timeline. this is done via the “Position”-option but u did not explain that at all as far as i can see.
I agree! Can you point to any references online about using this feature? I’m totally stuck trying to recreate the effect.
Great, exactly what I was looking for. I’m gonna try it as soon as I can.
Nice tutorial.thank you.
Is possible to create it with Photoshop CS3?
It’s quite nice to see that the animation panel inside of Photoshop, closely resembles the one found in After Effects. Nice tutorial!
gif animation software,i prefer Ulead gif animator.
I have Photoshop Extended, but who can i do to convert Animation Panel to Timeline Animation panel ??
219 kb – Too much for a gif. most of sites accepts no more then 50 kb
Because cancelled my premium account??
great tutorial, you can also visit my “How to create an animated banner in Photoshop” tutorial here: http://alturl.com/hd8b
Nice work, but the GIF is far too huge in size.
Good tutorial although I must agree with the comments that the file size is too large. I would go for a Flash banner instead.
Hello,
This is a great tutorial!
I’m using CS4 Extended and having a problem with Rasterize the text layers and create a clipping mask and create animation [position] to it. I can’t to work right as in this tutorial.
Sorry I’m a newbie to PS, any help will be appreciated.
Thank you.
Mark
Great tip! I was looking for something like this. The Photoshop CS5 is amazin!
Anyone else get lost on step 10? The animated images are so distracting I can’t make any sense of whats going on. How Do I had a new key frame?
(using animated gifs as instructions is poor readability imho, please attach written instructions)
Thank you for the tutorial. Helped me a lot..
Thank you guys,This is my first tutorial in Psdtuts
I will keep on sharing Very useful Tutorials.Keep enjoying
although there are a lot of missing steps (I think an amateur would be stopped in the middle of the tutorial), but I got a knowledge about the “timeline”. Thank you sir. the same technique used in After Effects too. Keep trying & keep upgrading your presentation.
The file size might be huge…but at least the likes of iPhones and iPads will see it because of Apples’ dislike of Flash at the moment. Make Banners not War!
it’s nice tutorial.. thanks to all
As an amateur and totally inexperienced in animation, can anyone please explain to me in laymans terms how animate the scrolling words??
You must first rasterize the words and in the timeline, set keyframe, and select “Move Tool” (V) then change the position of words on a new keyframe.
I see that Vikramraja wrote this tutorial. The 2 parts where this tut misses the boat (unexplained Positioning and “how to add a key frame”) illustrates very well why entrusting your coding project to Indian outsourcing is a bad idea.
Its all “yes ve cun do dat” at the beginning, but after doing all the easy stuff leading up to the REAL thinking part, Indians rush the job and walk away to go something easier, leaving their clients very much like Vikramraja left us in this tut: with a product no one can use.
Stop. Outsourcing. Now.
It’s true that advertisers won’t take files this big but that’s no to say that these are “large” by any standard. Well, for 1998 web standards maybe. A 200k file still loads fast on most internet connections. In fact, I have 1-2mb web pages on my business site that contain several animated gifs as rollovers. Not a problem loading and displaying.
I dunno what it is with the need for tiny gifs but I’ve found that these same advertisers are usually using older machines and software. Some have actually asked for QUARK files for print material!
Hi guys,sorry for the file size I didn’t notice about that,anyway thanks for asking us.
It’s a nice tutorial, but you should have said up-front that it requires CS5 Extended.
Thanks for the tutorial.
I want to make my timeline a bit longer than the current 10 seconds or whatever it is..
How can I do that?
All the best!
Just found it myself. Just go to the Timeline panel menu (the very small button with lines on the top right of the pallette), and select Document Settings…> and change Duration.
good luck!
Hey,
Thanks for this it really help me alot
Cheer’s,
Chris
That’s awesome. I’ve been lately upgraded from ps7 to CS5, and these words save me much time! thank you:)
HI Guys,
Thanks for your comments and Suggestion and Mistakes that made me more To help you out…
1.Some where saying that I left some steps how to animate the scrolling words “Tutorial, Articles, Freebies, Tips” and so on in the timeline.
- Type Tutorial, Articles, Freebies, Tips,etc” In one text layer itself.
- Raster-size the text layer.(Don’t ask me how to do that)
- And now got to red box should be made clipping mask to the text layer,so that you can find the text inside the box…
- Go to the animation layer and Choose the text layer create a new keyframe,and after a few length close the animation and move the text layer to last..
After That you Will be getting the scrolling effect… If you have more doubts on this Feel free to mail me.
Thanks bye… :)
I got stuck in animating the bulleted words. When I’m on the making of keyframe in the “Position Attribute”, it would prompt me that “Animating the layer position may not have any effect. You may need to animate the mask”.
What’s next for me?
One question…
How do you set the opacity levels?
I’ve tried everything, and I’m still confused.
Would really help if you added that in…
Same process
Click the new key and Set the opacity to 0.
And move until who much distance you need and set a new key and set the opacity to 100.
the only problem with this, is you’ll never achieve this effect and get your banner under 30kb…which is a standard for web based banner ads. Your ad is at 250kb. I think any good banner ad designer thinks about the kb from the get go.
For banner – this is unusable, because output file is mutch biger that ithe same file created in flash.
But if we want to create a short animation, maybe example something – this new function is rules =)
How can I get step 5 to scroll?
just Select the text and the object which you wanna create clipping mask.and right click choose clipping mask.
After that set the keyframe to first and move the other end and move the text.so it create a keyframe automatically.
Just play and see..it works..
this tutorial helped… Thank you so much!
Hi. I need help. I’m trying to make an animated thing with photoshop cs5. I followed the steps, generally. And I was able to preview the .gif file here in my laptop. It opens only in internet explorer or firefox. However, when I try to upload it on tumblr and send it to my friend through email, the animation does not work as its supposed to. Only the 1st frame shows. Howcome? Pls help.
Thanks a lot.
May be because of the file size,have you checked that in browser whether it plays till last of the animtion