How to Design a Web Page in Photoshop
The typical Webpage is composed of various elements, each of which in itself is fairly simple to create. Often, these elements are created in graphics programs separately, and then brought together for the first time in a Webpage-editing program such as Dreamweaver or Expression Web. However, if you have a copy of Adobe Photoshop, you can design your Webpage directly in Photoshop, creating each element exactly where you want it from the start. This also has the added advantage of letting you use the many graphics functions and tools of Photoshop while creating your page.
Other People Are Reading
Instructions
-
-
1
Save any images or graphics that you want to use for your Webpage (such as a logo) on your computer's hard drive, either by copying them from a camera or other digital media. Alternatively, you can use a scanner to scan printed versions of your images.
-
2
Open Photoshop. Select “File” from the menu and choose “New.” In the dialog box that now appears, click on “Presets.” From the options, choose “Web.” Then click on “Size” and from the options menu choose the size you want for your page, such as1024 x 768 or 800 x 600. Name the document “YourName Webpage.” Click “OK.” Click on the “New Layer” button under the “Layers” palette.
-
-
3
Select the “Rectangular Shape” tool from the tool palette. Go to the tool options that appear at the top, set the mode to “Shape Layer” and choose the color that you would like as the background for your Web page banner. Now draw the banner shape onto the canvas. Click on the “New Layer” button again.
-
4
Repeat step three to create the other basic shapes you need on your Web page, such as dividers or navigation buttons. Use the same color that you used for your banner background to create an overall color theme for your Web page.
-
5
Select “File” from the menu and choose “Open.” In the dialog that now appears, go to the location where you saved your images in Step 1, and open the first image you want to use.
-
6
Go to the “Layers” palette on the left side of the screen, hold down the “CTRL” button on your keyboard and click on the preview image next to the layer. Select “Edit” from the menu and choose “Copy.”
-
7
Go back to the “YourName Webpage” document. Select “Edit” from the menu and choose “Paste.” Use the “Move” tool and the “Scale” function found under “Edit” to position the image where you want it on the Web page.
-
8
Repeat steps 5 through 7 to import all the images you want to use for your Web page.
-
9
Select the “Type” tool from the tool palette. The “Type” tool options will appear. Choose the font type and color that you want for your banner. Then type in the text over the banner. Repeat this step adding all the text you need for the elements of your page.
-
10
Select the “Slice” tool from the tool palette. Use the tool to create a slice around the banner and all the buttons. Right click on each slice and choose “Properties.” In the dialog, name each slice. Select “File” from the menu and choose “Save for Web or Devices.” In the dialog, choose GIF as the file type and click “Save.” Photoshop will save a folder containing the sliced images and an HTML file you can load onto your Website.
-
1
References
- Photo Credit www image by .shock from Fotolia.com
