Print

How To >> Browse Articles >> GIMP

Rate

Create a Web 2.0 Style Button Using GIMP

Create a Web 2.0 Style Button Using GIMP

Kevin Bibo

1. Create a new sub-folder called “originals” in your “beta_images” folder.

PART 1: CREATE THE IMAGE

1. Open The Gimp

2. Select File>New (Ctrl+N)

3. In the Create a New Image dialogue box set:

a. Width: 110 pixels

b. Height: 55pixels

c. Under the Advanced Options

i. 72 ppi

ii. Colorspace: RGB color

iii. Fill with: Transparency

4. Click OK.

5. File>Save As… (Shift+Ctrl+S) name the file “button1.xcf.” Save into your Documents>originals folder.

PART 2: THE BUTTON

1. Zoom to 400%

2. Select the New Layer button in the Layers palette. Name this Layer “Button”. Set the Layer Fill Type to Transparency.

3. Click the Rectangular Marquee tool (Ctrl+M).

4. Select a rectangle selection with the height and width of the button you wish to create (slightly smaller than the canvas and closer to the top then the bottom and the left then the right of the canvas).

5. Click Select>Rounded Rectangle. Set the Radius to 50. Click OK.

6. Click the Paintbucket tool (K) and fill the selection with a web palette color (anything bright will do fine). Or you can click on the foreground color and type #f48f35 next to HTML Notation in the Change Foreground Color dialogue box.

7. Deselect (Shift+Ctrl+A)

8. Save (Ctrl+S)

+PART 3: HIGHLIGHT+

1. Select the New Layer button and create a new layer. Name the new layer Gradient. Set the Layer Fill Type to Transparency.

2. Click the Rectangular Marquee tool (Ctrl+M).

3. Select a smaller rounded rectangle selection inside this rectangle towards the top. Use the same methods as described above.

4. Select the Gradient Tool (G). Select FG to Transparent for the gradient.

5. Set the foreground color to White.

6. Hide your selected area (Ctrl+H)

7. Drag your gradient tool from the top to the bottom of the selected area.

8. Deselect (Shift+Ctrl+A)

9. Save (Ctrl+S)

PART 4: TEXT

1. Set the foreground color to White.

2. Select the Text tool (T) and type the word “HOME” using any 20-point font.

3. Use the Move tool (V) to move the layer into position.

4. You may have to tweak the transparency of the layers to make it look perfect.

5. Save (Ctrl+S)

PART 5: SHADOW

1. Set the foreground color to #f48f35.

2. Select the Button layer to make it the active layer.

3. Select Filter>Shadows>Drop Shadow.

4. In the Script-Fu: Drop-Shadow dialogue box set:

a. Offset X: 2

b. Offset Y: 2

c. Blur radius: 15

d. Opacity: 80

5. Click OK.

6. Save (Ctrl+S)

PART 6: SAVE FOR THE WEB.

1. Select the Background Layer.

2. Select Layers>Mask>Add Layer Mask… At the Add Layer Mask dialogue box select White (full opacity). Click OK.

3. Select File>Save As… (Shift+Ctrl+S) and name the file home1.png, into the Documents>beta_images folder. It’s important to add the .png extension.

4. At the Confirm Save dialogue box click Confirm.

5. At the Export File dialogue box click Export.

6. At the Save as PNG dialogue box deselect Save background color. Click OK.

7. Now open home1.png in a browser window to check your work.

8. You can return to Part 4 to add different text for different buttons. Just make sure you use a different button name when you save.


Find the right campus or online art or design program for you!