Things You'll Need:
- Computer Adobe Photoshop CS2 Adobe Dreamweaver software
-
Step 1
Create a new page in Photoshop by selecting Ctrl+N. Photoshop will ask what size the page should be. There is no exact science to what the size of any single web page should be. This depends on the size of the browser. Most browsers are at least 750 pixels wide and about 500 pixels in height. This is a safe size to start at. Creating a page much larger than this can make it difficult for all users to see the page the way you would like them to see it. All subsequent pages that will be created for the website should be the same size.
-
Step 2
Create a new layer by clicking on the "new layer" button on the "Layers" palette. Although the design can be created on the background page, a person has more flexibility and room for creativity if he designs the page on a new layer.
-
Step 3
Set a color to the page by selecting a color in the colors palette. When creating the background of a website with Photoshop CS2, it is best to make a background that is a soft, pleasant color. This can be done by creating a color and then decreasing the opacity of it in the gradient palette by entering a number in the opacity field. Set the opacity for around 35 or 40 percent.
-
Step 4
Remember to save by navigating to "File" and "Save as" in the tool bar. While it is good to save often, the page should at the very least be saved at this point before moving on to the next part of the project.
-
Step 1
Draw text boxes and image boxes on the page where you want to place elements. Text boxes and image boxes can be created by selecting the text box and image box tools from the toolbox on the left hand side of the page and then drawing the outlines of the boxes on the page. Some of the important elements that a website created with Photoshop CS2 should have include links to other pages. These links could read: About Us; Contact; News; Locations; Home. The links created depend on what the site is for. The important thing is that these links are located on the top or bottom of the page in a text box.
-
Step 2
Insert the page header. It is best to create a graphic header to the website earlier and save it as an image. In order to insert the header or banner, draw an image box almost all the way across the page just under the top of the page. Navigate in the toolbar to "Edit" and "Place Image" to put the banner into the box.
-
Step 3
Create additional boxes for other text and images by selecting the text box and image box tools from the toolbox on the left-hand side of the page. Remember to give the page some room to breathe. Do not put images or text right next to each other. Continue placing images and text until the page is complete.
-
Step 1
Begin creating the pages that the home page of the website will link to. Follow steps 1-4 to recreate each new page. The more pages a website has, the better the site will do with coming up higher in Internet searches. At the very least, create landing pages that will link to the About Us, Contact, News and Locations pages.
-
Step 2
Vary the look on additional pages, but only a bit. The way the the home page of the Website looks (steps 1-3 in section 2) will be different from the way the landing pages you create will look, although including the same colors and general feel is a good idea. The same elements do not need to be on each page. Remember good design principles by aligning the images and text on the page. Also, remember to not put too much content on one page. If you need to fit more content, simply create another page.
-
Step 3
Save the image and import it into Dreamweaver to make the links active. There is no way to make links active in Photoshop, however a person who owns the Adobe Creative Suite can easily upload the image to Dreamweaver and activate the links with Dreamweaver Image Maps. A free 30-day trial of Dreamweaver can also be downloaded.
