Let me kick this post off by telling you that, thanks to this beautiful treasury which includes my photo, “Sea Jewels No. 3,”  I currently have the song, “Set Adrift on Memory Bliss” by PM Dawn stuck in my head. Now, that’s not  bad thing, it’s actually one of my all time favorite 90s songs but, I tell  you this because it is quite difficult to write a blog post while simultaneously  attempting to 1. sing lyrics that you can’t completely remember but feel you can “fill in” by humming melodically and 2. dancing while sitting.  I just had to put that out there… now that you have that visual, on to the post.

Today’s Photo of the Day is, “The Unknown” named such because, unlike my other photographs of  Parisian doors, which were named after their street number, this door had absolutely no markings: no street number, no sign saying it was a business, nothing. It loomed over the street in all it’s grandeur which it’s beautiful wrought iron scroll work and carvings but there was no telling if it was someone’s home or what went on on the other side. (and I think we’ve established that, when it comes to these doors, I’m extremely nosy and want to know)

For the room photo, I opted to frame it up in a simple black frame with a textured linen matting. Want to know how? Check out the tutorial on using vector masks to create a frame and mat after the jump…

Last week, I showed you how to create a frame and beveled mat just by using a simple solid color fill and some layer styling. While you can go back and manipulate them somewhat, they aren’t as versatile as using the all powerful vector masks which is completely editable and, at the risk of sounding like a huge PS nerd, fun to play with.

A note- this tutorial is assuming basic Photoshop skills. While I try to be as detailed as possible, and use illustrations wherever I can, I do recommend learning the basics of Photoshop before trying it.  I used one of my photographs and a stock photo I purchased but this tutorial can be completed using any images you have on hand.

Step One- Pick your Background

For this tutorial I opted to use a stock photo (found on istockphoto.com) of a minimalist room with a single wooden chair and a beautiful blue wall (pssst… just a heads up, you can “paint that room” using Photoshop… I have a tutorial coming up on that in the next couple of days) and lovely wood floor. I am  going to “frame up” my photo “Bicyclette” to post on my Etsy site.

Step Two-  Pick a Size and Create the Frame/Mat

If you aren’t someone who organizes your layers (I admit, I’m bad at it) I highly recommend doing so when creating these frames. By using vector masks, you are creating editable layers that you can resize as much as you want until you get the frame and mat exactly where you want them. Because the layers end up looking very similar, I do recommend not following my lead and labeling your layers so that you know what you’re editing.

Once you decide where you want to place the frame, select your Rectangular Marquee tool and create a selection. Note- this is going to be your overall frame and matting so this selection represents the overall size of the frame itself.

For the purposes of this tutorial, so that you could more easily see my selection, I created a duplicate background layer and then  “dimmed” it  but you don’t actually need to do that.

Step Three- Create a Work Path

With your selection made, go to your Paths panel (if you don’t already have this open in your Workspace, select it from the Window menu along the top), click the drop down on the right side and choose, “Make Work Path.” It’s going to give you a dialogue box asking you to set your tolerance level. I always go with the lowest allowable setting of .5 and click Enter.

Your marching ants from your selection will go away and you will be left with a solid, very faint, work path that you will use to create your vector layer.

Step Four- Create Your Frame/Mat Vector Layer

All a vector mask does is allow you to select what will be hidden or revealed on a background without actually having to directly manipulate the background itself. In this case, the vector mask we just created, which will ultimately become the frame and mat, is hiding the background in the exact spot where we want to “hang” the frame. This vector mask can be moved, it can be re-sized, you can, and will, apply a layer style to it. The point is, by using vector masks you have more control over the final product and can edit without having to start from scratch.

At this point, you want to choose your mat color. The frame is simply going to be a stroke we add to the edges using layer styles. Now, in the case of “The Unknown” above I used a textured linen pattern (using a Pattern fill instead of a Solid Color fill)  to give the mat a bit of color and depth but, for the purposes of this tutorial, we’re just going to use a simple Solid Color Fill of white.

With your work path created, choose Solid Color from your adjustments panel and pick your color (if you already have your foreground color set to white, it’s going to default to that color) then hit Enter.  There you have it… your mat.

Remember what I’ve said in previous tutorials, the more dimension you add using your layer styling the more realistic this will look. If you were to hang a frame on a wall, it would cast a slight shadow so you want to do that here as well using Drop Shadow. At the same time, in the same Layer Styles dialogue box, we’ll create the frame using Stroke. Here are the settings I used for both.

Drop Shadow:

 

Frame Stroke:

For the frame, the higher the stroke pixels, the thicker the frame. Remember, this is always editable so, when you start to put your image in, if you feel you want a thicker frame, you can always double click on the layer style and increase the pixels. In this case, I started out with something relatively thin to create about a one and a half inch frame.

Step Five- Place the Image

Using a second vector mask, you’re going to “cut out” a spot in the mat for the image to be placed. Now, you’re not actually getting rid of any of the original solid color fill that you used to create the first layer, you’re simply using a vector mask to hide part of it to give the illusion of a matted photo.

Once again, I have created a duplicate layer and dimmed it so that you can easily see my vector selection however you would not do this when creating your own frame. Once you’ve decided how large of an opening you want for your photo, make a second selection within the first and follow the same steps as above for creating a path.

This time, however, choose a different fill color so that you can actually see the second vector mask. In this case, I selected a soft grey.

Once again, you’re going to want to use a Layer Style to add some dimension to the matting and, ultimately the image once it’s placed in the frame. If you think about a matted photograph, since the mat isn’t sitting flush with the photo, it’s actually on top of it, you will see a slight shadowing between the mat and the photo. We’re going to create that same effect here using some beveling.

You will use the setting that look best on your end, it’s completely subjective, however these are the settings I used:

Again, these settings are editable so, once you place your photograph in the mat, if you feel you need to change them, you can always do so by clicking on that layer style in the layers panel.

Now you’re ready to place the photo!

Step Six- Place the Photograph in the Mat

Photoshop makes this very simple. You can actually place the photo, and immediately manipulate it in to the mat using Free Transform without actually having to open the photo in a separate tab, drop and drag, etc. Ready?

Go to File> Place and once you click, it will open your Windows Explorer menu so that you can select the photo you want to pull in.

This automatically creates a layer and chooses “Free Transform” so that you can work the photo in to the mat. Let’s go ahead and do that…

Once you have set it in the mat where you want it, click Enter to close the Free Transform option. At this point, your photo is actually sitting on top of the last vector mask you created. We want to create a clipping mask to set it behind the mat and, therefore, applying the shadow we created using beveling to the sides of the photograph.

You can do this either by using the shortcut Ctrl/Alt/G on your keyboard or by holding down the Alt key and hovering over the line between the two layers until you see the clipping mask icon. Once you do this, the photo should be set behind the last vector layer and, if needed, you can do another Free Transform on the photo to re-size. Just like the vector layers, this layer is editable so you can move it, re-size it, whatever you need to do to get it just right.

And there you have it a framed photo complete with mat and dimension thanks to vector masks. You can also use vector masks to create simulated canvas wraps such as these, or this one… the possibilities are endless.

I hope you enjoyed the tutorial and have fun paying around with vector masks. If you try it and have any questions, please don’t hesitate to ask!

*tracey*