I’ve recently made a few minor visual changes to my blog if you’ve noticed. I was inspired by the makepovertyhistory.org’s strap in several blogs out there and I decided to make myself one. The final product as you can see, is on the upper left hand corner of this page.

The only tools you’ll need is Photoshop and some CSS knowledge. Let me show you how it’s done, it’s easy and everyone can do it.

In Photoshop, open a new document and name is “Stamp”, make its width and height both 300 pixels, follow the parameters as follow.

I’m gonna make the stamp white. So, select White as the foreground color.

Next, select the Custom Shape Tool.

Choose the spiky edged circle in the list of custom shapes.

After that, create the shape by holding down the “Shift” key and drag the mouse along the workspace. Don’t make it too big cause we’ll need some space to put some other things in later…

In the Layers window, right click on the shape layer and click “Rasterize Vector Mask”

Next, create a new layer beneath the Shape layer.

Flood the layer with whatever dark color that you may like as this is to make the white colored shape standout and easier to work with. I flooded it with #FF9B00.

It’s time to play around with the Stamp. Right click on the “Shape 1″ layer and click on Blending Options.

I’ve set the Drop Shadow’s parameters as shown in the image above.

I need some 3Dism look to the stamp, so I checked Bevel and Emboss and set the parameters as shown above.

Remember to change the Gloss Contour as well (pick the contour as shown above).

You should have something like this after the blends.

Next off, I created another layer in the middle of the 2 layers.

It’ll be a type layer. I chose Arial as the font face with 400pt. What I need to make is a white strap to be place behind the stamp. Type in 2-3 underlines ( ___ ), and that should be able to do the job.

Then, rasterize the type layer that you’ve just made.

Make sure that the white strap is behind the stamp. Also, centralize all the layers in an order manner.

Now that you’ve created the base of the stamp, you can start putting your name, your logo, photos, just about anything you want onto the stamp. This is what I did.

Create a new layer above all layers.

Set the type parameters as these.

I’ll just use “Award” as this will be a stamp for all Awards. Up to this point, the image is ready to be used. But as for my case, I’m trying to put it on my blog, so I needed more modifications.

I’m gonna put the stamp on the left hand corner of my website, so I need to tilt it a bit to make it look like those classic tilted stamps.

Click on Image > Rotate Canvas > Arbitrary.

I’ll tilted it 40 degrees counter-clockwise as I need to put it on the upper left hand corner. If you chose to put it on the upper right hand corner instead, rotate it 40 degree clockwise.

Select the area and make sure that the white strap is perfect and not cut-off. Then, crop the selection. Select Image > Crop.

The outcome would look like this.

If you need a transparent background, like I do, just delete the orange background in Layer 1 and save it as .GIF with transparency.

Now, the image is done. It’s time to move on to the programming part.

Copy and paste this line into your CSS file.

img.logo {
position:absolute; top: 0px; left: 0px;
}

And insert this line in the BODY part of the page where you want the stamp to appear.

<a href="http://www.xyz.com"><img src="http://www.xyz.com/where/yourimageis/stamp.gif" class="logo" /></a>

Hola! It’s done. And you should see something like this (I created a different stamp for my own blog). I do hope that you’ve enjoyed trying this tutorial.