Unfortunately, that isn't as straightforward as it might seem. The first way that you would think of doing it would be to create an image with transparent edges, so that the background would show through. Photos on a web site will usually be JPGs... but JPGs can't have transparent areas, so that's out. The only two formats that support transparency, and can be displayed in a web browser, are GIF and PNG. GIF is no good because it can only display 256 colours and can't display partial transparency. This would mean that your photo would look awful, and would either have a sharply cut off edge, or a speckled, dithered edge rather than a smooth fade out to transparency. PNG would sort of work. It will display all the colours and supports partial transparency. The problem is that Internet Explorer 6, and older, can't display transparent PNGs, so maybe 30% of your site's viewers would see a coloured block around the image. The other problem is that photo PNGs typically have about 5 or 6 times the file size of a JPG of the same dimensions. This might mean that 20 images that take up about 2 MB as JPGs would take up 10 or 12 MB as PNGs, and might well be unusably slow to load for viewers with a slow connection.
The usual solution is to fake it by creating JPGs that fade to your page's background colour at the edges rather than to transparency. This will really only work if your web page background is a single colour. It might be workable if the background was a very simple gradient or texture, but might take a lot of work to get the alignment right, and might give inconsistent results with different browsers. The simplest way to do this is to set PSP's background material to the same as your web page's background. Open your image (a copy, not the original) and press Ctrl + A to select all. Feather the inside of the selection with Selections > Modify > Inside/Outside Feather... it might take a bit of experimenting to work out the amount of inside feather to apply. Then invert the selection (Selections > Invert) and press the Delete (or 'Del') key. You can get more control over the process by using layers. Add an new layer, that is flood filled with your web page background, under the layer holding your image. You can then either use the same select, feather, invert and delete process as above, or you can erase the edge of the top layer with the Eraser tool, or you could apply a mask to the top layer.
|