Print

How To >> Browse Articles >> GIMP

+1

Create an Aqua Button Using GIMP

Create an Aqua Button Using GIMP

Kevin Bibo

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 “button2.xcf” and save into your Documents>originals folder.

PART 2: THE BUTTON

1. Zoom to 400%

2. Create a new layer. Name it Color. Set the Layer Fill Type to Transparency.

3. Make a selection for the button with the Rectangular Marquee tool (M)

4. Go Select > Rounded Rectangle and set it to 80%.

5. Change the foreground color to #4657B0 and the background color to #86C5EA

6. Select the Gradient tool (G) and click and drag (while holding CTRL) from top to bottom of the selection.

7. Save (Ctrl+S)

PART 3: SHADOW

1. Click the New Layer button in the Layers palette to create a new layer. Name this layer Shadow with a Layer Fill Type of Transparency,

2. Set the foreground color to Black.

3. Select the Paintbucket tool (K) and fill the Shadow Layer with black.

4. Deselect (Ctrl+Shift+A)

5. Select Filters > Blur > Gaussian Blur, set the Blur Radius to 5px for both horizontal and vertical and click OK.

6. Move the Shadow layer below the Color layer in the layer stack .

7. Select the Move tool (V) and press the down arrow twice to move the shadow down by 2px.

8. Command () click on the Color layer in the layer stack and select “Alpha to Selection”

PART 4: HIGHLIGHT

1. Click on the New Layer button in the Layers Palette to create a new layer. Name the new layer “Highlight” with a Layer Fill Type of Transparency. Move this layer to the top of the stacking order.

2. Select the Rectangular Marquee tool (M) and change the selection Mode: to Subtract from current selection .

3. Select the lower half of the button. You should now have a slim selection across the top of the button.

4. Select the Gradient tool (G), change the gradient type to “FG to Transparent”.

5. Press D then X to reset and swap the colors so that white is the foreground color then click and drag from top to bottom of the button.

6. Click and drag downward from the top ruler in the image and place the guide at the bottom of the highlight (about the horizontal middle of the image).

7. Drag 2 guides from the left ruler and set them up just inside the left and right arches in the rectangle:

8. Click the Change Perspective of the layer or selection tool (Shift+P). In the Perspective palette select Supersampling and change Interpolation to Cubic (Best).

9. Click once on the image; you will now see 4 handles at each corner of the selection. Move the bottom handles where the guides cross each other. Click Transform. There will be an odd looking selection.

10. Click the Anchor button in the layers window .

11. Select the Move tool (V) and lower the highlight by 1px by pressing the down arrow once.

12. In the Layer Palette lower the Highlight layer opacity to 80%.

13. Save (Ctrl+S)

PART 5: TEXT

1. Make sure that the Highlight layer is at the top of the layer stack and active.

2. Set the foreground color to White.

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

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

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

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 home2.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 home2.png in a browser window to check your work.

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

Create an Animated Gif Using Gimp


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