Vantage21st
How to Create A Composite Web Page Header Image
This guide will describe how to create a basic web page header image using Adobe PhotoShop.

First, determine the width and height of your header image in pixels. This decision, particularly the width parameter will be determined by the width you have chosen for your web site pages. The width of your web page layout is determined by the width of a 15" monitor screen set at 800 x 600 screen resolution. This is the current design standard.

This design standard may change in time if a 17" monitor is perceived to be the "average" size currently in use. It is almost impossible to please all of the people all of the time. There are laptop users with small screens, there are millions of workhorse 14 inch monitors in use in the business world, and on the other side of the 15" fence, there are growing numbers of monitors that are 17", 19" and larger.

This means that your web pages are best designed if they are less than 800 pixels in width. In theory, page widths greater than 750 pixels will cause the user to have to scroll left and right to fully view your page. In practice, it is best to keep your web pages to 750 pixels or less in width.

Units Set Up
  1. Open PhotoShop
  2. Select Edit > Preferences > Unites & Rulers
  3. In the "Units" area, set "Rulers" to "Pixels" and click on "OK"

How to Set Up a New Canvass
In the "New" dialog box, enter these settings. These are arranged from top to bottom as they appear in the "New" dialog box. For your practice header, you will use the settings below.

  1. Select File > New
  2. The New dialogue box will open. Enter the following settings or make the indicated selection.
  3. Name: Header
  4. Width: 750 - pixels
  5. Height: 130 - pixels
  6. Resolution 72 - pixels/inch
  7. Color Mode: RGB Color - 8 Bit
  8. Contents: Transparent
  9. Refer to the figure below to see these settings.




  10. Click on: OK
  11. The new canvass will open and be 750 x 130 pixels
  12. You will see your new working canvass displayed in the Photoshop program window. Adjust the window so you can see the full width and height of the canvass at 100%.
  13. Determine if the view is at 100% by looking at the lower left corner of the Photoshop program window. If the number is not 100%, please do one of the following.
  14. To zoom up from a number less than 100% select View > Zoom In until you see 100% in the lower left corner. (keyboard command: Ctrl plus the + key)
  15. To zoom down from a number that is greater than 100% select View > Zoom Out until you see 100% in the lower left corner. (Keyboard command: Ctrl plus the minus key)
Select a Header Logo Background Color
Locate the Set Foreground and Set Background color squares at the bottom of the Photoshop tool palette. In the image below the mouse arrow points to these two squares. In this view the black has been selected for the Foreground "color" and white has been set for the Background color. The color in the foreground or upper position is the active color applied by tools like the paint bucket, pencil and air brush tools.

  1. Activate the Swatches palette by one of the two methods below



  2. Select - Window > Swatches or click on the Swatches tab of the Color palette if it is already visible on your screen.
  3. Move your cursor over the Swatches palette. It will turn into an eyedropper. This is the color picker tool.



  4. Move the eyedropper tool over a medium green swatch. Click once to select that color.
  5. The green color will now display in the upper Set Foreground color square on the Tools Palette


    .
  6. Click on the double headed arrow between the two squares to send the background color square to the foreground position.



  7. Using the swatches eyedropper tool, select the color yellow. The Set Foreground square on the tool palette will now be yellow.

     

  8. Click on the double headed arrow adjacent to the Foreground/Background swatches to send the yellow color to the background position. Green will now go to the foreground position.

How to Locate and Activate The Paint Bucket Tool

Select the "Paint Bucket" tool from the tools palette.

On older versions of Photoshop the Paint bucket tool will be visible on the tool palette by default.

On newer versions, you may or may not see it. If you do not see it, it is located as a sub palette of the "Gradient Tool" icon.

Locate the Gradient Tool and click on it keeping the clicker depressed.

 

A secondary menu will pop out. Select the paint bucket tool.

 

Click on the Paint Bucket Tool to select it.

How To Prepare Images for Inclusion in Your Header Graphic
This is a process overview. For a detailed description of how to perform the operations described below please refer to my Vantage21st Photoshop guides used in the first term Saturday class.

  1. Open the image you wish to use as part of your header graphic.
  2. Crop the image
  3. Make your color corrections by adjusting levels, hue saturation or other tools to get the image looking like you want it to.
  4. If necessary reduce the image resolution to 72 ppi. To do this select Image > Image Size from the Photoshop Image menu.
  5. Next reduce the height of the image to the same height as your intended header graphic. In this tutorial the height will be 130 pixels. The width will adjust itself.
  6. After reducing the image to your target size check to see if it needs to be brightened up a bit. If so open Image > Adjustments > Levels and boost the mid tones and if necessary the highlights.
  7. Save your work. You now have a small image ready to be copied and pasted into one or more layers of your composite header image described below.
Layers set up
What are layers? layers are like individual clear acetate sheets that you can draw on and place one on top of the other to create composite images. If you need to fix something in one layer, the fix will not effect any other layer. Look at layers like a stack of acetate sheets. You can reshuffle the stacking order by moving a layer that may be on top of another layer to a position below that layer, or, you can move a lower layer further up the stack. Layers allow you to be very creative.

Use the image you created above.

When you created your new Photoshop document a background layer was automatically created. This is labeled the background layer on the layers palette.

  1. Locate the Layers floating palette.
  2. If you do not see a layers floating palette, select Window > Show Layers.

Note that there is one "Background" layer shown by default. This is the transparent layer you just created. It is best to leave this layer alone and create a new layer to "dump" the background color (paint) into.

To create a new layer do this

  1. Select Layer > New > Layer or click on the new layer icon as shown in the figure above at the bottom of the layers palette.
  2. The New Layer dialog box will open.
  3. Name the layer "background color " and leave the other settings as they are.
  4. Click on OK
  5. Look at the layers palette and make sure the background layer is selected. It will be highlighted if it is selected. This means it is the active layer. It will be the layer you will dump the background color into using the paint bucket tool.



  6. Move the cursor up onto your new canvass. Note that the cursor becomes the paint bucket icon.
  7. With the Paint bucket icon over the transparent area of the canvass, click one time to "dump" the desired background color into the background color layer.
  8. File > Save your work

How to Add Your a Small Image to a Header Graphic

  1. This process assumes you have previously prepared a small image to the dimensions needed to be incorporated into your header image.
  2. Open your small header image
  3. Select: Select > All as shown below.



  4. You will now see a dotted line or "marching ants" surrounding your little image.
  5. Select Edit > Copy This will copy the image to the computer's virtual clipboard.
  6. Select Layer > New > Layer or click on the new layer icon at the bottom of the layers palette..
  7. Give the layer a name. You may need to double click on the layer on the layers palette after it is created to name it.
  8. Make sure the layer is selected. It will be highlighted it it is selected as the active working layer.
  9. Select Edit > Paste and paste the small image into the new and empty layer. You will now see the image as part of your working composite image.
  10. To move the image around on the Tool palette select the Move tool and place the move cursor on the small photo in the working image and move it around to the location you want it to be in.



  11. To add a second image to your header graphic duplicate the process described in this section using another small image.

How to Add Text to Your Photoshop Image

These instructions apply to Photoshop version 6.0 and newer.

For demonstration purposes Yellow will be the color of the text for the header logo image. Remember, the color that is in the foreground color square position is the active color and will determine the text color.

  1. On the tool palette, click on the double headed arrows to send the yellow background square to the foreground position.



  2. When you create text in a PSD file (PhotoShop format), a new layer will automatically be created for the text. You do not need to create a new layer first.
  3. On the Tool Palette click on the Type Tool to select it. It's the icon with the big capital "T" on it.


  4. On the Type Tool Options tool bar across the top of the photoshop window, set the following values.

    Font: Verdana
    Style: Regular
    Size: 48
    Anti-Alias: Crisp or Smooth, experiment to see what looks best. Smooth works well with Verdana.



  5. Move the cursor to a position on the image near where you want the word, or line of text to begin.
  6. Click one time to get the Type Tool cursor blinking on the image.
  7. If the cursor is not blinking in the text entry area, click to get it blinking.
  8. Type the business name "City Market"
  9. On the Tool Palette, select the Move Tool.



  10. Place the move tool cursor on the phrase City Market.
  11. Click and drag the text to position it towards the left side of the green background.
  12. File > Save For Web and Save the image as a GIF.
  13. After saving for the web, the File Save For Web window will close. When you go to close the original layers file, you will be asked if you want to save changes, select Yes. This does not save the layers image as a GIF. It saves any changes you did not previously save in the layers version of the file.
  14. Please be sure to save your image with layers intact. This will be your master copy. This way, if you need to come back later and change a layer, you can, without having to create the entire image and all its layers all over again.

BACK TO THE INDEX

Updated February 2006
Copyright 2002 - 2006 John Sedgwick
All rights reserved