|
Written by Rawpulse
|
|
Thursday, 16 February 2006 |
|
Learn how to make a cool banner in Flash
You see them all over the internet. Banners are everywhere. We're going to look at making a professional banner in Flash. It could be used on your website, if you have one, or you could have it put on other sites to get more visitors to yours. In any case, banners don't have to look boring. In this initial lesson, we won't animate it, that will be in a later lesson. Today we're going to design the banner so it will look something like the banner beneath, by the time we've finished:
The banner has a linear silver effect and a darker section in the middle where the text fits. So lets begin creating the banner/header. Open Flash. Change the size of the stage to around 480x80. Use the rectangle tool to draw a rectangle on the stage, filling most of the space. It's good to leave a few pixels of white space around the edge, although not necessary. Once you have drawn your rectangle, you should have something looking like this:
Now we need to add the metal linear effect. Select your rectangle using the selection tool. Locate the "color" window, which should be on the right hand side of the screen. From the "Type:" drop down box, select "Linear". Now you will need to change the linear colors to match the following:
Once you have matched the line at the bottom to the colors I used, it's time to move the linear fill. At the moment, your linear gradient won't look too impressive, because it's sideways, as seen beneath:
So we need to rectify this. Select the Gradient Transform Tool, which is next to the Free Transform Tool. Now click on your rectangle. You wll notice that you get some handles to drag and pull around. Select the rotating handle, which is pictured below:
Click on the circle which will be at the top right of your rectangle, and rotate it by dragging it down to the bottom. Once you have done, the circle should be at the bottom right. Now, you will also see a small square with an arrow pointing to the right. This will be located in the middle, along the line at the bottom, and looks like this:
This is used for changing the size of the linear gradient. Again, drag the box upwards. As you do this, the top part will decrease in size too. Eventually, release the box when it looks similar to this:
One final adjustment is required. Grab the small circle located in the middle. This is used for moving the gradient around the screen. Drag it down just a few pixels so the darker part of the linear effect is revealed more. Once you have completed this, you should have something similar to my rectangle, shown below.
Now if you scroll back up to the top, you will see that we have completed the linear effect that we saw on the example. Now we need to add the text.
To make it look more professional, the text isn't simply added on top of the linear effect. It is given its own area which makes it look embedded into the metal. So lets do this. First, create a new layer. You can rename the layers if you want, but it's not all that important in this situation, as we only need a few layers. Use the rectangle tool again, and set the stroke to white, and the fill to black, like so:
 l
The white stroke gives the impression that it's attached to the metal. Now draw a rectangle, just large enough to fit your text in. If you don't know how much room your text will take, it doesn't matter, you can change the size once you have entered your text. At this stage, your project should bear a similarity to this:
Now, on a third layer, enter your text using the text tool. Adjust the size and font accordingly, using the properties window. Now we have completed the first part of this banner tutorial. The second part will look at animating the banner. If you have had a problem when following this tutorial, please post your concern on the KnowFlash forum, and I will help you out. Check out the final example again:
|
Tutorials 
