Tutorials 007

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.

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

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

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

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.

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

7. OK. Let’s add some text and some icons to our banner.
First download our “Icons24×24set” 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.

Place your layers like on picture:

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:

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

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.

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.

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.