Creating a header with a single photo background:
1. Open up Paint.net (or whatever image editing software you're using).
2. Now go to "File" and "Open" and find the picture you want to use and open it:
3. Since I want my header to be 920 pixels across and I'm going to use the entire width of the image, the first thing I'm going to do is resize it down to 920 pixels wide. Click "Image" and "Resize" in Paint.net and you get this box:
4. Under where it says, "Pixel size", I'm going to change the "Width" from 2560 to 920. Since "Maintain Aspect Ratio" is checked, it will automatically change the height as well, to 690 pixels. Obviously that's too tall. While there is some flexibility in the height, you don't want it to be over 350 pixels max. Really 250 to 300 is best, so we're now going to have to crop the resized picture to make it the right height.
The Crop or "Rectangle Select" tool generally looks like a rectangle with a dotted outline and is frequently in the upper left corner of tool palettes. I've circled it here:
5. Click on it and you're ready to crop. This is tricky because it sometimes take several tries to get the selection right. Your cursor will turn into a + which you need to position at one corner of the area you want to keep. I usually start at the upper corner. Hold down the button on your mouse, and drag the cursor to cover the area you want to keep. A handy feature is the numbers at the bottom of the screen. The last pair will show you the exact size of the selected area. You can watch it change as you drag the cursor across the area. When you let go the button, the section of you've selected will be highlighted.
6. If this isn't right and you want to try again, Click "Edit" and "Undo" to step back. Once you've got the right area selected and you're ready to crop it to that, go to "Image" and "Crop to Selection." That should leave you with a nicely header-sized image.
Next you want to put your name or website title on there. First find a spot with a semi-clear or not too busy background (sky usually works well for this, but shrubbery can, too) and pick a color that will contrast with the background. You pick your colors on that color wheel at the bottom left. The two squares in the top lef of that box show the foreground color selection and background color selection. For this we're only really concerned with the foreground color. Because I'm going to put my name over the Sky Area, I'm going to leave it black.
Click on the text icon, which looks like a capital "T" (circled above). A text tool bar appears near the top under the main menu. You now need to choose the font and size for your text.
HINT: I find it easier to do this in Word. Open a new document, type in text, now start playing with selecting fonts and sizes until you've got the right font. The size may not be perfect, but it helps to have a starting point. Now go back to Paint.net and set the font and size.
ANOTHER HINT: Every element of your image should be on a separate layer. To open a new layer, go to that "Layers" box in the bottom right. The leftmost icon at the bottom of that box is for "Add new layer." (It's also circled above.) Click on it to create a new layer. The reason for this will be obvious shortly.
So now you've selected the Text tool, set the options to a cool font and the approximate size, click on the image in about the area where you want the text to be. You'll see a vertical blinking line at the place where you clicked. Go ahead and type it out. Size too small or too big, color wrong? Click "Edit" and "Undo", Adjust and click and type again.
HINT: You don't have to stick to the preset sizes. If 36 is too small and 48 is too big, just enter something in between. I use 44 for my sample.
7. Once you've got the text the right color, font, and size, you probably still don't have it in the right position. You can Undo and Redo it until you get the perfect starting position, but there's an easier way. Since it's on its own layer, you can actually grab the text and move it around. We need the "Move Selected" tool for this, which is right next to the Crop tool. (It's circled above.) Click on it, then click on the text and hold the button down. When you move the mouse around, the text moves with it. Move it around until it's in exactly the right position. You can do this since the text is on it's own layer. When you move the text, the background won't move. Once it's in the right position, release the button.
You should have a pretty cool looking header banner now:
8. We just need to save it for loading up to WordPress now. Before doing that, I suggest you check the exact size of your banner and write it down. (Click Image and Resize; it will show you the Width and Height. Click Cancel to get out of it without making any changes.
Click "File" and "Save As". Where it says, "Save as Type" click the arrow for the drop-down box and choose "JPEG". Click "Save". You'll get a box that looks like this:
Sizing of web images is always a trade off between size and quality of the image. The higher the quality of the image, the bigger the file and the longer it takes to load. In general you want your header image to be no more than 50-70K, so ajdust the slider until the file's about the right size and the image isn't too fuzzy. Then click "OK"
You'll get another box with this message: "Saving in this file format requires that the image is first "flattened", which reduces it to a single layer." Go ahead and click "Flatten."
Your image is now saved and ready to be loaded up.
9. Open your browser and go to your WordPress dashboard.
Before you load the image, go to the "Appearance", "Weaver Admin" and "Main Options" page. Change "Theme Width" to the width of your image. Scroll down a bit in the Header section to: "Hide Site Title/Description". Click in that box to check it since the title is on your graphic. Right below that, at "Header Image Height," change the height to equal the height of your image. Save your Settings and go to the "Appearance" and "Header" page.
Where it says "Upload Image" click on the "Browse" box and locate the image we just saved. Once the link is in the box, click "Upload" and there's your new header! Now scroll down and click "Save Changes" Take a look at your site in another tab.
You may find you'll need to adjust some of your colors to co-ordinate with the new header.
Here's a link to my sample page that uses the image I just made:
(And, yes, I definitely need to adjust some of those colors!)