Web Hosting News

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.

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”.

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.

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.

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.

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).

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.

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.

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:

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:

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:

class="polaroid">
                src="kids.jpg" alt="My babies!" />

                My babies on Easter 2008.

And the result:

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.