Photoshop 3 - Creating a Header

In this exercise, you'll create combine photos, text and a background color to create a "custom header" that you can use for your blog or a web page.

a) To get started, create a folder on your computer desktop. Name it "yourname_header."
b) Next, you'll need 2-3 photos that will go well together (you can use your own pics, the ones I've provided, or some non-copyrighted images that you've downloaded from the web). Put your images in your folder. Then open Photoshop.

To set up your header, first go to "File" on the menu bar and click on "New" to bring up the dialog box.

Make your header 468 x 80 pixels. This is a basic online ad size. (A wider ad size -- "leaderboard" size -- is 728 x 90 pixels. (Or figure out the width of your blog and use that as width.)

This header is 468 x 80 pixels. I've tugged the margins out at the bottom right corner "handle" so I can see the header's edges.

Go to "File" in the menu bar, and click on "open"

Open up your photos in Photoshop.

Crop your photo as needed and resize it to fit your header -- that is, make them 80 pixels high (or whatever height you've selected) to fit your header. (Refer to previous Photoshop handouts for specifics on cropping and resizing photos.)

Now that you've selected your photos, go to the color palette to pick a compatible background color for your header.

Select the gradient tool. Draw a line across your header box, either horizontally or vertically, to create a gradient of your selected colors. If you don't like the effect, use the keystroke Apple-Z (Control-Z on PCs) to undo it, and try again.

By creating a new layer for each of your photos (and for your text, when you add that), you can tweak your photos (and text) without messing up your background.

Notice the little "eye" on the left side of each layer. That tells you the layer is active.

Click off the "eye" beside the background layer so you don't disturb it while you're adding other elements to your header. You'll see a gray-and-white checkboard pattern in your header box when you click off the background layer (see 7c below).

With this tool, you can select your photo, copy it, and paste it into your header box.

Once you've selected your photo, use the keystroke Apple-C (on PCs, use Control-C) to copy it. (Or go to "Edit" in the menu bar and scroll down to the "Copy" command). Then, still using the rectangular marquee tool, draw a similar size box in your header box where you want the photo to go. Paste your copied photo into this box.

You can use the "Move" tool, located at the very top of the tool bar, to adjust the position of your photo in the header. (Note the checkboard background, which indicates the background layer is currently turned off.)

Turn the background layer back on so you can see what you need to blend. First use the Eraser tool to soften the hard edges of your photo, then use the Smudge tool to blend the colors of your photo into the background color of your header.

Add a new layer for your text, then click on the Text tool to add some text to your header.

Your text may be tiny. Highlight it and then use the Character palette to resize it, change the font, color, etc.

In addition to the Character palette, you can use the FX button at the bottom of the Layers palette to add special effects -- such as drop shadows, highlights and embossing -- to your text.

When you've got it looking the way you want it, save your header as a PSD file. This saves the original image (and all of its layers) at high resolution. Then, if you later decide you want to change something, you can go back in, edit it and save it again...without losing image quality. (This is in contrast to JPGs files, which lose quality every time you edit and resave them.)

Save it as a TIFF, GIF or JPG file. (If you want to upload this header to your blog, remember that blogs like JPGs, but not TIFFs.) In this saved version, the layers are merged and it's ready for you to upload to the web. You can crop or resize this image, but you can't access the layers to re-edit them. You'll have to open the PSD version to do that.

Yeah, it's corny...but what can I say...I like taking photos of bees and blooms!