WordPress and Graphics II

In this tutorial, you can learn how to change your masthead in your WordPress theme. This change may involve working with a CSS file, which Linda also covers here. You will need to use Photoshop or some other graphic program that can create .jpg, .gif and/or .png files.

Getting Down to Business

If you read through the article posted last week, hopefully you thought about how you'd like go forward with your site "above the fold." If so, then you're ready to change your masthead and make a few more tweaks in your WordPress (WP) blog. In this article, I'll use the Photoshop Pack that I've downloaded from the Hybrid News theme page at Justin Tadlock's site. You can follow along, even if you do not use this theme, as the images are similar to any other images that are contained in WP themes.

In most WP themes, you can find a folder that is labelled "images." I might guess that you can find this folder within your theme folder, and you may have more than one "images" file contained within the theme you want to use. Fine the one that contains your masthead, as this is what you want to use.

For those of you who are using the Hybrid and Hybrid News theme, you need to download that Photoshop Pack and unzip it on your hard drive. Remember that this pack is not in a folder, so you need to create a folder for the unzipped files. You might want to call that folder something other than "images" so you don't end up deleting any other "images" file you may have on your server.

I named my folder, "hybridPSD," because the images in that Photoshop Pack consist of Photoshop PSD files in layers. Your images folder, if you are using anything other than Hybrid, may contain a masthead image, but it probably is a .gif, a .png or a .jpg file. If you have a masthead image, go ahead and pull it out into your graphic program. If you have the Photoshop Pack for Hybrid, make sure you have access to those images as well, because we're going to get down to business.

Masthead Image Changes in Themes Other Than Hybrid News

If you are using a theme (not the Hybrid News theme) that contains a masthead image, your work is easy. Create another folder, and name it something other than "images," but make the name familiar so you know what that folder contains. Copy all your images from your current theme's images folder into that new folder, and keep the same names for those images.

Now, open those images one at a time to get familiar with what they are and where they go. You may eventually run across a masthead image, and this is what you'll work with first. All the steps you make to change your masthead, you can apply to any other image.

1. Open the masthead image and measure it (In Photoshop, go to Image > Image Size to learn the size of the masthead).
2. Create a new image that is the same size as the original masthead.
3. Name that image the same as the original image (same file name as well – ie: .png, .jpg, etc.) and save it in your new folder.
4. Create away! When you're finished, you can upload that new masthead to your images folder, and it will replace the original image.
5. Be aware – and I'll address this later – that your new image may not match other colours in your Web site. Those changes are made with changes in your .css file.

By following the steps above, you not only will create a new set of images for that Web site, but you have saved the original images in case you need them. Bravo.