How to Design Web Pages Using Adobe Photoshop

Design a Web page using Photoshop.

If you have a copy of Photoshop, you can use it design your Web page and then add your content. This has the advantage of providing you with access to all the tools of Photoshop as you build your page.

Instructions

1. Decide what elements you would like on your page, such as the images or the position and appearance of the navigation buttons. Load images you will be using onto the computer.

2. Open Photoshop. Select "File" from the menu and click "Open." In the dialog that appears, change the "?" to "Web." From the size "Presets" below this, choose the Web page size you want, such as 1024x768 or 800x600 pixels. Change the "Background" to "Transparent." Click "OK."

3. Click on the "New Layer" button below the "Layers" palette. Select the "Pen" tool from the tools. Go to the options at the top and set the tool mode to "Fill." Choose the color you want for you banner.

4. Click to place a point where you want one corner of your banner. Then click three more times to create the other corners. Use the "Rulers" to make sure you get the positions right.

5. Repeat steps 3-4 to create all the other shapes you need, including the navigation buttons.

6. Select one of the layers with a navigation button graphic in it. Click on the "FX" button found at the bottom of the "Layers" palette. From the options, choose "Bevel and Emboss." In the dialog that appears, choose "Inner Bevel." Adjust the settings until you like the effect in the preview. Click "OK."

7. Right-click on the current layer. From the options, choose "Copy Layer Style." Right-click on each of the other button layers. From the options, choose "Paste Layer Style."

8. Select "File" from the menu and choose "Open." In the dialog that appears, locate one of the images you loaded and open it. Right-click on the layer and choose "Duplicate Layer" from the options that appear. In the dialog, make the Web page document the "Destination." Repeat this with all of the other images.

9. Go back to the Web page document and use the "Scale" function (found under "Edit") to resize the images to what you want for the page. Then use the "Move" tool to position them.

10. Select the "Type" tool from the tools. Choose the font size and color you want and type in all your text, including both the main text for the page as well as the text for the buttons and the banner.

11. Use the "Slice" tool to divide your design into sections. Then right click on each section and name it.

12. Select "File" and choose "Save for Web or Devices." In the dialog that appears, choose GIF as the file type and click "Save." Your Web page design will be saved as separate image sections you can now assemble in a Web page editor.

References

• Tutorial Bus: Website Layout Slice Adobe Photoshop Tutorial