Create a Rockin Photo Frame and Collage

This entry was posted By Cubert on Sunday, April 18th, 2010 at 2:05 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

In the world of photography, you will often hear the term framing relating to the positing of the subject matter of an image. In today’s lesson, we take things more literally and create a graphical frame around the musician of our Tight Music website template to draw attention and emphasis so that we highlight the photo’s beauty and style. It also just looks really cool.

You can download the Tight Music Template with full PSD source files and sliced table free HTML pages for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products. Get a membership here or take a quick tour.

Step 1: Set Up Your Document

Firstly, create a new document, with the size of 1000px X 800px.

new

At the same time, gather some photos of your favorite musician. We’ve prepared 3 different angle photos of our artist.

model

Step 2: Trace Your Photo’s Supple Curves

We need to path out the artist from the background. I’m sure you know how to it by now. Just use the pen tool and path follow the model, and then copy it out and place it in your new document.

path

Step 3: Get Some Decorative Imagery

Okay, here we need to add some of the musical elements, like music notes, and some shapes to give a retro look, as well as some flowers. We developed ours in Illustrator (you can see the images in the last step), but you can just download some clipart or vectors to suit.

Step 4: Draw a Basic Box for Your Frame

Now, let’s create the basic block of our much talked about frame for the artist. However, before drawing it out, hide the layers with the artist to concentrate drawing on the frame first. Grab the rounded rectangle tool, use a radius of 50px, and draw a rounded corner box like below.

rouded

Step 5: Set Your Frame Width

Since we’re making a frame and not a solid block, we need to extract the center part of our rounded rectangle. To accomplish this, hold on to your CTRL key and click on the layer that has the rounded corner box. Next, under Select > Modify > Contract, set the pixel to 20 and press okay.

contract

Step 6: Delete the Middle of the Block

Now, you can see the selection is smaller than the rounded rectangle. To remove the excess area, hit the delete button. The basic frame is now in place, but we still need to add in some effects and patterns to make it more enticing.

step5

Step 7: Decorate Your Frame

Let’s add some patterns on the frame; I think a pretty cloud effect will suit our model selection – we downloaded this brush effect from Deviant.com. Before that, remember to lock the transparent pixels option.

brush

Here is what was used to get the effect below.

cloudeffect

Step 8: Add Dimension to Your Frame

Next, we need to add in some layer effect on the frame for the final touch up. Using some Bevel and Emboss effect will make the frame look a little more 3D. You can find the settings used below.

emboss

Step 9: Smooth as Satin

Before applying the above to the layer, there’s still another effect we need to add in, which is the Satin effect. This will give the frame a smooth and sharp sheen. Again the setting as below.

stin

Step 10: Let in Your Musician

Finally, we have the frame finished. Now, start making the header with the artist images that we pathed out earlier. First, we have the blue frame, and here we used the first pose of the artist image. Put her in the frame just like below.

plusvector

Step 11: Add in Your Vectors

Now, let’s add in some vectors to fill up the space. We added some nice flowers at the left corner, and as for the background, we drew a simple path.

plusvector

Step 12: Create Additional Frames

Now that we have one frame done, let’s do two more with different colors and different poses of our artist. We created two different size, one in orange and one in green, and put them side by side the main frame.

3frame

Step 13: Finishing Touches

Now frame is ready, and again, it’s time to fill it up. We’ll use the different poses and different vectors that we selected earlier. Doesn’t it look cool?

final