Quick Tip: Create an Animated Banner Ad in Photoshop CS5

Quick Tip: Create an Animated Banner Ad in Photoshop CS5

on Jun 17th 2010 with 116 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

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
 
 
← Older Comments
  • http://HappinessHabit.com Marly Manning

    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?

    • Nathan Pointer

      wrap it in anchor tags when you put it online(ie which would make the whole image a link)

  • http://www.kebumennews.info/ kebumennews

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

    • http://www.vikramraja.com Vikramraja
      Author

      Download Links for available for premium members :)

  • Max

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

  • http://www.imp-ressions.co.uk Lee Greenhill

    Just what I needed. Thanks very much.

  • http://www.bluereviver.com bluereviver

    Really good tutorial.. I like it so much…

  • Ellen

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

  • JAMES

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

  • http://www.flickr.com/photos/samasolutions/ Driss Tribech

    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

  • Mead

    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.

  • http://127.0.0.1. jamz

    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

  • http://frankiejohn.blogspot.com/ Frankie John

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

  • Frustrated

    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.

  • http://jscottdesigns.com Jesse

    How do you adjust loop settings in timeline mode?

    • Miklr

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

    • Miklr

      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.

  • shailesh

    its realy nice!!

    • http://www.vikramraja.com Vikramraja
      Author

      Thanks shailesh

  • Anne

    How do you insert it into dreamweaver??

    • http://www.gorna.bg/ Milen Petrov

      Save your psd banner work as .gif and then, add it in “” tag

      For example:

      your saved banner is named “anBanner.gif” , you need to add this line in your editor:

  • Eric

    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?

    • Jarin

      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?

      • Thomas

        Simply put all the bullet words on one single Layer by typing the first word – hit return (twice) – type next word (return twice) …
        Then klick with right mouse button on the text layer in the layers window and choose “rasterize text”
        Then make a clipping mask to red box layer (alt klicking the line between both)

        To do the scrolling animation:

        General habit: go to the frame – make the change – add a keyframe

        Therefore put the timeline marker to the frame where scrolling should start.
        Mark the layer to be scrolled and give it an initial keyframe for position.
        Then put the timeline indicator to the frame on which the next word should be displayed.
        Now actually move the layer in your document upwards so that the next word is displayed in the box.
        Now add another key in the timeline for position.
        repeat these steps for the following words.

  • http://www.anto.gr Yannis

    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)

    • http://www.vikramraja.com Vikramraja
      Author

      you can add using dreamweaver.

      or you use the code below.

  • Raven

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

  • http://www.techtution.com Reza

    Nice piece of work.. thank you :*

    • http://www.vikramraja.com Vikramraja
      Author

      thanks a lot guys,stayed tuned with more tuts :)

  • Dan

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

  • http://www.talkabouttech.com Udit Malhotra

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

    • http://www.vikramraja.com Vikramraja
      Author

      Thanks,Enjoy Udit Malhotra.. :)

  • http://www.tetrabyte.com Luke

    I don’t understand why so many people are complaining about such a handy tutorial, I think you need to stop crying out it. It’s not the person who wrote the tutorials fault that you don’t own a decent copy of Photoshop. As for people complaining about the size, in today’s world of high speed internet 250kbs is nothing. even with a slow 5Mb connection it’s about half a second worth of download. This is quite a high rez complex animation of high quality, i was actually surprised how small it was. If you want a smaller file just don’t create something as complex… simple!

  • http://www.guwahatimetro.in GuwahatiMetro

    I already have Photoshop CS 5.5 Extended.

  • Strategy

    Luke, the context here is advertising. 250kb is HUGE and well over the spec that most publishers allow for advertising. 50kb limit is fairly common

    • Designedit

      Not sure where/what medium company you design for, but they are obviously seriously limiting your advertising capabilities. 250kb is well within current specs we use for our companies specs. Even on a dial up 250k line which is less than a QUARTER of internet users, this is about a 1 second blip.

      3-4 years ago that was the limit, but not anymore, especially with the advent of HTML5.

  • http://www.priceindiaka.com kapil

    Really Nice Tutorial..

  • http://www.gregorysroatantours.com Gregory

    This is a great Tutorial.
    thank you very much.

    • http://www.vikramraja.net vikramraja
      Author

      Thanks Gregory

  • Arash

    Thanks man, this was great.

    • http://www.vikramraja.net vikramraja
      Author

      Thanks kapil

      • http://www.vikramraja.net vikramraja
        Author

        Sorry Arash :)

  • omid

    HI
    THANKS
    but i can’t to make it
    it’s hard for me
    i don’t know how to creat banner
    in this Tutorial. i don’t know how to creat:
    Tutorials, Articles, Tips, Freebies, Basix, Videos, effects
    any body can to help me?

  • http://www.webdesignerlimburg.nl/dev/flirthier.gif Flirthier.com

    worked well for me! Great tutorial.

    http://www.webdesignerlimburg.nl/dev/flirthier.gif


  • http://techieshome.com Ankul Barar

    Amazing TUT! Thanks a lot! I was wondering if you could share something on digital painting ?

  • http://www.picturethismultimedia@comcast.net Lynn Richardson

    Took me awhile, but very effective assitance for one not familiar with all the features in Photoshop. I have one problem you may be able to answer. When I save the file as a gif using Save for web & devices, it saves in a file with images and html (similar to the old ImageReady) but I need to send it to someone to put on THEIR website. How do I send it to them so they can see the finished product?

  • Rajendra KUmar Acharya

    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?

    • http://couchable.co Tyler Herman

      uh, wrap the gif with a link?

  • http://www.werkmetkinderen.com Am

    awesome tut,

    I’m a photoshop newbie but now I finally got the hang of this, it’s actually quite fun making these now :). Keep up the good work.

  • http://twitter.com/twistedkilt kilty

    Ugh, how annoying. Got all the way through this and don’t have Extended so don’t see your timeline and of course, NO directions of what to do when you don’t have the extended version. Looked like a good tute but… onward to the next one, I guess.

  • Sary

    Can someone tell me how to embed a URL link to the entire animation so whenever the user clicks anywhere at any time in anim it takes them to a specified new web page?

← Older Comments