Grafpedia » Tutorials » Designing » Design an animated banner in Photoshop
Design an animated banner in Photoshop
in Designing, Drawing, Effects, Text Effects, Tutorials by Razvan on May 11th, 201023 Comments->
In this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
I will explain how the Animation (Timeline) panel works and how to use it to create great animations with little effort. Let’s get started !
This tutorial can be used if you want to promote your website on psdtuts.com for example.
Want to download the PSD file ? Register for a VIP account and download our entire collection with 70.000 items.
Final Image Preview
This is the banner that we will create.
And here is another version with a different size.
Note: For this tutorial I used the Animation (Timeline) panel, which is available only in Photoshop Extended.Â
Step 1
Create a new document in Photoshop with the leaderboard size (728 x 90px). Grab the Paint Bucket Tool (G) and fill the background with the color #2f2f2f.
Step 2
Go to the top of the Grafpedia homepage and make a print screen (or copy this image). We want to capture the stars so we can use them in our banner.Â
Open a new document in Photoshop and paste the screen capture (Ctrl/Cmd + V). Then grab the Rectangular Marquee Tool (M) and make a selection of the stars like you see in the following image. Hit Ctrl/Cmd + C to copy what you have selected.Â
Step 3
Go back to your first document and hit Ctrl/Cmd + V to paste your selection. Name this layer “stars”, right-click on it and select Convert to Smart Object. Then go to Edit > Free Transform (Ctrl/Cmd + T), change the size of this layer, rotate it and put it in the left side of your image.Â
Step 4
Duplicate the “stars” layer (Ctrl/Cmd + J). Then go to Edit > Transform > Flip Horizontal and move this layer in the right side of your banner.Â
Step 5
Select the Type Tool (T) and write the words ‘Find only on’ in the top middle area of your image using the color #aca6a6 and the font Myriad Pro. Double-click on your text layer and use the settings from the following image for Drop Shadow. Hit Ctrl/Cmd + G to put this layer inside a group. Name the group “info”.Â
Step 6
Use the Type Tool (T) to write the word ‘Grafpedia’ underneath the first line of text using the color #ebe5e5. Double-click on this text layer and use the settings from the image below.Â
Step 7
Select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle underneath the text using the color #413e3e. Double-click on this layer and use the settings from the following image.Â
Step 8
Select the Type Tool (T), copy the following text and paste it into your Photoshop document. Set the color of this text layer to #dad5d5 and center it. Then open the Character panel (Window > Character) and use the settings from the following image. I used the font Myriad Pro Semibold Italic with the size 20px and the space between text lines of 30px.Â
27000 Photoshop Gradients
30000 Photoshop Layer Styles
1000 vectors files + vector icons
PSD Layouts for each tutorial
Stock images + Textures
Swatches + 1000 PS BrushesÂ
Use the Move Tool (V) to put the first text line in the middle of your rounded rectangle. Now if you hold down the Shift key and hit the up arrow three times the text will move up with 30px and the second line of text will be in the middle of the rectangle.Â
Step 9
When we will create the animation, we will make the text that is inside the rounded rectangle to move up. However, we want the text to appear only inside the rectangle.Â
To do this, first hit Ctrl/Cmd + G to put your text layer inside a group. Name the group “text”. Then hold down the Ctrl/Cmd key and click on the vector mask of the “Shape 1″ layer to select the rounded rectangle. Make sure that the “text” group is active and go to Layer > Layer Mask > Reveal Selection. Now if you move the text layer around you will notice that it doesn’t appear outside the rounded rectangle.Â
Make sure that the first line of text is in the middle of your rectangle.Â
Step 10
Hide the “info” group for the moment. Then create a new group and name it “call-to-action”.Â
Select the Type Tool (T) and write a call-to-action text using the color #f1eaea. Add a shadow to this layer using the settings from the following image.Â
Step 11
Select the Rounded Rectangle Tool (U) and create a rounded rectangle using the color #82b437. Double-click on this layer and use the settings from the following image. Name this layer “button”.Â
Step 12
Select the Type Tool (T) and write the words “Click here now” on your button using the color #e7f3d5. Double-click on this text layer and use the settings from the following image.Â
Step 13 – Animating the banner
We have finished creating all the layers. Now we can start creating the animation.Â
First, open the Animation panel (Window > Animation). I will use the Timeline Animation panel (and not the frame animation). It is available only in Photoshop Extended. Then make sure that your both groups from the Layers panel are visible and set their opacity to 0%.Â
In the image below I explained some of the features of the Animation panel.Â
Step 14
Go to the “info” group from the Animation panel and click on the Opacity stopwatch to add the first keyframe. The opacity of the “info” group is 0% at the moment. Now move the Time Indicator at 00:15f and set the opacity of the “info” group to 100% from the Layers panel. A new keyframe will be added automatically because you have changed the settings of this property.Â
Now if you play the animation, the opacity of the “info” group will gradually go from 0% to 100%.Â
Step 15
Move the Time Indicator at 01:00f and click on the Position stopwatch of the text layer from the “text” group to add a new keyframe.Â
Step 16
Move the Time Indicator at 01:10f. Then make sure that the text layer from the “text” group is active. Select the Move Tool (V), hold down the Shift key and hit the up arrow three times to move the text 30px up. A new keyframe will be added automatically.Â
Step 17
We want the text to stand still for a period of time before it moves again. To do this, move the Time Indicator at 02:00f and click on the keyframe button from the left side of the Position stopwatch to add a new keyframe. Now the position of the text will not change between 01:10f and 02:00f.Â
Step 18
Repeat the previous three steps to change the position of your text layer until you get to the last line of text. You can see in the following image how my Animation panel looks so far.Â
Step 19
Move the Time Indicator at 06:10f and click on the keyframe button from the Opacity property of the “info” group to add a new keyframe. Then move the Time Indicator at 06:20f and set the opacity of the “info” group to 0%.Â
Step 20
Now we want to make the “call-to-action” group visible. Make sure that the Time Indicator is at 06:20f and click on the Opacity stopwatch to add a new keyframe.Â
Move the Time Indicator at 07:00f and set the opacity of the “call-to-action” group to 100%.Â
Step 21
Move the Time Indicator at 09:20f and click on the keyframe button of the “call-to-action” group. The opacity of this group will remain 100% until it reaches this keyframe.Â
Now move the Time Indicator at 10:00f and set the opacity of the “call-to-action” group to 0%.Â
Step 22 – Saving the animation
We have finished our animation. You can click on the Play button to see it.Â
To save our banner and use it on the web, go to File > Save for Web & Devices. Then use the settings from the following image and click on the Save button.Â
Final Result
Here is the final result of this tutorial. I hope you enjoyed it and you learned some new things.Â
Creating banners with different sizes
You can use the same technique that I presented in this tutorial to create banners with all kind of dimensions. Bellow you can see another banner that I created with the size 200 x 125px.Â
Your opinion
Share your thoughts in the comments below and let us know if you enjoyed this tutorial and if you want more like this one.
Responses to “Design an animated banner in Photoshop”
Trackbacks
- Vote on this article at blogengage.com
- [User Link:Design an animated banner in Photoshop] | Tips for Designers and Developers | tripwire magazine
- Design An Animated Banner In Photoshop | Design Newz
- :: workshop news & musings :: » Blog Archive » Design an Animated Banner
- 25 Helpful Photoshop Tutorials for Web Designers | [Re]Encoded.com
- Web Tasarımcıları İçin 25 Faydalı Photoshop Dersi | Tasarim8.com
- Design an animated banner in Photoshop | Grafpedia | Web Tutorials
Leave a reply
Categories
Other sections
- Test king | Braindumps
- VCP-410 | 642-832 | 642-813
- Test king | Braindumps
-
-
Pages
Write for Grafpedia
Do you want a Free VIP account on Grafpedia for one year ?
Write one high quality tutorial for us and we will give you a VIP account for one year.
For more details please contact us
-
Last Posts








































Great tutorial! Thanks for posting!
Very detailed tutorial, thanks!
I just discovered this Animation Panel in PS through this tutorial
Thanks!
I was really unaware of animation concept in Photoshop… Really man you have posted such a good and supportive piece of work… please write more… more you will write… other will get more benefit. AWE SOME MAN…!!!
This just brings me back to the days, 2 years ago that is, when I would then want to copy and paste the code to put it on my MySpace band page!
Great, great design though! Thanks!
Now this is very interesting and useful, thank you !
amazing technique you sharing using new PS version. thanks for sharing
Razvan,
This is a great article for people whom have abandoned animated .gifs because they believe they are tacky or outdated. The fact that Photoshop has this kind of control for animation, still is something that can still be used today. I actually see this technique, ironically, replacing some of the Flash banners that are used on websites today because of what Flash offers in Animation control (ex. ActionScript, Tweens, etc..) Anything to ease the discomfort of Mac OS X users when loading websites, but that’s my opinion
.
Great article!
Always enjoy reading what is on here.
Really nice tut. Thx!
very nice
Thanks
I hope you create more tutorials about banners
like it, love it , it`s good idea
very good idea
thank you very much …
Super tutorial.Sincer,credeam ca numai in flash se fac animatii.
thx for great tutorial
but how can i change shape1 color (step 7)? it wont change :S
Great tutorial!!
How I can lift my banner to my website??
I Tried to use Dreamweaver, to get the html code, but it doesn’t work!
Please help me!