How to Make a Wooden Picture Frame

Posted April 27th, 2007 by Mike Cherim

On a recent site I made I created wooden frames around most of the embedded and stand-alone images. Doing this, while somewhat time-consuming, added a nice “finished” touch that may be worth doing in some cases. Bear in mind these are wooden frames, but the technique described herein can be used for all sorts of materials: metal, marble, plastic, etc. In this tutorial I will be using Adobe’s (Macromedia) Fireworks. Even though I have a variety of image-editing software, like PhotoShop, Fireworks is my absolute favorite.

Begin with a chunk of wood

To begin, you first need to find or create a master piece of material large enough to extract your “pieces” used in the frame segments. Since I’m making a wooden frame I obviously need a piece of wood and it has to be finely detailed so when the segments are extracted you will still be able to recognize them for what they are — wood in this case. Here’s the master piece of wood I used for this article (the one I used for the example site was larger).

Note: The old “bleeding” nails were something I added for the example site, but they aren’t really needed here. They could be used, though, to give the finished piece a little bit more of that rustic character and charm.

Sawing out the pieces needed

Using a skill saw… no, wait, using the crop tool, outline and crop some pieces. Assuming a rectangle shape, you will need to extract two pieces: one for the top and bottom and one for both sides.

After taking the first piece — which you will copy and paste onto a new canvas — just hit ctrl+z to undo the original cut so you can take the second piece. What you’ll end up with is two pieces like these:

After getting these two pieces you will first want to rotate the piece that will be the vertical sides 90° by using the “Transform” tool: Tools > Transform > Rotate 90°CW. After that’s done you’ll copy and paste each so you end up with four pieces: two sides and two top/bottom pieces, like so:

Please note that I eyeballed the width of the horizontal pieces then tweaked them to keep the width approximately the same. In such a case, especially with something rustic like wood, this doesn’t have to be an exact science. Moreover, what the eye sees is more important than any ruler. Case in point: I used to be an electrician and used to mount conduit on cinder block walls. Doing this I had two choices. I could use a level to ensure the conduit was level, or I could match the joint line. Doing the latter wasn’t exact, but it looked a lot straighter and neater when I matched the reference imperfections of the cinder block courses. Same applies here. If it looks right, it is right.

Also note that I turned the vertical pieces instead of cutting them out. I did this to capture more grain to make sure it looked like wood. I could have cut them out the other way but it wouldn’t have looked as good. If you want a more rustic and imperfect look, you can rotate the opposite pieces 180° to make them less symmetrical. You can do this by turning one clockwise and the other counter-clockwise: Tools > Transform > Rotate 90°CCW.

Nailing the pieces together

Now that I have the necessary pieces, it’s time to put them together. I do this by physically moving them and using care to overlap them evenly so that no segment is too short or too long. This helps make the finished project look better.

When I put these pieces together I adjust the layering — ctrl+shift+↓/↑ — to put one side behind and one side on top. This makes the frame patterning less symmetrical and thus more natural. Once they’re put together I “group” them into a single piece by using my keyboard: ctrl+g.

Sanding a nice bevel

To make this now single piece of wood look more like a frame I apply a bevel. It’s very important to make sure you group the pieces before doing this else it won’t look like a single piece. The bevel I used on this project was flat-edged, but you should experiment with other options depending on the application and the material used. For example, if I were making a plastic frame I’d probably using a rounded or sloped bevel.

To make the bevel I select the image, then using “Effects” menu I grab the inner bevel tool: Effects > Bevel and Emboss > Inner Bevel. The settings I used are “Flat” with a thickness of “3” or “4” (measured in pixels, 10 is default) — I used “4” in the example. This is what I got:

Adding the picture

Now I will add the image to be framed. Please note that for consistency sake I will use the same frame on many photos, but not all images will fit into the frame when scaled. What I’ll end up with is some overlap, like this:

Note: If I had a vertically-oriented photo, I’d rotate the whole frame by 90° in one direction or the other. Then I’d re-position the drop shadow if needed.

I can address this small matter in one of two ways. First I can make sure the frame abuts the edge of the image area so I don’t have to worry about any overlap being visible. But being that I will be adding a shadow effect to make the finished project look more natural, I have to use method two which involves making a mask that matches the background. This will end up being layer two of the three layers I’ll end up with. As layer two it’ll cover the subject, yet it’ll be behind the frame so the frame effects applied later will be seen. To make the mask I simply use four oversized shapes grouped together. Here’s an example with the mask in place and layered to be behind the frame but in front of the image:

Note: that I could have cropped the image to make it fit the frame, but doing it this way was a lot faster and easier in my opinion.

Hanging your frame

Now that I have my framed picture, I will add a simple drop shadow to the frame itself (Effects > Shadow and Glow > Drop Shadow) to make it look more natural and to make it appear more three-dimensional. The default shadow “Distance” is “7” but I will scale that down to “3” to control the depth and make sure it doesn’t pop too much.

In summary

There are probably other ways to do this such as using pattern styles and whatnot, but in my opinion doing it this way offers a lot more control so I can get it exactly how I want it. To add to this technique, I could also add nails, 45° fine lines in the corners, and hues could be adjusted to make the “pieces” more individualistic.

13 Responses to: “How to Make a Wooden Picture Frame”

  1. Elliott Cross responds:
    Posted: April 27th, 2007 at 7:20 pm


    I saw the site a little earlier, and was amazed. As a woodworker too, I thought that it was so realistic looking for the frames. Thanks for the details on how you did it, I will definately file this one away to save for future reference!

    Now, to find my other two finger from the skill saw……

  2. Gill responds:
    Posted: April 27th, 2007 at 9:22 pm

    If you’re going to do a lot of this you’ll save yourself loads of time if you get yourself a copy of Paint Shop Pro. It has a Picture Framing tool. You can add stock frames by Insert > Picture Frame then choose from a list of different shapes and textures, or you can create your own frame tubes and add them to the set for future use. It does ovals and odd shapes as well.

  3. JackP responds:
    Posted: April 28th, 2007 at 10:01 am

    Niiice trick. I’ll have to remember that one. Particularly as once you’ve heard it it’s so straight-forward and obvious I’m already thinking “I must have already known that, surely…”

  4. David Zemens responds:
    Posted: April 28th, 2007 at 2:06 pm

    To make this now single piece of wood look more like a frame I apply a bevel. It’s very important to make sure you group the pieces before doing this else it won’t look like a single piece.

    Thanks for sharing, Mike. One question, though, for you or the other readers: Can anyone suggest how to accomplish this with Photoshop? I can only seem to bevel each of the four sides of the frame individually, which of course does not result in a very pleasing look. Thanks again.

  5. Problem Solved: Thanks Mike! » 1955 Design responds:
    Posted: April 29th, 2007 at 1:35 pm

    […] I learned a terrific new Photoshop technique today from my friend Mike Cherim over at Not only did Mike write an article about the technique, but when I posted a question about difficulties I was having implementing his suggestions, he went out of his way to find an answer for my problem and post it on his website. Many thanks as usual, Mike! How does the image I created with your help look? […]

  6. David Zemens responds:
    Posted: April 29th, 2007 at 2:56 pm

    Thanks, Mike. Cool technique - thanks for taking the time to demonstrate it.

  7. Bonnie responds:
    Posted: May 3rd, 2007 at 10:32 am

    If you’re going to do a lot of this you’ll save yourself loads of time if you get yourself a copy of Paint Shop Pro. It has a Picture Framing tool. You can add stock frames by Insert


    While I can’t speak for Gill’s preferences regarding Paint Shop Pro, I can attest to the fact that PSP is nice for personal projects. However, from a commercial business standpoint, Adobe products are better.

    Graphic programs such as Fireworks, Illustrator CS, Pagemaker, and Photoshop are much more flexible in their “usability and interchangeability” regarding other Adobe products and graphic designs implementation.

    Why I say this…

    I run a commercial printing business for over 10 years and any print project that is submitted using anything other than an Adobe product, will need to be typeset, again, in -house simply because the other graphic programs don’t output to film as well as Adobe layouts do. And… from the cost factor position, most small business owners would prefer to get their printing job done with the least amount of cost incurred. Plus, Adobe products are used by 97% of the service bureaus and print shops alike.

    Now, I realize Mike wasn’t preparing these wood frames for printing – but rather for a web design. >:) Even so, it’s still best to use a graphic program that will provide greater flexibility all-around should the need arise to print postcards for advertisements, display boards for seminars, or anything else along that reign of thought. Paint Shop Pro and other personal graphic programs just don’t measure up to Adobe products, plain and simple.

    I do realize that the Adobe product line is much more expensive and not as easily affordable by most, but I have learned that it’s best not to cut corners on certain “tools” used in our businesses. Add to this that I am a commercial printer, my duty is to inform clients where they can save money on their business printing projects even if offering this help means less profit for me.

    That’s my two-cents anyway. :)

    To your graphic design success,
    Bonnie Gean

  8. Photoshop Problem Solved - Thanks to Mike Cherim » 1955 » Accessible Website Design responds:
    Posted: May 20th, 2007 at 8:19 am

    […] I learned a terrific new Photoshop technique today from my friend Mike Cherim over at Mike demonstrated how to make a simulated wooden picture frame, and my attempt at doing so is shown in the image to the right. […]

  9. Jim Larson responds:
    Posted: June 3rd, 2007 at 10:33 pm

    I would like to know where I can buy the wood to make a picture frame. I have the tools and experience to make this sort of item, but don’t knwo where to find the wood.

  10. Toni responds:
    Posted: June 25th, 2007 at 7:25 am

    I make my own design of wooden picture frames :) :) :) :) :) :) :) :)

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.