5. Creating Banner

In this tutorial we going to learn how to create Banner using Photoshop CS2.

Open the Photoshop CS2, and click on (a)File ----> (b)New, when New box pops-up in the (c)Width: type in 800, then in (d)Height: type in 100, and make sure your settings are the same as mine in the picture below, then hit OK.

How you should see a ractangle window named (a)Untitled-1, you can zoon in and out using (b)Zoom Tool (Z), now click on the (c)Rectangular Marguee Tool (M), (this tool will be used if you want to select something, very important tool).
Next select (d)Paing Bucket Tool (G), (you can click & hold on it to see more selections in that category, but for now we will use Paint Bucket Tool.)

I'm going to use blue-ish theme for website, so to choose color click on (a)Color Picker, then Color Picker box pops-up, and in the (b)# box type in 008eea, and hit OK.

Now we going to add this color to our Swatches, so in the (a)Swatches tab click on (b)Create New Swatch button, and now this color should be added to our collection.

Now paint the Background color using Paint Bucket Tool with color that we created.
Now lets save the file, so click on File ----> Save as..., when box pops up save file on (a)Desktop or where ever you can find it, then in (b)File name: type in Banner, then in (c)Format: choose Photoshop (*.PSD;*.PDD), and hit Save.

Next go to the (a)Layers tab and click on (b)Create a new layer button, now you should have 2 layers which are: (c)Background and (d)Layer 1, next select the Layer 1 if not selected.

Then click on (a)Gradient Tool, its in the same selection as (a)Paint bucket tool,
next click on (b)Gradient picker and choose (c)Foreground to Transperant, next choose the (d)blue color in the color picker, and then in the (e)document, now named Banner.psd, hold Shift button on your keyboard, and click on the (f)bottom of the document and drag your mouse to the (g)top of document, (so basicly hold Shift then click & drag from bottom to top, practice till you get it, to undo the action hold Ctrl + Alt while hitting Z button all on your keyboard.)

Next click on (a)Horizontal Type Tool, then click in the (b)begining of the document and type in your website name, or (b)Example.com, select the text and choose the (c)text size 40 pt, and choose (d)white color, then in the text format choose (e)Impact,
(so if your done with text then click on Rectangular Tool, and if you want to edit it just double click in in the Layers menu.)

Next we going to save file as GIF, so click on File ---> Save as..., then in the (a)Format: opetion choose CompuServe GIF (*.GIF) and save it to the (b)images folder we created earlier in the our website_example foder, then hit Save.

Next go back to dreamweaver, then in the CSS Styles tab double click (a)#website_wrap #top_banner, when box pops-up in the Category choose (b)Background, then in the Background image: click on (c)Browse... and find the (d)Banner.gif file that we created, then hit OK.

Now you should have similar to what I have in picture below.

(There are more then two types of immage compressinos that used for website, like: .jpeg, .gif, and other, but we only going to use one in this website which is GIF. JPEG is mostly used for pictures and photographs, and GIF is used for simple things like Banners or Buttons. GIF only uses 256 colors which is more compressed then JPEG, and uses less memory.)

And thats the end of Creating Banner tutorial.
For next tutorial click here.

Building a Website Tutorials:

1. Setting up the website

2. Building layout #1

3. Building layout #2

4. Building layout #3

5. Creating Banner

6. Rollover Button