The Web Development Blog has moved to Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

May 26, 2006

Customize your masthead image

Recently we've been getting more requests from people who wish to customize the masthead image on their Websites, so I thought this would be a good time to release the magic Photoshop file and share the secret process for creating your own custom image. While the images provided with the templates are perfectly suitable for most sites, a photo that represents your topic or organization can add a nice visual cue to your users.

Step One: Choose your photo


Frankly, this is the hardest part of the process. First you have to find an image that represents your site, and then you need to make sure that it works when cropped into a wide panoramic rectangle. In the case of this blog, I first thought to do a composite of images of Websites, but decided that they'd be too small to recognize. So instead I moved my PC next to my Mac, added a stack of reference manuals, pulled up 2 Websites on the monitors, and took a picture of the scene. It's not my artistic highpoint, but it does represent what we do.

I was able to a bit more precise with the picture for the Dean Kamen lecture. In that case I used an existing photo—of professors Rowan and Weder (among others) walking across the quad—to which I added a fellow riding a Segway. Pharmacology uses an image of a mouse mammary gland on their main pages, but wanted to do something special for the student section. They had hired a photographer to shoot an event they were having, and asked him to shoot a few pictures specifically for this purpose. Keeping the proportions of the final image in mind he was able to line the students up so that their faces nicely fit the space. The Dittrick Medical History Center has a number of macabre medical images, illustrations, and objects in their collection including a painting of such items. This cropped portion of that picture gives visitors a good idea of what they'll find inside.

Step Two: Sizing your image


Once you have chosen your picture you will need to crop it to the right size. There is no best way to do this, but this is the method that I use.

  • Open your photograph in Adobe Photoshop (available through the software center)
  • Select the entire image and copy it.
  • Open a new photoshop file and specify the size as 422 pixels wide by 108 tall.
  • Paste your image into this file. As you can see from the first image—of recent School of Medical graduates—on the right, this will need some adjusting.
  • Using Edit > Transform > Scale, resize your image, then reposition it so that it fits well in the rectangle. Keep in mind that a portion of the left side of the image will not be visible in the final picture. In this case, the woman on the left will disappear in the final version.
  • Flatten the image. (Under the layers menu).
  • Select the entire image and copy it.
Step Three: Coloring your image
  • Download, then open, mastheadimage2.psd. Right-click (PC) or click-hold (Mac) to save the file. Be sure to save it as mastheadimage2.psd, as you may have trouble opening it with a different extension.
  • Open your layers palette (under the Window menu), and click on the uppermost photo layer (layer 62).
  • Paste your image. It should now be the uppermost photo.
  • Choose your color by clicking in the left hand box next to the color that matches your masthead. If other colors have been selected above that color, deselect them by clicking on the eyeball icon to their left.
  • If your image has a lot of contrast, select the "fade" layer then adjust the opacity downwards. Most images fall somewhere between 30% and 50% opacity. You just need to adjust it sufficiently so that the white title of your site will be legible against the image background.
  • SAVE your file.
  • Under the Image menu, change your mode from RGB to Indexed color. When it asks you if it should flatten the image and discard unused layers, click "OK."
  • Under the file menu, choose "save for Web" then save the file as "filename.gif" wherein filename is the name of your existing masthead image or a name of your own choosing. Save this in the images folder of your site.
  • Close, but DO NOT SAVE mastheadimage2.psd. If you save at this point you will lose all of your layers. The version you saved before changing to Indexed color is the version you want to keep.
Step Four: Incorporating the new image into your site.
  • Open the stylesheet for your site using, Dreamweaver, Notepad, TextEdit, or whichever program you prefer for simple text editing. If you use Word you must remember to save it in plain text format and retain the .css extension. If your are using the current version of the templates your file will be most likely be named something like advanced.css, basic.css, or template-default.css.
  • Scroll through the code until you find the style .masthead*. Edit this so that the url reflects the file you just created. It should be something like: background-image: url(../images/filename.gif);. Save the file.
  • Upload your new .gif file and your edited stylesheet to your Web server.
  • View your site. If your new image doesn't appear, try uploading it again, and make sure that the file path to the image matches the location in which you saved the image.
  • *Users who are working with files copied from most branded blogs or from my most recent Web sites will find that their stylesheets have names based on the color such as navygray.css or advancedteal.css. They will need to edit #topright rather than .masthead in their stylesheet.

Voila, you are now ready to produce and enjoy your own custom masthead images. If you have any questions or suggestions, please submit them in the comments area.

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by: Heidi Cool May 26, 2006 02:39 PM | Category: Heidi's Entries , How-to , How-to


Trackback URL for this entry is: Customize your masthead image



Great Write-up, but I don't think you need to flatten, convert to Indexed color and then save for web. Photoshop will allow you to save the original "for the web," creating a new file and not risking the overwriting your master with a flattened version.

Posted by Photo Search Tools on January 26, 2007 12:06 PM


Good point. This was necessary in older versions of Photoshop, but in the current version you can "save for Web" without changing to Indexed color first.

Posted by Heidi Cool on February 1, 2007 09:44 AM

Post a comment

Posted by: hac4 (Heidi Cool) May 26, 2006 02:39 PM | Comments (2) | Trackback