Create soft glassy buttons
This tutorials shows you how to create a soft and glassy / glossy button.
This article has been written using GIMP 2.3.14.
It's divided into 14 steps and takes about
15 min to complete for an average user. 35179 times read so far.
Category: Buttons, icons, web, required skill:
13 comments have been posted so far.
Available in other languages:
- Soft glassy Buttons (de)
-
1
Create a new file: 150x35 px. White background. Activate the gradient-tool (L). Now choose #005a71 as primary (foreground) color. Use #00eaff as background-color. Drag the gradient from inside the upper edge of the image to the bottom: cname the layer: "Gradient". I named it "Farbverlauf" which is the german word for gradient.
Click to enlarge -
2
Create a new transparent layer. Name it "Glass".
Choose white as foreground color. In the preferences of the gradient-tool use the drop-down and choose the "Foreground to Transparent"-gradient (the 4th one). Make a gradient again on this layer from top to bottom.
Click to enlarge -
3
Take the Rectangle Selection-Tool and make a new selection starting from the bottom left as seen on the image below.
Click to enlarge -
4
Cut this part by pressing DEL or (CTRL+K if you still use GIMP 2.2).
- Selection / None to deselect all.
Click to enlarge -
5
Next we create a small little border. Add a new layer, fill it totally black. Name it "Border" or "Rahmen" as i did in the picture.
Click to enlarge -
6
Press CTRL+A to select all, then go to SELECTION / SHRINK: 1px.
Remove the selected part and a border should remain.
Click to enlarge -
7
Add a new layer again (transparent). Name it "Desaturate" (i called it "entfärben").
Now activate the Gradient-Tool again. Make sure the "Foreground to Transparent"-Option is still selected in the preferences.
Use black as foreground-color. Drag the gradient again from top to bottom, but this time a bit below the bottom edge/border of the image (into the gray space).
Click to enlarge -
8
On the same layer do the same gradient but from right to left, again a little bit into the gray space of the left image border.
At the end only little blue to the bottom left should shine through.
Click to enlarge -
9
Now press CTRL+L to view the layers dialog or go to Dialog / Layers. Set the layers mode to "Saturate" - in the image its called "Sättigung".
This mode makes all parts of the layers below gray (all parts that are filled with the black on this layer).
Click to enlarge -
10
The button should look like this now:
Click to enlarge -
11
Now take the text-tool and write any text to the layer. Move the text to the left corner.
The text layer has to be below the black "Saturate"-layer.
Activate the "Border"-layer and set the transparency of this layer to 20%.
Click to enlarge -
12
Now we're making the whole button a little nicer.
- Edit / Copy visible
- Edit / Paste
Then press the add layer button to get the pasted on a new layer.
Click to enlarge -
13
- Colors / Brightness & Contrast: -20 / +30
Click to enlarge -
14
You're done ;) If you want to test some other colors do it the fast way ->
- Add layer
- Fill with your preferred color
- set Layer mode to "Color".
A little tip: The buttons look best on white background with a very slight black shadow.
Click to enlarge
This article is licensed under the following license: Attribution-Noncommercial 3.0 Austria
Links (pingbacks)
Comments
Post your own comments, questions or hints here. The author and other users will see your posting and can reply to it. Of course, you can also ask in the chat.
Comments are chronologically arranged.