Payscroller - The Blog

Being a small startup, we are bootstrapping with our own funds right now, I basically wear the hat of a web designer as well as being the lead developer for PayScroll. I enjoyed having the absolute control of making every single pixel on the site and along the way, I became familiar with the best open-source graphic tool in the universe - GIMP. Of course, if you have the money, PhotoShop is usually the way to go. However, being an open-source fanatic, I gotta use GIMP.

Now, on to the tutorial. The tutorial is about making a “beta” banner that you see on many web 2.0 sites. And I am going to show you how using GIMP.

STEP 1
Make a new square image using say 125px x 125px. After that add a new layer, make the height the thickness of the banner and the width much longer than your image width, say 200px. Ok.. not too complicated right?

STEP 2
Next, you will need to rotate the new layer. And to do that you need to make sure the new layer is selected, then use the toolbar Layers -> Transform -> Arbitary Rotation. In the Rotate pop-up option, type -45 into the Angle field and click on Rotate.

STEP 3
This step is slightly more complicated, so follow closely, now you have a 45 degree banner and I am going to create a couple more layers to make some bordering effect. To do this, you need to select you banner layer. Then use tool icon and click on the white portion of your banner. You will see banner being highlighted. Use the toolbar Select -> Grow and put 2 pixels in the Grow Selection option. This will basically increase the selection by 2 px and then select the background layer. Copy and paste the selection as a new layer. As you can see, I filled mine with a light blue. Once done, add a shadow to the new layer by using toolbar Script-Fu -> Shadow -> Drop Shadow. Rearrange the layer so your banner is top.

STEP 4
Now you have your layers in place, it’s time to add some gradient love. This is important!, again you need to select the white color region of you banner, and then use the tool icon for filling gradient color. I used a green #6e9f0c. And just click the + pointer at the top of the border and hold and stretch the gradient line to past the bottom border. You can undo and retry different length and to get a feel and get the gradient right.

STEP 5
Once you are done with all the layers, it’s time to add some text, add a text using the T icon and once you are done. Rotate the text using the Arbitary rotation to -46 degree ( for some reason, using -45 did not align the text correctly maybe its just me.. it looks 1 px off to me ). Position your rotated text layer and add shadow to the rotated text layer. Remove the background layer, merge all the layers and save it as a GIF file. And there you have it! A web 2.0 beta banner using GIMP!

THE FINAL PRODUCT
Here’s a look at the final product. The CSS for this is really easy.

#release_tag {
background: url(/images/release_tag.gif) no-repeat top left;
width: 125px;
height: 125px;
position: absolute;
top : 0;
left: 0;
}

Trackback URI | Comments RSS