I’m about to entered territory that’s outside my comfort zone: that of graphics and techonology. The top of this blog says it all… this blog is about our life, what we love, our faith, and our family. Not technology.

Except just this once.

I do this because I had some difficulty yesterday learning how to make a clean, sharp, custom WordPress header, and would have been very grateful if I had found a website that explained how to do it, in language I could understand. While it’s fresh in my mind, I want to explain how to make a custom header for any kindred, non-technical types reading this. For those techie experts among you, don’t scoff… this doesn’t come naturally to all of us! It took me a large part of yesterday to make the simple little graphic that I’m presently using for my header. I know; you could have done that in your sleep, right?

But for all of you non-technical folks who want to try to do this yourself, I’ll explain a few things that I’ve learned, some of which I learned yesterday.

  1. The first step in customizing your header in WordPress is to choose the theme you want to use. Go to your WordPress Dashboard. On the left side, under “Appearance,” click on “Themes.” Filter the themes by the “Custom Header” option. Try out a few to see which one has your desired appearance, widgets, and number of columns. I chose the “Misty Look” theme for this blog. You can preview the theme just by clicking on it. If you decide it’s the one you want, then click “Activate this theme” in the top right corner of the preview page.
  2. Once you activate your theme, you need to find out how many pixels to make your custom header. This information is very important, because it will enable your image to be as sharp and clean as possible. If you simply create a header of any size and then crop it in WordPress to fit, WordPress will dither the image and it will be blurry. To find out how many pixels to make your header, look under “Appearance” again from your WordPress Dashboard, and click on “Custom Image Header.” The page will tell you how many pixels the header will be. For example, Misty Look’s custom header page reads “Images of exactly 760 x 190 pixels will be used as-is.” This means that I need to make my custom header to be exactly 760 pixels width by 190 pixels height.
  3. Once you know what pixels you will be working with, open up some sort of graphics or photo editing program. A lot of people use Adobe Photoshop or Corel Draw. I use the Paint.net download because it does a great job and it is free. I used Photoshop in the past while Iron Man had it for work, and I absolutely loved it. However, now that he no longer has the rights or access to it, Paint.net has been serving me well. Photoshop is a little easier to use and more powerful, but I am very satisfied with Paint.net.
  4. In your editing program, create a new file to the exact specifications that your custom header will use, and play away with whatever photos, images and text that you want to use. I recommend you take advantage of the “Layers” features that most of these programs offer. Each time you add a new layer to your image, your edits will not affect any layers except the one that is open.
  5. An example of the use of layers: In my own header, I started out by inserting the picture of my children in the image. I then selected all the background around my children and used a paint filler to make it all one matching color. I was satisfied with this first part of the image, and I wanted to be sure that I didn’t mess it up when I started adding text. So, I added a new layer. I added the text, “My Blessed Home,” and tried out some different fonts and sizes, and then moved the text around until it was just how I wanted it. When I was happy with it, I added a 3rd layer. In layer three, I added the scripture verse for Psalm 127, and tried out some different fonts. Oops… I discovered that I couldn’t use a reasonably sized font without running into the “My Blessed Home” text. No problem though, because I’m using layers. I went back to layer 2 and changed the “My Blessed Home” text to be a little smaller, and I moved it up a little. Then I went back to my third layer to continue working on the Psalm 127 text… Get the idea? In the end, I worked with about seven different layers for my header graphic.
  6. Once your header image is just how you want it, save it as either a jpg, gif, or png file in a place where you will be able to find it. Those are the only image filetypes that WordPress recognizes. I used jpg for mine. Your editing program will require you to “flatten” your image before it saves it in one of these formats. To “flatten” simply means that it will make it all one layer. You may want to save a copy of it in your editing program’s default format first, so that you will have the ability to go back and edit the images in the existing layers at some point in the future if the need should arise.
  7. At this point, it’s all easy. Back at your WordPress Dashboard, under “Appearance,” click on “Custom Image Header.” Click on “Browse” and select the jpg, gif, or png file you designed for your header, and upload it. You’re done!

Thus concludes my first, and probably my last, post related to anything technical.