Header Graphic - A Tutorial
When learning new software it is often helpful to have a basic tutorial. Tuts are also great when you want to see how something is done. We're learning Photoshop and want to see how a header graphic or title bar can be made. Our goal is the following title bar.
1) Before we leap forward to the end when we don't know how to begin, let's remind ourselves where we usually start - with an image. I got the following bicycle image from Freefoto.com, a decent source for non-copyrighted images. Grab this bicyle image by right-clicking on it, and choosing "save as", "save target as", or something like that. Save it to the desktop for now.
2) Open Photoshop and let it get settled. Then select File-Open. Browse to the Desktop and double-click the bike image. It's called "intro_bike.jpg".
3) Right-click in the top area of the jpg, and select "Duplicate". Now we have two bikes, intro_bike and intro_bike copy. Let's play with the copy.
3) Create a new file by selecting File-New. This will become our header graphic. When the options box comes up, make it 700px wide and 100px high, with transparent background and RGB. (Make sure it isn't 700 inches wide, or things will get ugly real fast.) Good.
4) Now we have three different images open in Photoshop: our intro_bike, intro_bike copy, and a short and wide checker-board image called Untitled-1, or something. With me so far? Close the original bike so you don't get confused.
5) Let's pick a nice background color for our header graphic that works with our bike image. We're only going to grab the bicycle, right? If we look, we find that dark tan wall color is very prominent and that's not a bad background color for an exercise. We'll use it for now. We need our color picker tool. 
6) Get that cursor over to the eyedropper, and click it. Now we head all the way back over to intro_bike copy. Put the eyedropper over that wall color and click. We should see the foreground color in our foreground/backgound area of the toolbox change to the wall color. 
(Didn't get just the color you want? Try it again until you're happy, or until 2 minutes have elapsed.) Next step, please.
7) Our goal now is to pour our background color over the blank header graphic (Untitled-1). But let's take a time out to learn about layers. First, highlight the header graphic by clicking with the mouse. If we created it correctly, it looks like a grey/white checkerboard because the background is transparent and the base layer is empty. Let's add a new layer to that file and pour our background color into the new layer. Look to the right in Photoshop. You'll see a column full of boxes that do a bunch of
stuff you don't know about - yet. At the bottom of that column is a really cool box that contains your layers, enables you to quickly add filters, and to do lots of neat visual stuff that I only dream about understanding. But I understand layers, and you will too in a few minutes. Think in three dimensions for a minute. Photoshop lets us put visual elements on top of, under, or next to each other. Layers control the "on top of" and "under" relationships beween our elements. Wha? Think 3-D, and you'll catch on. While the picture to the right shows 2 layers (Layer 1 and Layer 2), we have only one layer, the base layer or Layer 1. We could pour our background color right there, and I would do it if I didn't also want you to learn about layers. But let's make a new layer and pour onto that. Photoshop, like so many software programs, gives you many paths to the same destination. You can select Layer-New, right-click on the base layer and choose "Duplicate Layer", or just click that tiny little rectangle with the folded corner at the bottom of our layers box. I say, go with option 3. Pop! Now we're working in two layers. (Layer 2 will be on top of Layer 1. But you can grab Layer 1 and drag it above Layer 2 if you want. It doesn't do anything yet, but just wait!) Highlight the new layer (Layer 2), then move your cursor over to the blank header graphic. Ok, timeout over.
8) Head back to the toolbox for a new-to-you tool, the paint bucket. 
Find Mr. Bucket in the right column, about halfway down the box. Highlight him. He shares real estate with Ms. Gradient, a diminutive figure who looks like a box colored in a black/white fade. If you see Ms. Gradient, right-click her and you'll find Mr. Bucket. Mouse down and highlight him. You're ready to pour some paint! Double-check your foreground/background box. Is that tan color you picked with the eyedropper still in the foreground? I thought so. (If not, click the little double-sided arrow on the tool and swap the colors.) Mouse over to the header graphic, and click to pour that color all over Layer 2 of the header graphic. Now we're cookin', er, paintin'.
9) We're almost ready to move our bike image into the header. But first it's back to layers. If we put the bike on the same layer as our background image, we'll lose some flexibility. (If you're bored or need a little frustration, try completing the tutorial without a new layer here.) So, add a new layer for our bike. (Remember how?) Head up to step 7 if you need a refresher. Add a new layer, then select continue below.