Things You'll Need:
- Computer Logo or main graphic Adobe Photoshop HTML editor like Adobe Dreamweaver
-
Step 1
Use Photoshop to open the logo or image that you want to use as the main graphic on your Web page.
-
Step 2
Decide on a color scheme for your Web page, using your image as a guide. On the tool panel, select the eyedropper tool. Bring the eyedropper over one color on your image. Click and the tool will take a sample of the color you just selected. You will be able to see specific information, such as the RGB number, of the color in the "Color" panel. Take note of the specific RGB number of each color that you sample. Continue using the eyedropper tool to sample the various colors on your image. After you have sampled several colors, select at least three colors that you would like to use as the coloring scheme for your Web page. The colors should contrast one another and be light, medium and dark.
-
Step 3
Go to "File" in Photoshop's main navigational menu. Select "New ..." and create a new document with a width of 600 pixels and a height of 300 pixels. This will be the main banner and navigational header for your Web page.
-
Step 4
Decide on the font for your page. Think about the idea you want to convey. Go to the Tool panel and select the "Text" button. Drag your mouse to create a rectangle on your new document. Type in the text of your Web header. Highlight the text you just wrote and then go to the text options at the top of Photoshop. Try out different font types and sizes, and experiment with text color and alignment until you are satisfied. Use the "Move" tool in the Tool panel to move your header text to where you want it on the document.
-
Step 5
Create a background for your new banner by using one of the colors from your predetermined color scheme. Go to the Layers window, and select the "Fill or Adjustment Layer" button on the bottom. Click "Solid Color" and enter the RGB information you took down about the color you want to use. The layer will now cover the text you wrote in the previous step. In the Layers panel, drag the "Solid Color" layer you just created so that it is beneath the "Text" layer. The color should now be in the background.
-
Step 6
Make sure that the "Text" file is selected in the Layers panel. Then select your logo or graphic file so that it comes to the forefront. On the tools panel, click the move tool, which should be at the very top. Drag your logo image onto your new Web page document. A new layer should immediately be created on your document with your logo. With your logo layer selected, click the "fx" button on the Layers panel. Click "Blending Options ... " and try out Photoshop's variety of blending tools to help your logo seamlessly match the background color.
-
Step 7
Go to "Layer" in the top navigational menu and select "New Layer." Go to the tool panel and select the text tool. Drag your mouse over the area where you would like to create navigational links for your Web page. Add the text for your navigation using a smaller size of the font you used earlier to create the header.
-
Step 8
Go to "File" and click "Save for Web." On the top drop-down menu, select what format you want to save the file (.jpg, .png or .gif). Photoshop will save and optimize your banner for the Web.
-
Step 9
Open your HTML editor and create a new HTML document that has a table with five rows and one column. Insert your banner into the first row. Create an image map for each of your navigational words and add the link destination. The remaining four rows can be filled with your Web page text.
