How to Build a Web Page in Adobe Photoshop
Adobe Photoshop is one of the most widely used and powerful raster-based graphics programs available to both professionals and consumers. Although it is most often used for editing photos and other images, it has a wide variety of other uses. One type of project Photoshop is often used for is designing Web page layouts. The advantage to using Photoshop for this purpose is that the user has access to the many tools, functions and other options available within the program. Using Photoshop, even a novice Web page designer can quickly produce a professional-looking Web page.
Other People Are Reading
Instructions
-
-
1
Load any images, photos, drawings or logos that you would like to include on your Web page onto your computer. Do this either by copying the image from the camera, CD or other digital source, or using a scanner.
-
2
Open Photoshop. Choose "New" from the "File" menu. In the dialog that appears, enter the height and width that you want for the Web page. Either enter these numbers directly or choose from the preset drop-down menu. Leave the resolution at "72." Name the document "Web page one" and click "OK."
-
-
3
Select the "Rectangular Marquee" tool and use it to make a selection on the canvas where you wish to have your banner. Use the "paint bucket" tool to fill the banner selection with the color you want for its background. Continue using the "Rectangular Marquee" tool to create all the shapes you want for your Web page, such as buttons or dividers.
-
4
Select "Open" from the "File" menu. In the dialog that appears, locate the images that you want to use. Open them all. In each open photo document, right-click on the layer in the "Layers" palette. From the options, choose "duplicate layer." In the dialog box, choose the "Web page one" document as the "Destination." Repeat this process to bring all the images you want to use into the Web page document.
-
5
Go back to the "Web page one" document. Select "Edit" from the menu and choose "Transform." From the options, choose "Scale." Use the tool to re-size each image, and position it where you want it on the page.
-
6
Select the "Type" tool palette. In the options at the top, choose the font style, size and color that you want for your text. Type in your introductory text for the page. Then type in all the other text you need for the page, such as banner text or text for navigation buttons.
-
7
Select the "Slice" tool from the tool palette. Use the tool to cut the page into slices. The slices should reflect the elements of the page. For example, create a tight slice around the banner.
-
8
Select "File" from the menu and choose "Save for Web or Devices." In the dialog box that appears, choose GIF as the file type and click "Save." In the dialogue, name your file and save it. Photoshop will save your image slices as well as an HTML Web page that you can then load onto your host.
-
1
References
- Photo Credit www symbol drop. image by Ruslana Stovner from Fotolia.com
