Saving and exporting your navigation in Adobe Photoshop

Visit my website The MaStudios.

We need to create, save and export images of your navigation so that they may be used in Dreamweaver. This will be done to set the rollover images.

First, go to Save for web and devices from the File menu. Then click Save on the popup menu. Rename the file as index.htm, index is what most hosting servers will look for as the home page, thus will display this page first. Change the Save as type to HTML and Images, Settings to Default and Slices to All Slices. Save. Now you have the HTML file we will manipulate with Dreamweaver and the up state of the images and navigation.

Secondly, we need to do the same thing but for the down state of the images and navigation. If you do not want your navigation to change color upon hovering of the cursor, you do not need to do this step. For learning purposes, I recommend doing this.

Highlight your navigation HOME | PORTFOLIO | CONTACT, then change the color to any color you want. Repeat the save for web and devices and export process as before, change the name to indexhover instead. Save this is a separate folder labeled as hover inside the original folder. *It is important to not save over the psd file, so when exiting later do not save* Save for web and devices is ok, and Save is bad.

And thats it for the Photoshop portion of the tutorial. Your ready to move on to the Dreamweaver portion. Continue to the Dreamweaver Portion Portal, or return back to the Photoshop Main Portal.