Building a Masthead
Every website needs a good masthead. What is a good masthead? Well... that's up to interpretation I suppose. In the most basic terms, it should (and will) represent you and your professional image. It should quickly tell a visitor to your web site who you are and what you do. It sets the tone for the rest of your site.With all that, a masthead doesn't have to be complicated. You may already have created a personal letterhead for use in official correspondence, which is a good place to start. It makes sense to match the masthead of your site to your letterhead (to your businesscard etc.) This way you present the same image to potential employers in every avenue of communication.
Let's walk walk through the process of making a masthead. In our case, our fictitious, young designer, Ima, already has a letterhead. She used one of the basic letterhead templates available in her copy of MS Word (which is never a good idea, but that's another issue). Here's her letterhead:
If you don't already have your photoshop template file open. Open it now.
Start by opening Photoshop. There are plenty of other programs that you could use but Photoshop is far and away the most common. Create a new document (File... New). Name it "masthead" and set the width to 600px and the height to 150px. This size isn't required but it's a good start; you can always change it later if you decide to. Set the resolution to 72 pixels/inch. Finally set the color mode to RGB.
Begin by filling the background with whatever color you've chosen to use as the background of your web page. Do this by setting the foreground color in the tool pallet to your chosen color then click on the paint bucket tool. The paint bucket may be hidden under the gradient tool. If that's the case, just click and hold on it and a flyout menu will appear allowing you to select the paint bucket. Of course you could also just type the letter "G" to select it. That would be easier. With the paint bucket click anywhere in your image to fill it with your color.
Now let's add your name to the image. Click on the Text tool (or press "T" to select it). Before typing, we should select the font face and color your want. Across the top of your screen you should see what Photoshop refers to as the "options" window. It will have drop down menus for font face, style and size as well as other options affecting the text. If you don't see it, go up to the Window menu and choose "Options". In this options window, choose the font you'd like to use and any other options you might like. As always, there's no pressure. If you end up not liking your choices, Photoshop will allow you to edit it later. Don't forget to select the text color. The color selector should be located just to the right of the alignment tools. If you've been following along with this tutorial, it should currently be the color you chose for your background color because it defaults to the current foreground color. To change it just click the color box and select a new color.
Now that you've set your options, click your image in the approximate location you'd like to see your name. Don't worry about getting it exactly right; you can move it later. Where you clicked you should see a text insertion cursor. Type your name. More than likely, the size is wrong but I wouldn't worry about that now (unless it's illegible) We can change it later after we get the other text typed in. If you absolutely must change it, you can do so by highlighting the text, just as you would in a word processor and going back up to the Options window and choosing a new size from that menu. BTW: you aren't stuck with only the listed sizes; you can type your desired size into the box.
The next thing we want to do is add another line of text describing your profession. You do this using the same method used above to type your name. This is a good opportunity to add an accent color. Ima is using the purple color she chose for her address in the letterhead. Here is the result.
Not bad but kind of plain. Let's add a graphic element to jazz it up. Ima's letterhead already has a graphic element in it (the three boxes) so she's decided to use that but you may use whatever you choose. Adding a simple shape is very easy in Photoshop. First select the "Shape" tool in the tool window. In my version of Photoshop it's located directly under the Text tool. There are many types of shapes to choose from. To see them, click and hold the shape tool icon. A flyout window will appear. Ima needs the rectangle tool to create her squares.
Next, we should create a new layer on which we'll draw these rectangles. It's always a good idea to separate the different elements of your image onto separate layers. Putting them on their own layer will allow you to move and edit just these elements later. To create a new layer, go up to the Layer menu and select "New... Layer" from the drop down menu.
Now back to the shape. When you selected the Shape tool, the Options tool at the top of the screen changed to give you those option affecting just the shape. We'll want to check one option before drawing. On the left side of the Options window are a series of three buttons called "Shape Layers," "Paths" and "Fill Pixels." Choose "Fill Pixels." Change the color if you wish and draw your shape. Here is Ima's result.
Looking Good! You could finish right here and be perfectly happy but Ima isn't done. She has a favorite rendering that she'd like to add to her masthead. If you have a rendering or photo or piece of clip art that you'd like to add, follow these steps.
Open the image you want to add in Photoshop. Don't close the other image; we want them both open. Select the Move tool (or type "V" to activate it) then click on the image and drag it from it's window to your masthead image. Adjust the size by going to your Edit menu and selecting "Transform... Scale" then drag on the handles around your image to change it's size (HINT: Hold the shift key to scale both height and width at the same time). If you're like Ima, your image may look something like this right now.
Ima has a problem. The image we just inserted is covering up part of the text. That's because when you dragged the image into your masthead it created a new layer on top of the current layer. To correct this, we need to move it below the other layers so they show up on top of it. 
Look at your "Layers" window. The current layer (your inserted image) should be highlighted at the top of the list. To move it, just click on the highlighted layer and drag it down to just above the background, putting the text and shape layers above it. Now when you look at your masthead the text should be readable above the image you inserted.
The last thing Ima wants to do is add a little drop shadow to the elements of her image to make them pop off the page. You may want to also. Here's how we do that.
Still looking at the layers window, notice the row of buttons across the bottom. the left-most button, looking like the letter "F" in a black circle, is the "Layers Style" button. When you click it, up pops a menu of styles to choose from. At the top of that list is "Drop Shadow." When you select that, a dialog box opens allowing you to preview and change the parameters of the drop shadow. Take a few moments to find a setting you like then click "OK" If you want to add drop shadows or other styles to the other layers, click the layer name to highlight it and again select the Layers Styles Button.
That's about it, Take a few more moments to tweak the positioning and size of the various elements and you're done. The last step is to save your work. Firstly, go up to File... Save. Save the Photoshop File (.psd) and put it somewhere safe. This is the file you'll go back to if you need or want to change it later. Now to get the version needed for the website go back up to the File menu and select "Save As..." Change the format to ".jpg" and click save. The jpeg format squashes all the layers together so you won't be able to edit them separately. Web browsers can't deal with the Photoshop format. Here is the image Ima came up with. Your's no doubt looks very different but in any case I'm sure it great! Good Job!
