Thursday, April 09, 2009

Framing an Image using the Contract Tool in Photoshop

This Photoshop tutorial will be helpful with our next CSS project and teach you a way around a known Photoshop glitch concerning an important tool called "Contract".

I want to create a 15 pixel, semi-transparent border to frame an image. The first thing that I need to do is to draw a rectangle that is offset by 15 pixels, equidistant from each side of the image. This can certainly be done using the rectangle selection tool [Shortcut Key: M] but that's not going to be convenient or precise.

Best way to make this selection is to use Select > Modify > Contract. However, in Photoshop, if you select the entire canvas via Select All [Ctrl+A], the Contract command is disabled and cannot be used to modify a selection. I am going to show you a way to get around this:

Step 1: Select All [Shortcut: Ctrl+A]

Step 2: Using your arrow keys, Move the selection down one pixel and right one pixel.

Step 3: Select > Modify > Contract the selection by one pixel

Step 4: Move the selection up and left by one pixel. You should now have a selection which is one pixel away from the canvas edge on all sides

Step 5: Select > Modify > Contract the selection by one less than the amount you originally required. If you originally wanted to contract by 15 pixels, enter 14 since the selection has already been contracted by one.

To complete the border, Select > Inverse. Your border will appear as walking ants. Now that your border selection is complete, pour white (or any other color of your choosing) paint using the Paint Bucket tool [Shortcut Key: G] into the selected border area. You will get a 15 pixel, opaque white border framing your image. In the Layers palette, pull down the opacity slide to 20-30% for a semi-transparent border.

Picture Credit: Petr Kratochvil from

Post a Comment