Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates (NEW)  |  Website templates  |  Privacy Policy  |  Link Exchange  |  Contact Us

Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!

Welcome To ProDesignHost.com Photoshop Tutorials Area - Animated Ad Banner

Author: Nathan Ng

We will be creating a standard sized banner, which is 468x60. So start a new document File->New, you can type in the width and height yourself, or you can select "468x60 Web Banner" from the "Preset Sizes" drop down options.

The first thing we want to do is create a 1px border around the banner.
- So Create a New Layer and name it "Border"
- Press CTRL+A to select all. Then go to Edit->Stroke. Apply the following Settings:
Width: 1px. Color: Black. Location: Center. Blending Mode: Normal. Opacity: 100%

This gives us a crisp 1px border around our banner. Now, every other layers we create through the tutorial will need to be placed beneath this border layer on the layers pallete, this is to make sure the border will always be visible.

Now, the design of the banner itself is really up to you, the important thing about this tutorial is the animation technique which I will show you later, but you can read on if you want to follow this tutorial and make a similar banner to mine.

I will be creating a banner to promote tutorialwiz.com, so i'll include its logo for branding purpose. So I open up my logo and copy and paste it into my banner, and resize it down to fit the banner. Now I use the eclipse shape tools and create a large round shape to right. This is where my promotion text will go. You will need to make it larger than the banner size so it has a nice curve in the middle.

Now I want to give it some color, so I apply some gradient to it, go to Layer->Layer Style->Gradient Overlay. I used the default settings, with the following colors:


I also applied some drop shadow and inner shadow using all the default settings, just change the opacity down to 20%

I used the rounded corner shape tool and created a shape underneath my logo for my tag line. Applied a gradient layer style with the following colors.

Then I applied a 2pixel white stroke to it. (Layer->Layer Style->Stroke)

I also added a grey to white gradient to the background layer so it doesnt look too flat.

Now theres my banner design (yes, its simple, but thats all we need really..). Now comes the fun part. Animation.

To make the tutorial simple, I will rotate only between 2 lines of text, you should then get a fairly good idea of what to do, then you can apply it to create more text rotations.

- Use the type tool, and create your first text (one that will appear in the first frame.

- Now hide the text layer . then use the text tool again, and type your 2nd line of text, in the same place as your first text.

Now you should have the following in your layers pallete:

and the banner look like this:

Now we are ready to animate it, lets switch to Image Ready. In photoshop, just click the "Switch to Imageready" button.

In imageready, you should see a pallete at the bottom that looks like this

Now click on the "New Frame" icon (indicated above), this will duplicate the selected frame and append it to the animation.

Now with the 2nd frame selected, select the visible text layer from your layers pallete and shift it up by 2 pixel (press UP arrow twice).

If you take a look at your first frame, and 2nd frame, they are slightly different.

Now duplicate the last frame, then use the DOWN arrow, and move the text layer down by about 10 px, and set the layer's opacity to 70%

Now duplicate the last frame, move the text layer down by about 15px, and set the layers opacity to 40%

Duplicate the LAST frame.

Now hide the current visible text layer, and make the other text layer visible, move the text layer down to about the same position as the other text layer was, and set its opacity to 40%

Then Duplicate the last frame.

Now use the UP arrow / or your mouse, and move this text layer UP by about 15px and set its opacity to 70%

Then duplicate the last frame.

Now move the text layer UP by about 10 px and set its opacity to 100%

Then duplicate the last frame.

Now move the text layer DOWN by about 2px.

Now repeat from STEP 8 above to make this layer go down and the other text layer go UP again.

If you done everything correctly, you should have around 14 frames.

At the bottom of each frames, you will see "0 sec.", this is the time delay between each frame.

We want to set ALL of these to "0.05" OR "0.1", any, depends on how fast you want it. Experiment :).

To set this to 0.05, click on the down arrow next to "0 sec", and choose "Other", then enter 0.05

 

At the bottom of the animation pallete, there is a control panel, with some buttons like one found on your DVD player, click > to play the animation.

As you can see here, the texts are cycling so fast we cant even read it. But there is 2 frames that we want it to stop at, and the animation will make it look like its sliding in and out.

Select Frame #1 and set it's delay to 2 seconds. Now find the other frame where the other text is in the position to read, (mine is at frame #8), and also set that to 2 seconds.

Now, look at our animation :)

I just want to point out that this tutorial was to show you how to create animated banner, the designs and style, you should come up with your own (better than mine of course). Remember NOT to over do it as animation can chew up alot of KB as you create more frames and more movements.

If you had any problems following this tutorial, CLICK HERE to download my PSD and see how I did it, and maybe change a few things to use for your site.

Author: Nathan Ng
Advertisements

Premium Partners

  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Website Design Tutorials - Web site design is an area that simply takes experience to perfect. Get started with these tutorials covering everything from page layout to content tips. At Webdesigntutorials.net you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website templates  |  Privacy Policy  |  Contact Us

All Right Reserved by ProDesignHost.com