Creating a Web Button in Gimp

Creating a Web Button in Gimp

By   13:46:00

 This is quite a comprehensive tutorial on how to create a web button in Gimp, and since there are many styles of web buttons, I will first show how to create the standard shiny Web2 button, then a simple matt effect button. I will then use the matt web button to show how to make a rollover button using CSS rather than javascript.

Creating a Shiny Web 2. Button

1/ Open Gimp and create a new transparent layer to a size that suits the button for your website. The buttons here are large to make the images clearer for explaination purposes.

2/ Choose the Rectangle Select Tool from the Toolbox then draw out the shape of your button. Make sure the rounded corners option has been selected and you have added the size of the curves for your button. Something between 15-20 should be good.

3/Once you have drawn you button use the Bucket Fill tool to fill it with colour, then add another transparent layer.

4/ From the Select menu click on Shrink and choose a setting of around 2, then click OK. This will create a clean edge for the button.

Adding Gradients

5/ Now select the gradient tool. With white as the foreground colour select the FG to Transparency gradient. Using the image below as a guide, add the gradient to the active layer. You can tweak the opacity of the gradient if it looks too stark.

6/Create a new layer and select the Rectangle Select tool again. In the upper half of the button draw a rectangle as in the image above. Now fill it with same gradient you used earlier so the new selection looks similar to the image below.

7/ Add another layer and using either the Paintbrush or Pencil tool draw a straight line towards the bottom of the button, using a size of brush that looks natural for your button. Now select Filters > Blur > Gaussian Blur and in the window that opens add a blur of around 12. Now click OK and your button should look something like the image below.

Adding Text

8/ Select the Text icon from the Toolbox and click on the button image. In the window that opens type in the text for your button, With the text window still open, you can select the size, font and color of your text in the Toolbox panel. When you are happy with your text click OK.

9/ To give the text more definition you can add some shadowing. Select Filters > Light and Shadow > Drop Shadow. In the window that opens set the X and Y offsets to 0, and the blur radius to around 10, then click OK.

10/ To add more definition to the button, make the original button layer the active layer and then select Drop Shadow from Filters again. With the same settings for the text click OK.

Creating a Matt Button

Fashions change in web design and matt buttons are appearing more and more. They are simpler to make than shiny buttons too.

1/ Follows steps one to four above.

2/ using the Gradient tool with the same settings as above, add a gradient that suits your button. You can tweak the opacity of the gradient as well as giving it a Gaussian blur. However, if you do add a Gaussian blur as well as a drop shadow to the button it will tend to have an out of focus appearance. One or other of the effects is advisable.

Creating Rollover Buttons with CSS

To create your rollover button you will need to create an image of two buttons with one placed directly underneath the other. The lower one will be what is shown when a cursor hovers over the button.
The purpose of stacking the buttons as one image is that it helps to avoid flickering when the cursor is placed over it, as well as keeping down the number of images you need to add to your website.

HTML code for the Button

The HTML for the button is one simple line of code:

<a id="wugallery" href="#" title="Wu Gallery"><span>Wu Gallery</span></a> 

The link is given an id so that it can be styled with CSS. When creating your own button, you will naturally give it its own id, and add your own title. The text between the span tags is what search bots will see, but will be hidden in regular browsers.

The CSS code

#wugallery{
  display: block;
  width: 100px;
  height: 25px;
  background: url("wugallery.gif") no-repeat 0 0;
}

#wugallery:hover {
  background-position: 0 -25px;
}

#wugallery span {
  display: none;
}

The width element in the code should be the same width as the buttons, but the height is half the image of the two combined buttons. The URL segment is the path to your button image. Run your cursor over the button below to see how it works in practice.


That is essentially all there is to creating rollover buttons with CSS. To create more than one button is simply a matter of giving each button a unique id in both the HTML and CSS code, as well as changing the URL path for each button.

Read More

Balloon Makers Kit

Balloon Makers Kit

By   07:40:00

The Balloon Makers Kit is for people in Second Life who want to quickly create and customise their own balloons with either images or text (or both). It comprises of a balloon sculpty map, as well as some example balloons and textures. This means the balloons can be used straight out of the box or can be personalised.

You can collect your free Balloon Makers Kit from the Marketplace.

Adding Your Own Text or Images

To make it easier for creators to customise their balloons  I have made available a Gimp file that includes the balloon textures and shadow maps. This means text or images and even your own textures can easily be added to the balloons.

The steps below describe how to use this file, and will provide a newcomer to Gimp with another easy to follow tutorial which covers a number of useful features that can be applied to other projects .

The first thing to do is download the Gimp Balloon Textures file. Use the free download option. Once the file is downloaded, double click on it to open it. This assumes you have Gimp installed on your PC.

Adding Text to a Balloon

Adding Text to a balloon has been made very easy.  In the Layer Dialogue window click on the 'Text goes here' layer, then select the text option from the Toolbox window (Text is the capital A).

Now in the image window click where you see the text, delete it by pressing backspace on your keyboard, and replace it with your own text. Go back to the Layers window and turn off the Drop Shadow layer by clicking on the eye icon.

Making sure the text layer is still the active layer, select Filters > Light and Shadow > Drop Shadow. A new Window will open where you can add a subtle shadow to the text to make it more distinct. Change the settings to match those below then click OK.

Back in the Layers window again, right click on the text later and from the drop down menu select 'Merge Down'. This will merge the text with the drop shadow layer.

In the image window, select Layer > Autocrop Layer. This will make it easier to adjust the position of the text if you need to. To do this in the Toolbox window select the move option ( a four headed arrow icon), then make sure 'Move the active layer' option is active. You can find this below the icons in the Toolbox.

With the text layer still active, in the image window hold down the right mouse button over the text and you will be able to drag it to a new position. When you are happy with its placement let go of the mouse button.

Changing the Balloon Colour

Looking at the different layers, you'll see there are a number of options for balloon colours. Simply activate or de-activate each layer by clicking on the eye icons to change the background colour.

You can also add your own colours. Make the yellow layer active by clicking on it. Create a new layer by clicking on the icon to the far left below the layers window,(the icon looks like a piece of paper with a folded top right corner).

With the new layer the active layer, go to the Toolbox panel and click on the black square below the tool icons. This will bring up a colour selector window, (see below).

Simply play with this window until you get a colour you like. Once you've finished, at the top of the layers window activate the 'Balloon Shading' layer to add highlights and shading to the colour.

Saving Your Balloon Texture

To save your balloon texture go to the Layers panel, right click on the top most layer and select 'Flatten' from the drop down menu.

In the image window select File > Export. In the window that opens, give your texture a name and file extention. PNG is probably the best to use for Second Life Textures:

Texture-name.png

 Now your balloon texture is ready to be uploaded and added to your balloon in Second Life.

Adding Images or Your Own Texture to a Balloon

If you want to give the entire balloon a new texture, make sure the image is 1024 X 1024. Add the image by selecting File > Open as Layers. The texture will now be above all the other textures, so move it below the shading layer by clicking on the green down arrow thats below the layers window. Activate the shading layer to add highlights to your texture, then follow the steps above to export the texture.

You can also add an image and use a colour layer as background. Import the image as above. The layer can be resized by selecting Layer > Scale layer which will open a new window. Choose a size that suits the balloon. Click the Scale button to resize the image layer and to close the scale window.

If the image is small you may want it to appear twice, on opposite parts of the balloon. To do this, select Layer> Autocrop Layer. This will make the image layer easier to position. Below the Layers window click on the icon third from the right. This will create a copy of the image layer.

To make sure the images are aligned on the balloon accurately a guide line can be used. Click on the Move icon in the Toolbox window and make sure 'Pick a layer or guide' is selected. From the bottom (or top) edge of the image window drag your cursor to create a guide line. position it on the bottom edge of the image. Now when you move the image copy it will snap to the guideline.

In the Layers window, click on the layer that is the copied image and move it into position. You may need to adjust the position of both images so they are spaced correctly.

When you are happy with the placement of both images the texture is ready to be exported then uploaded into Second Life.

As you can see, using the Balloon Makers Kit is quite quick and easy, and although this tutorial may seem involved, a lot of the information is aimed at those unfamiliar with Gimp. Each step taken by itself is hopefully easy to follow.

Read More