Make an advertising banner

Posted on 02. Jan, 2008 by tutorials007 in Photoshop Tutorials 12,860 views

banners250x100.gif
In this tutorial you will learn how to make an advertising banner.
This banner you can use to promote your site.
We will make static and animated banner. For animation we will use ImageReady.
This program comes with Photoshop.

This tutorial will show you the basics of banner creation, it will not make you world’s greatest banner maker.
At least not yet :)

1. Open up Adobe Photoshop.
Make a new document. Set width to 468, height to 60.

2. Make a new layer (CTRL + SHIFT + N) and name it banner.
Place it above your background layer.
Now, we will add some gradient style and stroke.
Go to Layer -> Layer Styles -> Gradient Overlay
Use settings like on pictures below.

banners_set_1.gif

banners_set_2.gif

3. Go to Stroke tab, add settings like on picture below.

banners_set_3.gif

4. Now, fill your background layer with black.
Your layers should now look like this:

banners_set_4.gif

5. Ahead we go :) Select your Elliptical Marquee Tool (M).
Make a selection like on picture below.

banners_set_5.gif

Now, by holding SHIFT button pressed make another selection.
SHIFT button is used to connect two or more selections.
Try to get somehing like me.

banners_set_6.gif

6. Select your banner layer and hit DEL button on your keyboard.
This is what you should have now.

banners_set_7.gif

7. OK. Let’s add some text and some icons to our banner.
First download our “Icons24x24set” and pick up some icon.
Now add some text. Use font whichever you want. I used Impact :) .
Add some reflection to your text. Use our “Web 2.0 text with reflection” tutorial to make reflection.
Now add a little text into our black spot. Look at the picture for better understanding.

banners_set_8.gif

Place your layers like on picture:

banners_set_9.gif

This would be your basic static banner.

Now we will add some animation.

Hit CTRL + SHIFT + M to jump to ImageReady.
8. Ok. You’re in ImageReady now. Select your little text layer.In my case this is “Free and easy web design tutorials” text.
Go to action tab. You can find it here:

banners_set_10.gif

Select “Spinning zoom in” action and hit Play. This is what you should get:

banners_set_11.gif

9. Set delay time for your frame 12 to 0.5.
Duplicate your frame 12 and go to duplicated frame (frame 13)
Select “No delay” for frame 13.

banners_set_12.gif

10. Go to Actions tab once again. Select “Zoom out” action and hit play.
When action is finished hit CTRL + ALT + P and admire yourself.

banners_set_13.gif

As I said, this is just a basic tutorial to get you in touch with banner making and animation.
I will write more detailed tutorial soon for animating stuff in ImageReady.

Feel free to post a comment if you want a request something, or if you just want comment something.

Take your education to the next level and earn that bachelor degree you’ve always wanted. You can earn an online web design degree in a short period of time. Check out the different online college degrees an make your education resolution come true! Online learning is simple and easy!

The advent of statistical computing has changed all the rules of internet marketing. Even domain names play a role in advertising now. Methods like pay per click and ppi have defined marketing anew.

14 Responses to “Make an advertising banner”

  1. dresmud

    03. Jan, 2008

    Is this an add on? It dont work

  2. tutorials007

    03. Jan, 2008

    You mean actions? These actions are integrated in ImageReady. Which version do you use?

  3. Trisno

    16. Jan, 2008

    Great tutorial …
    Thanks Tutorials 007 for all tutorials

  4. syed

    16. Jan, 2008

    Hi,

    When I follow your instruction as per steps 1-3 and see the result in step 4, the layers doesn’t appear as show here colored. The banner layer shows as transparent. How to apply the gradient overlay effect into a layer i.e banner layer? Also when you said to fill the background layer with black, did you mean foreground or background of the backgroud layer? can you advice a little more on steps 1-4.

    Thanks

  5. tutorials007

    16. Jan, 2008

    Hi,

    Trisno thanks.ΕΎΕΎ
    Syed, now i see I forgot to write. You have to fill your banner layer with any color before you adding layer styles.

    When you make your banner layer fill it with some color.

  6. Rob

    28. Jan, 2008

    Great help!! Made a few simple banners, but am having trouble switch to Image-Ready.

    I use CS3 with a Mac. Is there another keyboard shortcut? One listed above doesn’t work.

    Thanks!!
    Rob

  7. tutorials007

    28. Jan, 2008

    Hi Rob,
    try by going to File -> Jump To

  8. Doodee

    01. Feb, 2008

    Thanks for sharing

  9. rhyan

    11. May, 2008

    well thx alot … can i ask ??? how to save this that i can upload this to photobucket … cuz when i try to save it is PHOTOSHOP then when i save it to GIF it doesnt show any animations … pls help THX

  10. Bernard

    18. Jun, 2008

    great tutorial!

  11. Sheryl

    21. Aug, 2008

    I’m missing something between steps 8 and 9. Make a 11 more frames? It doesn’t spin. I’m using CS2.

  12. vijayakumar

    09. Feb, 2009

    Really super, thank you.

  13. Micman

    22. Jul, 2009

    simply superb :)
    thanks :)

  14. Adebanjo

    26. Jul, 2010

    What should it be saved as? and how about getting it to the website

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes