Adding a photo margin with Paintshop Pro

I’ve been making templates to sell lately, and in the template I mention that you can space photos by adding a spacer strip to them in your graphics program. I thought it would be a good time to put a little tutorial in here about that.

I’ve got a nice little thumbnail photo of a chocolate waffle which I decided to post to a couple of blogs of mine. I like to have blog posts start with a thumbnail photo at the upper left with the text running down the right and wrapping around the photo.

I also like to have photos and other images alternate with text wrapping around them, which you can do by adding ‘align=”left”‘ or ‘align=”right”‘ to your image tag, like so:

<img src="http://myimagehost.com/image.gif" align="left">

Unfortunately, as you can see up there, the text touches the photo. That’s the default in html. There are a lot of different ways to fix this, depending on the circumstances. But if I’m editing the photo for a blog of mine or for Niteflirt, I often just add a spacer strip to save code.

Open up the photo in Paintshop Pro. Click ‘Layers/Promote background layer’ so you can work on the background layer. Now click ‘Image/Canvas size’. The following dialog box comes up.

Your image will now have a transparent margin on its right and lower sides, which will show as a checkerboard background in PSP.

Now click ‘Layers/New raster layer’. Accept the defaults in the dialog box that pops up.

Paintshop Pro has helpfully put a new transparent raster layer on top of the current layer. This is going to be our new background, so we want it beneath the current layer. Look at the Layers palette in the right sidebar. (If you don’t have your layers palette showing, go to ‘View/Palettes/Layers’ to make it appear.) Click on the transparent layer and drag it beneath the layer with your image one it.

Now, with the transparent layer still selected, click ‘Layers/Duplicate’. I said I’m going to be putting this in two blogs. One has a white background and one has a black background. I’m going to be making two different images, one with a white spacer and one with a black spacer.

I’m going to give the image a drop shadow. Click on the image layer, then click ‘Effects/3D Effects/Drop Shadow…’ The following dialog box will come up.

The window at the left shows your original. The one at the right shows what the drop shadow will look like at the current settings. You can’t see the new drop shadow here. You have to drag the picture over to see it if it’s bigger than a small button.

I generally choose a shade of gray for a drop shadow on a white background, rather than black. 7 pixels of vertical and horizontal offset is good for a photo like this. I tick the box ‘Shadow on a new layer’ because I want to be able to control whether the gray shadow shows up on my black background coming up.

Now I select white in the Materials palette and floodfill (the bucket on the toolbar) one of the background layers. Then I fill the other with black.

If you have a different background color to match, you can use a color picker to select the background color for proper matching.

If you don’t have a solid color background, you can save the image as a .png file, but older versions of IE will not display the transparency properly. It’s a tradeoff.

Select ‘Edit/Copy merged’ then ‘Edit/Paste as new image’ to create a new image with a spacer. Save the original as a .psp file to preserve its layers, and the new one as a .gif or .jpg. Note that the background is white here because the black background is hidden beneath the white background.

Now I’m going to click the little eye next to the gray shadow layer and the white background layer. This will make these two layers invisible, and the black layer will show. Again, select ‘Edit/Copy merged’ and ‘Edit/Paste as new image’.

You can’t see it here, but this image with the black background will look perfect in the blog I have with a black background.