How to Make a Frame with Photoshop

Easy Steps to Framing a Picture with Photoshop
© John Corney 2007

I like to frame my photos with Photoshop before I post them to my website – it provides some mat-like white space around the photo just like when you get the real photo framed, and this helps to bring focus to the photo itself.

A friend asked me the other day how much it was costing me to get the photos on my website framed thinking that they were photos of framed photos! So I fooled at least one person. Anyhow, I thought it might be nice to share how to make a frame around a picture with Photoshop, so here’s how to do it. It’s actually pretty easy.

Obviously you start out with your photo just like this:

Next we will extend the canvas outside of the image with white. Navigate to Image > Canvas Size just like this:

Next, specify how many pixels you want to exntend the canvas by as illustrated below. This will actually depend on the size of your photo. The one I'm using was optimized for the web so it is just 72dpi, so "less is more" in this case. If you have a high resolution image, then you will probably want to extend by more; just play around with it. Make sure the "Relative" box is checked and the anchor is set to the center. That's the default, so you shouldn't need to change anything here.

Your image should be looking something like this now. (Note, the gray border is not part of the image - it's the background of my workspace in Photoshop - to the edge of the white is the image.

This post is getting long with a lot of images, so let's move to another post so that the page won't take too long to load.

How to create a picture frame in Photoshop page 2.

Making a Photoshop Frame Part 2

How to Create a Frame Around a Picture with Photoshop Page 2
© John Corney 2007

In part 1 of creating a mat and frame with Photoshop we got as far as extending the canvas of the photo with white. Now we are going to create a new layer on which we will build our black border that will become the frame. The quickest way to do that is simply to type ctrl+j. Once you do that your image layers palette should look like this"

Next, select the Rectangular Marquee Tool from your tool box:

Click your mouse and draw a rectangle around your image in the white canvas area. Make sure there's approximately the same margin around all sides before you let go of the mouse button. After releasing the mouse you will see the marquee or "marching ants" around your photo like this:

We are now going to fill the area we have mapped out with the marquee with black. You can navigate to Fill as illustrated below, or simply type shift+F5 which is how I like to do it.

Make sure the fill settings are the same as you see below: black, normal mode, 100% opacity, and Preserve Transparency unchecked:

A this stage, your photo will be totally covered in black like mine below, but don't panic! We'll take care of that in the next post.

Creating a picture frame with Photoshop page 3

How to Make a Photoshop Picture Frame 3

Making a picture frame with Photoshop Page 3
© John Corney 2007

Part 1 and Part 2

As of now, your photo is covered with black fill. Let's move to the next steps which will result in the photo being revealed again with a black border around it.


At this stage the ants should still be marching around the edge of the black fill. Be sure not to deselect the selection. If you do by mistake, reselect the black fill by drawing around its outer edge with the rectangular marquee tool. We are now going to reduce the selection by a few pixels. Navigate as illustrated to Select > Modify > Contract:

Specify the number of pixels you wish to reduce the selection by. The same applies as mentioned at the start of the tutorial: depending on the resolution of the file you will specify more or less. Remember, "more is less", so if your image has a low resolution, then specify a lower number. If the resolution is high, specify a higher number of pixels. Also, it will depend on how wide a frame you want; I'm going for a relatively narrow frame so I'm specifying just 5 pixels.

When you click OK, the marquee border will contract all around by 5px, or by however many pixels you specified.

Now we are going to cut away the selection which will result in the outer 5 pixel border being left behind. Use the navigation shown below, or type ctrl+x.

Our photo is now framed as shown below. (Remember, the gray is just the background from my Photoshop workspace, not part of my image file at all.

This is good as far as it goes, but let's dress it up a bit to make the frame a little fancier and to give the impression of depth to the frame.

Right mouse click on the image and choose Blending Options.

Personally, I like to use Drop Shadow and Bevel and Emboss:

And finally, here's the finished product. Play around: make the canvas extension greater to create a bigger mat; create wider frames, play around with other blending options and colors. Go wild with creating frames for your photos with Photoshop.

Learn how to automate these steps using Photoshop Action Sets

Click the following link to see all three posts that make up this tutorial on creating frames with Photoshop.