Static Full Banner (using Fireworks)

In the last lesson, we have learned all the standard banner sizes. In this lesson, we will use Fireworks to create the most popular 468x60 banner known as the full horizontal banner.

For the purpose of this example, I will this static graphical banner for the site iGliss.com.

Although the concepts and techniques may be the same, you should use your creativity to create a banner that is unique for your site. If you don't have a site, try doing it for the site that we created in the Intro Web Design Series.

Step 1: I created a new document 468x60 with white background. Since this is an image for the screen, 72 pixel per inch is the standard setting.

Step 2: Draw rectangle with border

Step 3: Take color samples of the site as needed. I determined that althought the masthead is pure white, the main content area has a color of #EFEFEF.

Step 4: Add a gradient. Note that the middle color stops are the same color #EFEFEF as the color that I had sampled.

Step 5: I added in the logo. Resized to fit using the transform tool

Step 6: I added in the design element and resized to fit.

Step 7: I add in the text and apply a very little amount of anti-alias so its edge are not so jagged. These text are too small to apply any shadows or other fancy text effect on them.

Step 8: I added the text "RSS Feed". It is large enough. So I added a slight drop shadow to match that of the logo. But it is too small to add in the solid shadow.

Step 9: Because of the gradient, I exported this as JPG instead of GIF. I try to find a balance between the quality setting and the file size. A filesize of about 10K is about right. Just make sure it is not too large.

And here is our final 468x60 banner...

In the next lesson, we will create a half banner using Photoshop.

Note: iGliss banner, assets, and screen shots reprinted with permission from iGliss.com.