Quick Tip: Create an Animated Banner Ad in Photoshop CS5

Quick Tip: Create an Animated Banner Ad in Photoshop CS5

Vikram Creative on Jun 17th 2010 with 95 comments
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!

By Vikram Creative

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Add Comment

Discussion 95 Comments

Comment Page 2 of 2 1 2
  1. Marly Manning says:
    April 20, 2011 at 1:19 pm

    GREAT tutorial!

    Now what is the best way to add a hyperlink so people can respond to your animated gif’s call to action and buy your services?

    Reply
  2. kebumennews says:
    May 8, 2011 at 5:56 am

    i like this tutorial .. please give me for download…..

    Reply
  3. Max says:
    May 10, 2011 at 6:44 am

    Good tutorial, but file-size output is too large, especially when designing to a standard.

    Reply
  4. Lee Greenhill says:
    May 23, 2011 at 9:21 am

    Just what I needed. Thanks very much.

    Reply
  5. bluereviver says:
    June 15, 2011 at 5:46 am

    Really good tutorial.. I like it so much…

    Reply
  6. Ellen says:
    June 24, 2011 at 4:22 am

    Nice Tutorial, but not if you don’t have photoshop extended………
    Not helped me out unfortunately..

    Reply
  7. JAMES says:
    July 7, 2011 at 9:23 am

    Yer shame you didn’t bother mentioning I needed PS extended at the beginning before I got half way through!

    Reply
  8. Driss Tribech says:
    July 15, 2011 at 1:50 pm

    Nice tut, but there is a problem because PS save GIF’s in large size. If there is a tip to make it smaller than 50ko without losing the quality, wil be GREAT. Thanks

    Reply
  9. Mead says:
    July 31, 2011 at 10:16 am

    To have smaller file sizes, you dont want to choose Save As when you’re saving. Choose Save of Web and Devices. Then you’ll see optimization options, the kind you’d see in ImageReady, if you’re familiar with it.

    But what I really want to know is how I can change opacity with the frame animation mode. I’m not yet comfortable with timeline mode and very used to going by frame. ImageReady and Animationshop both went by frames.

    Reply
  10. jamz says:
    August 26, 2011 at 7:02 am

    Thanks for sharing great tutorial and helpful site.

    I tried the picture GIF file but color tone turn out bad, can anyone tell which is the best setting?

    My current Settings: Selective, 128 Colors, 88% Diffusion Dither, 5 frames, Transparency off, No Transparency Dither, Non-Interlaced, 0% Web Snap

    Reply
  11. Frankie John says:
    September 2, 2011 at 10:02 am

    Hi There, thanks for tutorials. I like this! :)

    Reply
  12. Frustrated says:
    September 7, 2011 at 5:05 am

    Huh? You spend absolutely ages describing how to bsically just draw in PS then at stage 10 – the crucial bit – you just say refer to the image below!!

    Lazy.

    Reply
  13. Jesse says:
    September 8, 2011 at 2:43 am

    How do you adjust loop settings in timeline mode?

    Reply
    • Miklr says:
      September 23, 2011 at 10:26 am

      Also if your saving as animated gif you have to set Looping ‘Forever’ from within your ‘Save for Web’ dialog box.

      Reply
    • Miklr says:
      September 23, 2011 at 11:59 am

      Move timeline scrub/pointer to the end of timeline, then use timeline menu select ‘Set end of work area’ and then select ‘Go To’ and then ‘First Frame’.

      Sorry, didn’t reply correctly first time.

      Reply
  14. shailesh says:
    October 23, 2011 at 11:57 am

    its realy nice!!

    Reply
  15. Anne says:
    October 25, 2011 at 5:46 pm

    How do you insert it into dreamweaver??

    Reply
  16. Eric says:
    October 28, 2011 at 1:55 am

    Beautiful tutorial, thank you! The on part I’m not fully grasping is in Steps 6 and 10 where the text appears to scroll rather than fade in or out. I understand the clipping mask aspect but not the moving animation. Any suggestions? Also are there any ways of trimming the file size to something smaller?

    Reply
    • Jarin says:
      January 20, 2012 at 2:41 pm

      I agree, I understand how to create a clipping mask, but what layers are supposed to be used, the type layers or another? or better yet what am I masking?

      Reply
  17. Yannis says:
    November 23, 2011 at 5:08 pm

    Hello everybody!

    Does anyone know how can we add a link in a gif banner??? Is there anyway to add a link without Photoshop?

    Thanks!
    (sorry for my english)

    Reply
  18. Raven says:
    December 1, 2011 at 12:37 am

    Excellent tutorial! So thankful and super helpful for my final design project for PR Visual Communication. Kudos!

    Reply
  19. Reza says:
    December 5, 2011 at 3:17 pm

    Nice piece of work.. thank you :*

    Reply
  20. Dan says:
    December 18, 2011 at 9:32 am

    Lazy tutorial… explain steps 9-> fully, as well as showing the actual PS screen

    Reply
  21. Udit Malhotra says:
    December 25, 2011 at 4:22 am

    Hey Nice One ! Trying to get a hang of it !! amazing stuff and thanks for the share !

    Reply
Comment Page 2 of 2 1 2

Add a Comment