6. Creating a Rollover Buttons in Photoshop CS2:

In this tutorial we going to create two different buttons and turn them into rollover button.

Next go to Photoshop and create new document, so click on File ---> New..., when box pops-up in the Width: type in 130, in Height: type in 30, and hit OK.
Next click on Paint Bucket Tool, then in color picker choose light blue like last time we used for background filling, or type in 008eea in the # box, and paint the background.

Next (a)Create a new layer in the Layers tab, then click on Gradient Tool, and choose dark blue color in Color Picker, then select (b)Layer 1 and hold Shift then (c)click and drag from bottom to top just like we did for Banner.step6

Next in the Layers tab click on (d)Create a new layer and click on (e)Layer 2 then hold Shift then (f)click and drag from top to bottom, now you should have similar to what I have in the picture below.

Next in the Layers tab click on Create a new layer and click on Layer 3, then in the (a)creation menue click on (b)Pencil Tool in the, then choose light blue in the color picker or type in 86cfff in the # box, then draw a (c)horizontal line on the top 1 pixel thik, next in the Layers tab click on Create a new layer and click on Layer 4, then in color picket choose dark blue or type in 0b0bc1 in the # box, then draw a (d)vertical line on the left 1 pixel thik, next click on (e)Harizontal Type Tool or T button, then click in the begining of the button document and type in (f)Home, then in the Size choose (g)12 pt, then in color choose (h)white, then in Format choose (i)Arial, then click on (j)Rectangular Tool, then hold down the Ctrl (located on the bottom left on your keyboard) while clicking on Home text and drag it to where ever u like it, or center it like I did.Now you should have similar to what I have in the picture below.

Next save the file as button in psd format, so File ---> Save as..., when box pops-up in the Format: choose Photoshop (*.PSD,*.PDD) and save it to Desktop or where ever u can find it, then hit save. Next in the Layers tab unselect (a)Layer 2, and save file as button in GIF format, so click on File ----> Save as..., when box pops-up in the File name: type in button, then in Format: choose CompuServe GIF (*.GIF), and save file in the images folder that is located in the website_example folder, then hit Save. (during the save couple boxes pops up, just keep clicking Ok on each)

Next turn the (a)Layer 2 back on, then turn off (b)Layer 1, and save file as button_rollover in GIF format, so click on File ----> Save as..., when box pops-up in the Format: choose CompuServe GIF (*.GIF), and save file in the images folder that is located in the website_example folder, then hit Save.

Next go back to Dreamweaver, and create rollover button, so click in (a)Navigation div tag and delete text "Home", then click on (b)Images : Rollover Image button,

when Insert Rollover Image box pops-up in theOriginal image: click on (a)Browse... and choose button.gif image from the images folder in our website_example, then in Rollover image: in the (b)Browse... choose button_rollover.gif image in the images folder inside website_example folder, then click OK.

Next repeat the same steps for Home2 and Home3, so now you should have 3 rollover buttons similar to what I have in the picture below.

Next go back to Photoshop and creat background image for Home4 Div tag, in the Width: type in 410 and in Height: type in 30 and hit OK. Next reapeat the same steps as we did for creating button, and save the file as Home4.psd first on the desktop then save it Home4.gif to images folder located in the website_example folder, so yours should look similar to mine in the picture below.

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

Now your website should look similar to mine in the picture below.

Next create a Footer (footer is the very bottom part) following exact steps from Banner, using this dimentions: Width: 800, Height 70, after that is done your website should look similar to mine in the picture below.

And thats the end of Rollover Buttons tutorial.
Now we completed the basic website layout, now the rest is up to you to put in the content of your choice.