page header

Caesar originalRecently I have been asked about displaying photographs on a web page. The simplest way is to just put it there, exactly as it came out of the camera, like this one on the right.

But that is not the way to make an attractive presentation. At the very least, this picture should be cropped, to remove the distracting shapes and colours from the foreground, and giving it a simple wooden frame will improve things a lot. In fact, I cropped this photo below the cat's head, which left some of the flowered material still in the picture, so I used the clone paint brush clone paint brush to cover it with the background material. I used the PhotoImpact frame designer, with wood3 texture and a 10 pixel 3d frame.

Caesar framed

I want to suggest to you a couple of more imaginative ways of displaying your photos, using some of PhotoImpact 4's tools. You make life much easier for yourself if you use a background tile which has a fairly close texture and no obvious repeats, like the one on this page, which was made using Web/Background designer. This enables you to work with the picture on a copy of the background so that when it is displayed in the page its background will blend with the page one. If the background has a pattern which has to be carefully matched, these techniques will not work because the mis-match between the photo background and the page one will be too obvious.

The cat photo background is too dark for the first technique I want to show you, so I am using one of ducks on our local duckpond. First, make a new image a little larger than your photo, and fill it with your page background tile. The easiest way to do that is to open the background tile in PhotoImpact 4, click on its frame to make it the current image, then click first on the copy button, (left of this pair) copy/paste buttons then on its neighbour, the paste button. A selection marquee will appear around the tile, showing that an object copy of it has been placed on top of the original. Place your cursor in the tile, hold down the left mouse button and the 'T' key on the keyboard, and drag this top copy into your image. When you release the mouse button the tile texture will fill your image, and Edit/Selection/Merge All will make it permanent.

Click on the photo, and then the copy button. Click on the frame of the new textured image, and then on the paste button. A copy of the picture will appear against the texture. Move it to the centre, then use Edit/Selections/Merge all. Your picture will look like this one. The border around this picture is to stop it blending into the background, so that you can see how it should look.

ducks and textureNow go to the original of the photo and use View/Photo Properties, to find its width and height in pixels. This one is 206x136. Select the standard selection tool, with mode new, shape rectangle, fixed size box checked, and enter your photo dimensions into the selection dimensions. My setup looked like this.

selection setup

Now click at the top left corner of the photo against the texture and a selection marquee just the right size will appear. Put your cursor inside it, hold down the left mouse button while using the keyboard arrow keys to adjust it to precisely the right place outlining the picture.

Use Edit/Selection/Invert, and the textured area around the photo will be selected. Use Edit/Selection/Convert to object. Use Edit/Object/Add shadow with these settings.

drop shadow

You will see a shadow appear at the top and left of the photo, and it will begin to look as though it is in a hole cut in the texture. When you click OK, more marquee lines will have appeared around your image. Put your cursor on the texture, hold down the mouse button and drag the texture to the workspace outside any of your open images. The texture and shadow will be peeled off and put in an image window of their own, and the photo will be left against a white background.

Use the selection tool again to select the photo (your settings should still be in place) and, just as you did before, invert the selection to select the white background. Click on the copy button and then on the paste button. The selection marquee will change to black, showing that a second copy of the white background has been placed in the image. Put your cursor on it, hold down the left mouse button, and use the keyboard arrow keys to move it one pixel up and one pixel to the left (one press each of the left and up arrows).

Now drag the texture border back from its own frame into your image and place it precisely so that the shadow falls on the top and left of the photo, and the one-pixel of white shows at the bottom and right of the photo. Use Edit/Selection/Merge all.

Uncheck the fixed size box on the top status bar, so that you can select a rectangle just a little bigger than the photo and use Edit/Crop. You can use the Web/Smart Saver to save this picture and when you put it on your web page, it will look like as though it is pasted in a recess in the texture.

recessed picture

lasso toolFor the second technique we will once again use the cat photo. Begin by opening a new image a little bigger than the cat picture, and filling it with the texture tile as you did before. Select the lasso tool. You find it by clicking on the tiny coloured triangle at the bottom right of the standard selection tool, to open the selection tool flyout.

cat head outlinedWe are going to isolate the cat's face from the rest of the picture. This is a technique which is particularly suited to faces, human as well as feline. Zoom in on the picture - use the keypad plus key to zoom in and the keypad minus key to zoom out - so that you can see what you are doing, and click on the very edge of the cat's face. Then move a little way around and click again. You will see a short marquee line joining the spots where you clicked. Move round the face, keeping the moves short on curved lines. Across the top of the cat's head, where there is less curve the clicks can be spaced more. As you go, you will see that not only are the click spots joined in sequence, but the first is joined to the last so that a growing area of the cat's face is included in the selection. When you get back to your starting point the whole face is surrounded. Double click now, and the cat's face is selected, as in this picture.

If you accidentally double click and close out the selection before you have gone right round, change the selection mode on the top status bar to Add. Go a little way back so that your new line overlaps the first one, and complete your outlining of the face. Make sure before you double click that all of the face is included in your first and second selections. You may have to go further round if there is a 'hole' in the middle, until it is all covered. When you double click again the whole face will be selected.

Click the copy button, then the frame of your new textured image, and then the paste button. A copy of the face will appear in the textured image, and you can move it to the centre. Use Edit/Object/Add Shadow. Select the rightmost shadow type, which appears on all sides of the image. Set the shadow size to 104 and soft edge to 10 pixels. Click OK and then use Edit/Selection/Merge all.

blur toolblur settingsSelect the blur tool from the retouch tool flyout, and set the settings as shown on the right. Zoom in on the cat's face and go carefully all round the edge to soften the edge, remove any hard line and blend it into the shadow.

Now select the path tool. path tool Change the mode to path and click on the Edit button on the top status bar, and select Select Custom Shape. From the shapes on offer, choose one you like. I am using the one called Flower. OK that and then click on the Edit button again. This time, click on Custom Shape, which is immediately above Select Custom Shape.

In your image place the cursor above and to the left of the cat's head, and drag below and to the right, till you have a square surrounding the face. When you let go the button, your chosen shape will be drawn in outline on the face. Don't worry if it is not quite the right size and not quite in the right place. That will be easy to put right later.

Change the path mode to 3d Pipe. Depending what settings and colours you have used recently, you will probably get something which looks like a cushion covering the cat's face. Click on the button marked 'Options' on the top taskbar. Select the tab 'Border/Depth' and change the border figure to something like 4 or 5. You will see the effect on the ring displayed on the tab. When it is the depth you want, OK it.

It still will not be the colour you want, but now you can see if your shaped frame is the right size and in the right place. Use the standard selection tool, and when you place the cursor on the frame, it will change to the moving tool and you can click-and-drag the frame to the right position.

If it is not the right size, use Format/Dimensions and select Apply to Selected Objects. Keep Aspect Ratio should be checked, and you can now alter the size of your frame by putting a figure above 100 in the percent box to enlarge it, or below 100 in the percent box to reduce it.

Now we must add some material or colour to the frame. On the top status bar, click the Easy Palette tool Easy palette toolto open it. Click the left button on the Easy Palette to access the list of galleries, and check Materials Gallery. Click on the presets tab and choose a material for your frame. I have used warm gold. Double click on the one you want, and your frame will be filled with the material.

All that is left now is to add a shadow to the frame. Select the path tool again and open the Options box. Use the Shadow tab, and set up a shadow to suit your frame. I used the down right shadow, x, y offsets at 4, transparency at 25, shadow size at 100 and soft edge at 20.

Use Edit/Selection/Merge all and then crop the picture so that you have only the minimum of surrounding texture, but you must not crop into the drop shadows. You picture is now ready for the web page.

Caesar pipe frame    alternative frame

You can even vary it a little, and put a different background inside the frame. In the picture on the right, once the frame was made, it was dragged off the picture into an image of its own. It was merged and the centre selected and given a fill. The cat face was put into this picture, and the shadows and blurring done as before. The whole was merged, the area outside the frame selected, the selection inverted and the frame and its contents copy/pasted onto the background texture and a drop shadow added. There was a white halo visible in the drop shadow, and this was removed with the blur tool.

I hope this has given you some new ideas about displaying your photographs to make your web pages much more arresting.

 

Carol Brooksbank 2003
This tutorial may not be copied to any other website nor distributed in any way. It may be downloaded for personal use only. Links to my tutorials at
http://www.caroluk.co.uk/tutindex/ are welcome.

 

tutsbut.gif - 4kb Return to tutorials

 

  Click button to visit the graphics page