Creating Custom Shaped Photographs for the Web

(basic to intermediate level)

Photographs come in rectangular shapes. That's just how it is. Sometimes when you have stared at box after box on the page you crave a little variety. This tutorial will help your photos break out of the box.

Before	After

Step 1

Start Photoshop CS2 ( if you haven't already) and open a picture that you want to work with. The pictures that are the most suitable for this project show the entire person (or other subject) and have a reasonable distance between the subject and the edge of the picture.

Step 2

Reset your default colours by clicking the Default Colors icon just below the set foreground and background color boxes in the toolbox.

Step 3

We want to change the default background layer that we got when we opened the image. A Background layer is a special type of layer and will not allow transparecy. While this effect doesn't require transparency strickly speaking. After all we could save the final image as a jpeg against a plain background and use it on a webpage of the same colour. But... by exporting the final image as a transparent gif we can add the resulting image to a website and it won't matter what the background colour is.

To change the background layer to a regular layer, double click the layer in the Layers Palette.

The New Layer dialog box will launch. All you need to do is click OK. You can rename the layer if you want. This is important if you working with files that have many layers but not so critical on this particular project.

Step 4

Enter into quick mask mode by clicking the Edit in Quick Mask Mode button in the toolbox.

Step 5

Select the entire picture. Choose Select > All or use the keyboard combination Ctrl (win) or Cmd (mac) + A.

Step 6

Fill the picture with the quick mask. Choose the Paintbucket Tool and click within the selected area (which in this case is anywhere on the picture). You can also use the keyboard combination Alt (win) / Opt (mac) + Del to fill with the foreground color (black). As we are in quick mask mode, this fills the mask rather than the picture itself. You will see a red overlay where the mask covers the picture.

Step 7

We are now going to use the Eraser tool to remove areas in the mask. The Eraser tool offers you a couple of different modes, Block, Brush and Pencil. The mode selections are available from the Control Palette when you have the Eraser selected. For this exercise the Block setting is fine.

Erase an irregular shape around the subject in your picture. You want to leave a fair bit of room between the subject and where you erase and you want to make sure that the edge is erased all the way around the picture. Don't worry if it looks a bit ragged.

If you make a mistake and erase a bit of the mask over your subject, don't worry, it is easy to fix. Simple click on the Switch Foreground / Background colors icon on the tool bar and now when you use the Eraser tool you will actually be adding to the mask.

You should end up with something similar to the example below.

Step 8

Now we are going to run one of Photoshop's distortion filters on the Quick Mask. From the menu bar select Filter > Distort > Ocean Ripple.

In the example, I set the Ripple Size to 3 and the Ripple Magnitude to 8 but it is best to experiment a bit and see what works best for your particular photo.

The preview pane of the Filter customization window will allow you to see the effect your settings have on the mask.

Once you are happy with how the mask is looking click OK
to apply your changes.

Step 9

Switch out of Quick Mask Mode by clicking on the Edit in Standard Mode icon on the Toolbox. Your mask will become a selected area.

Click Delete. This will remove the background of your photo leaving the irregular shape of the mask.

Step 10

The final step is to prepare our photo for the web. Choose File > Save for Web. This will launch the Save for Web dialog box.

Set the following options:
Note: Some of the controls on this panel aren't labelled - presumably due to space restrictions. You can learn what the controls are named by holding your cursor over the control, after a brief pause a tool tip will appear with the name of the control.

• Save Optimized as Type - set to Gif. While both Gif's and Png's support transparency, I find browser support for Gif's is still more widespread.
• Color Reduction Algorithm - set to Perceptual
• Colors - experiment with what looks OK for your photo. typically for a photograph you are going to be 256 or at very lowest 128.
• Matte - choose the background color of the webpage your graphic will appear on. The matte will fill partially transparent pixels so that the blend to the background of your site is seamless. As the example picture will be shown against a white background I chose white.

Click Ok. There you have it - one cool graphic for your website!