Beast-Blog.com
How to Make a Wooden Picture Frame

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.

Filed under Imagery & Graphics —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

PHP Contact Form v.2.0 Released »

Better SEO through Blog Post Titles »

Picture This »