Framing an Image in Photoshop

One way to "dress up" an image, making it look more than just a simple snapshot, is to put a lined box around it, as if you were actually matting it with a frame. Here is how we do it at TheScreamOnline:

1. Open a *72 dpi image in Photoshop (any version), SELECT ALL, and COPY. Then go to IMAGE > IMAGE SIZE to determine the dimensions. Our example below measures 432 pixels wide by 204 pixels high.

2. Close the file without saving changes and open a NEW file. Photoshop will open a window that displays the dimensions of the previous file, which is still in the buffer. At this point we will add five pixels of white to all sides, which means adding ten pixels to the width and height (442 x 214).

3. Select WHITE and click OK. You now see an blank window of white. PASTE your image, and Photoshop will automatically center it. Here is the new image with a five-pixel border of white, signified by the dotted lines (which you will not normally see).

4. FLATTEN the image (in the LAYERS menu item), SELECT ALL, COPY, and close without saving changes.

5. At this point you need to click on the color box in the tools palette to select the color for the lined box that you will next create. We will choose black. Select the color and click OK. Create a NEW file (remember that the previously-copied 442 x 214 image is still in the buffer) and increase the dimensions by two pixels (444 x 216) to create a one-pixel-wide, black line around the image. Choose BACKGROUND COLOR and click OK.

6. Now we see a black rectangular file that is only one pixel greater on all sides than the image with the white border. PASTE and FLATTEN. Here is the resulting image with the lined border:

7. If this is for the web or for sending via email, it's best to OPTIMIZE FOR WEB which can be found under FILE in Photoshop version 5.5 and later (see link below).

Use your own judgment as to how much white area you wish to use. A lot of white can be nice, if there is room for it. The result can emulate a nicely matted photograph. This next example has a light-gray line three pixels away from the image, and fifteen pixels of white between the line and the three-pixel-wide, dark gray frame:

Use your imagination for coming up with some interesting shapes and frame styles. This example used the same techniques with some variations:

For the print format, you will want to work with higher-resolution images, and the white space and frame requirements will differ greatly. For example, a one-pixel line with a 300 dpi image would be almost invisible, since there are 300 pixels to the inch (the line would be one three-hundredths of an inch wide). Since 300 is about four times greater than 72, your original one-pixel line would have to be at least about four pixels for the same effect. Each resolution will demand its own parameters, so we suggest that you experiment for yourself.

*This technique is for working with a 72 dpi image (which you must use when readying images for the web). For more information on this topic, see our complete tutorial on Optimizing images for e-mail or the web.
[Back to step 1]

Back to

For more tutorials, see the Technology Page