Give Images Polaroid Style Treatmeant

May
20

7 Comments - LEAVE A COMMENT

I’m a big fan of polaroid’s. I love the fact that you can snap a photo and the camera will spit out a photo for you instantly. I love the style so much in the new version of CSSgirl (to be released within the next two weeks!!!) has incorporated their style in the new design. I thought I’d share how I went about creating the image and the HTML/CSS behind it!

First, you will need to decide what size you want your polaroid images to be. I’ve decided on a simple 100×100 space for the actual image. If you want your images bigger/smaller just increase your polaroid size as needed. Create a New Document (CTRL + N) with a height and width of 100px.

Next, fill the entire document with black.

Now, right click on the title bar of the document so the drop down appears and select “Canvas Size”. A window will pop up – first click on the arrow that points up. Now for height fill in 130.

canvas-size.jpg

Your document will add the 30 pixels to the bottom of the image. Next, right-click the title bar again and select “Canvas Size” again. This time just fill in the width as 120 and click “OK”.

canvas-size2.jpg

Ok, once more! When the Canvas Size window is opened this time click the bottom arrow, and fill in 140 for the height. You will now have 10px added to the top of the image.

canvas-size3.jpg

Next, on your layers palette CTRL + Click Layer 1, which will have just your black square on it. When you do this the black square will become selected.

select-black.jpg

Now, press CTRL + SHIFT + I. This will inverse your selection so instead of your black square being selected the area surrounding it will become selected. Now, press CTRL + SHIFT + N. This will create a new layer, which we will use the paint bucket and fill with white.

fill-white.jpg

Great! So we are almost done. I like my polaroid images to have a little bit of “realistic” feel to them, so I’m going to add some shadowing. You will need to drag Layer 2 (our white layer) beneath Layer 1 (black fill).

move-layer2.jpg

Next, double click on Layer 1, the black fill layer so that the layer styles window pops up. Choose “Outer Glow” and set the blend mode to “Multiply”. Then click on the color box and change it to black (#000000). Take the Opacity down to about 30%, than click ok. It’s a very subtle change, but I think it gives it a better look.
layer-styles.jpg

One last step – first, I create another new layer CTRL + SHIFT + N. Then I moved the new layer beneath the layers that we already had. Next, fill that layer with whatever background color you’re polaroid style images will be resting on. I’m using a white background. Now, right click the title bar and choose “Canvas Size”. Add 10px to both the height and width – you will end up with a width of 130 and a height of 150.

Now, double click layer 2 (the white frame layer). Your layer styles window will pop up. Next, click on “drop shadow”. Take the opacity down to 30% and change the angle to 85 degrees. Next change the distance to 2px and the size to 4px. If you are using a background color other than white you will need to adjust these things as neccessary.

dropshadow.jpg

Next, click on stroke. Make sure the size is only 1px. Now click the color box and change the value to “#f8f7f7”.

Ok, so if you want to do some extra shadowing or styles you can have at it. Once you have it looking the way you want, save the images (CTRL + SHIFT + ALT + S). Save it as a .gif.

You can also download the .psd or .gif file.

So here is our finished product:

polaroid.gif

Now we need to write the CSS/HTML to have the images we choose use this background. It’s very simple. Choose the 100x100px image you would like to have use the polaroid style.

Here is the CSS:

img.polaroid {
	padding:10px 10px 30px 10px;
	background:#fff url(polaroid.gif) no-repeat;
	}

And the HTML:

<img class="kids.jpg" alt="My three babies!" />

Here is how it will look:

We can also go a bit fancier by adding a caption to the polariod by changing up our CSS/HTML a little:

.polaroid {
	width:130px;
	height:150px;
	background:url(polaroid.gif) no-repeat;
	color:#000;
	font:11px 'trebuchet ms', arial, sans-serif;
	}
	
.polaroid img {
	padding:15px 15px 0 15px;
	}		
	
.polaroid p {
	margin:0;
	padding:0;
	margin:0 15px 0 15px;
	}

And the HTML:

<div class="polaroid">
		<img src="kids.jpg" alt="My babies!" /><br />
		My babies on Easter 2008.
</div>

And the result:

My babies!

Easter 2008.

What’s really great about this is that with just those few simple styles you can use this style on a whole gallery. Or for anything. For example on iheartswitch.com for the archives section I used a similar method to have the archive image and short description appear.

Jump to Comments

7 Responses to Give Images Polaroid Style Treatmeant

  1. Casey says:

    Wow–I would have never thought to use the polaroid frame as an image background; I usually apply it before I save/upload the image. Fantastic tutorial–I’m inspired! :)

  2. Lindsey says:

    Yes, this makes it so much easier. This way you only have to resize your image and don’t have to combine it with the polaroid background each time. Very much a time saver. Great for gallery styling too. Thanks for reading :)

  3. htl says:

    I think you meant
    Cheers! :)

  4. […] I’m a big fan of polaroid’s. I love the fact that you can snap a photo and the camera will spit out a photo for you instantly. I love the style so much in the new version of CSSgirl (to be released within the next two weeks!!!) has incorporated their style in the new design. I thought I’d share how I went about creating the image and the HTML/CSS behind it! (more…) […]

  5. ??????? says:

    ????? ??? ???????????, ???????? ????.

  6. Andrea says:

    I hate to say this but I think you forgot something in your code… the first HTML example
    class=”kids.jpg”
    should be
    class=”polaroid” src=”kids.jpg”

    Hopefully I will use this ‘look’ for a “Photo Proofs” for clients so they can write the captions on-line. Should look good once I get my head around what I really want to do.

    Thanks for a great place for some nice and simple PhotoShop steps. I only know the basics but have done well for a number of years. Thanks for presenting it so I can even understand the PhotoShop part.

    P.S. I just discovered your site yesterday and I’m reading a lot of it and my projects are ‘waiting’… I best stop this for now.

    TTFN… AjK

  7. I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

Leave a Reply

Your email address will not be published. Required fields are marked *