Wednesday, September 15, 2010

Hello Folks! - How To Make Blog Frames Tutorial - Plus PSD Download!

It's been awhile since I've posted here guys! But here I am, posting again and thanks to another photographer who asked me about the frames on my photography blogsite I'm going to do a quick tutorial on making your own custom frames to fit your style!

Most photographers I know have pretty frames to display their images on their blog and I love how they make the images stand out so I had to figure out how to make some for myself. So today we'll make the simple photo border frame you can see on my site.

First, I needed to know what size I was going to use. I didn't want to resize my images when posting them to my blog so I had to find a size that worked for me. I like my photos displayed BIG so I created a new file in photoshop using the dimensions: 1050 x 700 px and 72 ppi since this is for internet use.

I set my background to match the color of the background in my blog so the frames will fit seamlessly when I post.

The frames will be on a separate layer just in case I decide to change the background color of my blog. This way I wont have to re-create frames when my mood changes.

So, create a new layer call it "frame layer" and fill it with white. This is going to be your frame. Resize it to where you'd like it. Mine is centered and leaves slightly more room on either side for shadowing.

Now duplicate your frame layer twice. Name one Left and one Right. You can turn off your frame layer and your left layer. We'll work on right first.

Next, we'll add a drop shadow. If you're new at this, just select your right layer and double click then select drop shadow in the layer styles box or go to layer>layer style>drop shadow.

You'll use these settings:

Copy the layer style by right clicking on the right layer...

and right clicking on the left layer (you'll have to toggle your view of this layer) and pasting layer style.

Now you're probably thinking... why did she double the drop shadow on the same side? Well... photoshop wont let you change drop shadows individually. It only thinks you can have one light source. This irritated me for awhile when I tried this the first time, but I found a way around this. :)

You'll toggle your view off of the left layer and create a brand new transparent layer. Then you'll merge your right layer with your transparent layer by selecting both layers, right clicking and selecting merge layers (for all you newbies out there =])and toggle it off and forget about it for a minute.

Now toggle your view on your left layer again. Now you'll open up the layer styles box again and change your settings for your light direction using these settings.

Create another transparent layer and merge it with your left layer.

Now you have drop shadows going in two different directions.

Next you'll liquify (filter>liquify) and if you haven't done it before, well, you should learn how because I think it's one of photoshops most powerful tools.

I use a large brush to push the sides in toward the middle.

Toggle your frame layer on to check your progress. Liquify as needed.

Once you get it where you like, toggle your frame layer on again. You should have something that looks like this.

To create a box for creating clipping masks, I duplicate the frame layer and fill with black, and resize where I want my actual image. And for fun, I added some text.

You can create more boxes for using two verticals within the same frame and customize your frames with your watermark, etc. I keep all of mine in one psd file which I open and drag all my pre-resized images into. I just use clipping masks and move my watermark as needed per image. You can also take any frame or texture you find and use it as a frame. I've used funky or deckle borders to make a more vintage look. You can add things like tape or peel-backs or just about anything you'd like.

Oh, and I fully expect you to comment on this post and show me your creations. I love seeing your stuff too!


  1. Thank you, I will enjoy trying these out.

  2. Thanks for the great tutorial. Glad to have found your blog via

  3. Thank you Mel!! I used it tonight on my sunset blog post. Check it out! I love it. :)

  4. Mel, these are GREAT!!! I have a question for you though...... please email me