J. Cornelius

I recently had someone ask me how I did the Polaroid-ish photos on the company 'About Us' page. The technique is quite simple so I thought I would outline it here for other curious minds.

For the About Us page we wanted the polaroids to be about 170 x 140 so I'll use those dimensions in this example.

Create the Polaroid image

First open Photoshop (or your favorite graphics editor) and create a new image 170px wide and 140px high with a white background. Select white as your foreground color. Then using the Rectangle Tool create a white rectangle starting at 10px right and 5px down from the top left corner and make it 148px wide and 120px tall. This will be the outer frame of the polaroid. Now add a bit of drop shadow using the style tools. Your settings should be like this

Now your image should look like this:

Next we'll make the inner frame of the rectangle. On a new layer, create another rectangle starting 14px right and 9px down from the top left corner of the image. Make this box 135px wide by 90px high. This will be where your photo goes.

Using the stroke style, add a 1px stroke with #CCCCCC as the color. ( Photoshop sometimes uses the style seetings from the previous layer so you may need to remove the drop shadow style from this layer)

Now your image should look like this:

Finally we'll add the shadow effect that the polaroid is lifting off the page. Make a new layer under just above the background layer and using the selection tool draw a rectangle just smaller than the outer frame of the polaroid and flood fill it with color #666666 - a medium grey. Then use the Distort Tool (Edit > Transform > Distort) to drag the lower right hand corner of the grey rectangle out and down a bit. Play with this until you think it looks right. Now go to Filter > Blur > Gaussian Blur and apply a 2px blur to this layer (you can play with this too if you like).

Now your image should look a lot like this:

If you are happy with what you made save it as a .png file and upload it to your Website. If not you can always download and use mine :)

Now choose the photo you want to use; crop, adjust and resize it to 135px wide by 90px high and upload it to your Website too.

Putting it in your page

Now the fun begins. I'll assume in the code below that you put these two images in a directory called (ahem) 'images'. You'll need to add the image in the page where you want it to be seen with the markup below:

Then add this bit of CSS to your .css file:

That's it, everything should work according to plan and you should see a wonderful polaroid-ized photo on your Website. Enjoy!