Derek Semmler dot com - money, motorcycles and cars (with a little bit of everything else)

After seeing that Tyler Ingram recently discussed the idea of creating a simple photo frame in Photoshop, I decided to bring this post to life as it has been sitting in Draft status for quite some time.

The basic idea here is to “dress up” our photos a little bit when posting them on our website or blog. Sometimes a plain photo just looks, well, plain!

Here is an example of a plain photo, which was taken when we went to a Chicago White Sox game earlier this week. It doesn’t look bad, it just looks a little boring. To me, plain photos like this always look like they were just slapped on the page without any further consideration.

Since we don’t want our images to come across as boring, we need to add a little flair (think of the movie Office Space) to make the image “pop” a little bit.

Compare the image above with the following image, which has a small border added around the entire image. While the border isn’t flashy, it does make the image stand out a little more and gives it a nice finishing touch.

The above method is what has typically been used on this blog when adding an image to a post. To create that frame around the image, all we need to do is create a simple CSS class that we will then apply to the image.

1
2
3
4
5

img.imgBox {
	padding: 5px;
	border: 1px solid #AABAC5;
	background-color: #EEE;
	}

To apply the border to the image, we would simply specify the class in our image tag like this:

1

<img class="imgBox" src="..." />

Now, we could stop there and have a nice looking image that has just enough of a frame to make the image stand out.

But that wouldn’t be any fun now, would it?

Using the example that Tyler had shared on his blog, we will kick things up a notch and add a nice black frame around the image and also add a slight white border around the image to give it some separation from the frame. The frame and border will add a really nice touch and look like this when we are done:

Doesn’t that look great?

Tyler created a frame just like this by editing the image in Photoshop, however that means that we need to open each image in Photoshop and manually add the border as part of the image. While it is possible to create an action in Photoshop to streamline this process, it is not very time efficient.

That was when the idea came to me.

Rather than make the frame part of each image in Photoshop, why not make a frame that can be used over and over with the help of a little CSS?

Taking the idea a little further, we can create three or four variations of the frame to accommodate the most common size images that are used within blog posts.

As an example, I have created the following frame that can be used for images that are resized to an approximate size of 500 pixels wide by 335 pixels high. The frame adds 15 pixels to each side and also has included a small notation of my domain at the bottom.

With this pre-made frame image, we can now use a little CSS magic to make that the background image for any image to really make it “pop” on the page.

In order to create this frame around the image, we need to create a new CSS class in our stylesheet that will define the image as a background with a padding of 15 pixels to each side.

1
2
3
4

img.imgPop {
        padding:15px;
        background: url(images/css_image_frame.jpg) no-repeat 0 0;
        }

Then, just like before, we simply need to apply this CSS class to our image tag and we have a beautifully framed image.

1

<img class="imgPop" src="..." />

Obviously this method could be cumbersome if all of the images are different sizes. If that is the case, we could simply slice the frame image up into multiple images and then use CSS to “build” the frame around the image. While this would clearly be the most efficient method, as it would work for any size image, many times the images being used are approximately the same size so a pre-made frame will work well.

Hope you enjoyed this little tutorial and feel free to ask any questions!