Navigation:    Home arrow Building a Website
Creating a Website With Adobe Photoshop and Macromedia Dreamweaver PDF  
Digg Reddit Ma.gnolia Stumble Upon Facebook Twitter Google Yahoo! MyWeb Furl" BlinkList Technorati Mixx Bookmark
Article Index
Creating a Website With Adobe Photoshop and Macromedia Dreamweaver
Page 2
Page 3


3. Modify the layout of the template created with Adobe Photoshop

Open .psd file in Adobe Photoshop adn activate the Layer window, choosing from the menu: Windows/Layers

PSD template

Move the mouse cursor over the text that you need to modify and press right click. A list will appear with objects located at that point. Choose from that list the text to modify. In that moment, in the Layer window will be selected the layer with that text.


Double click on "T" and then modify the text of the button. Usually those who create templates place a single text on all the buttons in the menu, so this text will have to be modified to create the menu of the page (in graphic mode).

4. Saving the layout (template) from graphic mode to HTML code + images

After modifying the .psd file until it looks like we want the final page to look, we will save the .psd file and then mark slices the way we want to cut it. After we do this outline, Adobe Photoshop will know how to cut the layout in small images. With these images it will generate a HTML file that contains the site assembled from images.

How to mark slices: we will use the helping rulers to mark the zones we want to cut. To do that, select from the menu View/Ruler

View Ruler

A ruler will appear at left and above the working area in Adobe Photoshop. Drag the mouse over this ruler and press left button, keep it pressed while draging with the mouse and mark the areas you want to cut.

To mark the slices to cut you use Slice Tool from vertical tool bar. Before selecting the slices to cut, activate viewing slices from the menu: View / Extras.

View Slices

To mark the slices: select from tools bar Slice Tool and mark the slices that you want to cut when Adobe Photoshop will generate the site using the layout.

Mark Slices

Once the selection done, next step is generating HTML code from the psd file.

In Adobe Photoshop pick from File / Save for Web. A window will appear and you will be able to choose which format the images will be generated in. You can choose jpg, gif and png.

With this, the part with Adobe Photoshop has end. Not completely, we still have to make shaded buttons for the menu when selected.