PI5 Panel Header Graphic

Stephanie's Digital Photo GalleryRecently I received a fabulous birthday present -- a Sony Mavica FD95 digital camera. I can now say with confidence that if you get the right camera, even someone with my modest photography skills can take breathtaking photos.

Since I've been showing off with my new Digital Photo Gallery, some of you have written asking how I made the gallery graphics. This tutorial shows you how to make a split panel header graphic with those trendy little lines. You can use one of the panel pieces to make a border background too.

For this tutorial, you can use this photo of a purple water lily from my backyard pond (view full size), or you can use a photo of your own if you like. If you're making this for your own photo gallery, pick one of your best photos, one that you really love. 

It's going to be important to resize the photo to a comfortable size for the header graphic. The first thing I did was to make a selection emphasizing just the flower, then I cropped the photo. Then choose Format, Dimensions to resize the photo. I made mine 40% of the original size. Make sure that "Keep aspect ratio" is selected to maintain the height to width proportions. Click OK to resize.

Resize image to 40%

After you resize a large image like this, some blurring and loss of detail is inevitable. To sharpen it up a bit, choose Effect, Blur & Sharpen, Unsharp Mask. You could also use the Effect, Focus command, but I like the Blur & Sharpen command better. You'll get a Blur & Sharpen dialog box with thumbnails of the effects. Ignore the thumbnails and click the Options button to get to open a secondary dialog box, which permits more fine-grained tweaking.

In the left window you see the image as it is now, and in the right preview window you'll see how it looks with the default settings. Note that the image looks much too light and "bleached out" with the default settings. What you'll need to do is edit the Sharpen factor (adjusts contrast) and the Aperture radius (the higher the value the more light and pixelization occurs). 

Use the sliders to edit these values, and click Preview to see the results applied to the image. You may have to go back and forth, previewing and editing some more, until you get a good balance of sharpness and contrast. The dialog box below shows the values that worked best for me, for this particular photo.

Unsharp Mask dialog box

Click OK to apply the effect. Now the image looks like this.

photo resized and sharpened

To add the TV lines to the image, right click the stripe image below and save it to your hard drive. 

Open up the TV lines in PI, and choose Format, Data Type, True Color. Hit Ctrl+C to copy the True Color stripe image into the Clipboard. Click on the flower image's blue title bar to make it active. Choose Edit, Fill. When the Fill dialog box opens, click on the Image tab. Fill with the Clipboard contents, using the Multiply merge method, and edit the Transparency to 50%. Click OK to fill. 

Filling with TV lines

Now your flower image is filled with TV lines.

Choose Web, Grid & Partition to divide the image into 3 panels. When the dialog box opens, specify 1 row and 3 columns. Be sure that "Convert cells to objects" is selected. Click OK.

Grid & Partition dialog box

Click OK and your photo will be divided into 3 panels. You'll see an animated broken line running around each panel. The first thing you must do is to hit the space bar to deactivate the objects.  The panels are currently objects that are locked in place in the base image. To be able to move them, their position needs to be unlocked. 

With the Pick or the Selection tool, click on the left panel to select it. Now right click and choose Properties to open the Object Properties box. Click on the Position & Size tab and deselect (uncheck) Lock.

Object Properties box to unlock position

Click OK.

Drag the left panel into the work space, where it will open in its own window. Note that it has an animated running line around it, indicating that it is an object.

Leave the left panel where it is for the moment. Click on the middle panel to make it active, right click and choose Properties, then unlock the middle panel from the Object Properties box. Drag it into the work space to open in its own window. Repeat for the right panel. Now you'll have three panel objects, each in its own window.

Choose File, New and create a new True Color file 400 pixels wide by 200 pixels high. Drag the 3 panels onto this new, wide image. First we'll align them so they're all on the same horizonal plane. Click on one panel, then hold down on the Shift key while clicking the other two panels, so that all three are selected. Choose Object, Align, Top. This lines up the tops of the panels. (You might actually like your panels staggered so that they're not along a horizontal plane -- that's OK, do whatever looks best to you!)

align objects

Now we need to space the panels evenly. While all three panels are still selected, select Object, Space Evenly. When the Space Evenly dialog box opens, choose to space Horizontally, Fixed. I've spaced my panels 5 pixels apart. Try other spacing arrangements by entering different values and clicking the Test button. You want to have just enough separation to notice, but not so much that it breaks up the continuity of the image.

space evenly

Click OK when you're satisfied. Now the panels are all aligned and spaced evenly. Hit the space bar to deactivate the panel objects.

Let's add a slight shadow around each panel to make them stand out from the background. Click on the left panel to make it active, then right click and choose Shadow. Add a 3 pixel shadow around all of the edges with the values shown below.

add shadow to panels

Repeat for the other two panels. See how it pops out a bit from the background?

shadow added

Click anywhere in the base image to deactivate the panels. If you're going to make a border too, click on the right panel to make it active, then right click, Duplicate. Drag the duplicate panel off the image and into the work space, and leave it there for later.

Select the Text tool to add text to the panels. Choose a font that you like, 2D, color=white. I've used the Avant Garde font, size 22. Click on the image to open the Text Entry Box, then add your text. If you're adding multiple text all at once, hold down on the Control key while hitting Enter to create a "carriage return." I did my lines of text separately because I wanted more control over how they were spaced and placed on the image. Notice that the white letters don't stand out very well, especially where they overlap the spaces between the panels.

add text

To remedy this, right click on the text and choose Shadow. Add the same shadow to the text that you used around the edges of the panels. It will make the text really pop out.

shadowed text

Now that your header graphic is done, right click and Merge All. Even though you may normally save photos as JPG's, I'd recommend that you consider saving this header graphic as a GIF. You will lose some subtleties in color, but the text will stay crisp and clear. If you want an even better looking header, consider saving it as a PNG Optimized 256 color image, shown below. 

save as png

At 27 kb, the PNG image is only 2 kb larger than the GIF, and to my eye it looks nicer. However,  only 4+ browsers can see PNG images so some visitors to your photo gallery will not be able to view your header. 

To make a matching border for your photo gallery, click on the blue title bar for the "spare" panel you set aside earlier. Hold the cursor over the blue title bar to see how many pixels high the panel is. Subtract 10 pixels from that height, then do File, New to create a new True Color file 1200 pixels wide by the height of the panel minus 10 pixels. 

Drag the panel over to the left side of this new, wide image. Position it so that the top, bottom and left sides of the panel do not show on the border. 

You should get a little bit of color from the flower's petals in the middle of the border. The trick is to keep the top and bottom parts of the border about the same color, so there won't be an obvious or abrupt change when the border tiles.

drag object over to left

Right click and Merge All to finish the border. Save it and use it as a background for your photo gallery. You might want to take a look at the border and header together on a web page.

Because the header graphic is so large and takes up a good piece of real estate at the top of your page, you might want to make a smaller header for the rest of the pages in  your photo gallery. I made the one shown below by using a small, detailed part of the same flower image.

small header

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.


Back to Homepage