In this tutorial I will show you how to create a very popular glossy web button with play symbol using GIMP 2.8. You can make it blue like I did or change the colour of the button even when it's ready. Also instead of play symbol, you can place any symbol you want in side this button.
If you don’t have GIMP yet, download it from here.
Glossy web button made in GIMP 2.8
Otherwise let’s start it now.
Open GIMP, create a new file by going to File / New / 500x400px / position Horizontal.
Create two Guides by going to Image / Guides / New Guides (by Percent) / Horizontal / 50. Now repeat the steps, but at this time choose Vertical / 50.
Activate Grid by going to View / Show Grid.
Activate snaps by going to View / Snap to Grid & View / Snap to Guides.
Create a new Transparent Layer by going to Layer / New Layer / Transparency.
Take Ellipse Select Tool, in Tools Options click on Fixed – Aspect Ratio and Expand from centre.
Make a circle as shown in Fig 1.
Fig. 1 Creating glossy web button in GIMP 2.8
Keeping the selection set your Foreground colour to Blue, I used #1d74e0 and Background colour to Black.
Take Blend Tool, in Tool Options select FG to BG (RGB) / Shape – Radial / activate Adaptive Supersampling, set it to 2, Threshold to 0.20.
Pull gradient from the centre of the selection to the bottom of the selection. You should have circle looking like in Fig 2. Keep the selection.
Fig. 2 Creating glossy web button in GIMP 2.8
Create a new Transparent Layer, set your Foreground colour to Blue #1d74e0 and fill the selection see Fig 3. Set this layer to Grain Merge. Keep the selection.
Fig. 3 Creating glossy web button in GIMP 2.8
Create another new Transparent Layer, set your Foreground colour to White, take Blend Tool, in Tool Options choose Gradient - FG to Transparent, Shape - Radial. Pull Gradient from the centre of the selection to the bottom of the selection, see result in Fig 4. Set this layer to Overlay.
Fig. 4 Creating glossy web button in GIMP 2.8
Go back to Layer with Black and Blue gradient and reduce Opacity to 77%. Your image should look like in Fig 5 now. Keep selection.
Fig. 5 Creating glossy web button in GIMP 2.8
Select background layer then create a new Transparent Layer, then set your Foreground colour to Grey #8d8c8c and Background colour to White.
Go to Select / Grow / 13px.
Take Blend Tool, in Tool Options set Gradient - FG to BG (RGB), Shape – Linear. Pull the gradient from top of the selection to the bottom of the selection. See Fig 6. Keep the selection.
Fig. 6 Creating glossy web button in GIMP 2.8
Go to Select / Grow / 18px.
Select background layer again then create a new Transparent Layer, set your Foreground colour to almost White # f8f8f8 and Background colour to Grey #bab9b9.
Take Blend Tool, in Tool Options set Gradient - FG to BG (RGB), Shape – Be-Linear. Pull the gradient from the centre of the selection to the bottom of the selection. See Fig 7. Keep the selection.
Fig. 7 Creating glossy web button in GIMP 2.8
Create a new Transparent Layer by going to Layer / New Layer / Transparency.
Set your Foreground colour to Black. Go to Selection / To Path.
Next go to Select / None.
After go to Edit / Stroke Path / Solid Colour / 6px. Set this layer to Overlay and Opacity to 37%, see Fig 8.
Fig. 8 Creating glossy web button in GIMP 2.8
Go to the top Layer then create a new Transparent Layer.
Take Paths Tool and set three points as shown in Fig 9.
Fig. 9 Creating glossy web button in GIMP 2.8
First pull the top line upwards to create a curve, then move point #3 and place it on the point #1. Now pull down bottom line to create another curve see Fig 10.
Fig. 10 Creating glossy web button in GIMP 2.8
Go to Select / From Path.
Take Blend Tool, set Foreground colour to White. In Tool Options select Gradient - FG to Transparent, Shape – Linear. Pull gradient from the top of the selection to the bottom of the selection see Fig 11.
Fig. 11 Creating glossy web button in GIMP 2.8
Select / None.
Go to Layer / New Layer / Transparency.
Take Paths Tool and set four points as shown in Fig 12 and pull the top line to make a curve.
Fig. 12 Creating glossy web button in GIMP 2.8
Select / From Path.
Take Blend Tool, pull the gradient (keep the settings from the last time) from the top of the selection to the bottom of the selection, see Fig 13.
Fig. 13 Creating glossy web button in GIMP 2.8
Select / None.
Go to the layer with plain blue circle, right click with the mouse, chose Alfa to Selection.
Select / Invert.
Go back to the top layer (the last one with white gradient), then click Delete. Reduce Opacity of this layer to 65%. Keep the selection.
Create a New Transparent Layer, make sure your Foreground colour is White.
Take Blend Tool, Gradient - FG to Transparent, Shape - Bi-Liner and pull the gradient from the middle of the selection to the bottom of the selection. Set this layer to Overlay see Fig 14.
Fig. 14 Creating glossy web button in GIMP 2.8
Select / None.
Create a new Transparent Layer at the top of all the layers, take Paths Tool and create a triangle by setting four points as shown in Fig 15.
Fig. 15 Creating glossy web button in GIMP 2.8
Select / From Path.
Take Bucket Tool and fill the selection with White.
Keeping the selection, create a new Transparent Layer, place it beneath the layer with white triangle and fill the selection with Blue #1d74e0.
Select / None.
Go to Filters / Blur / Gaussian Blur / 8px
Go to Image / Merge Visible Layers.
Image / Flatten Image.
Final results see in Fig 16.
Save image by going to File / Export.
Fig. 16 Creating glossy web button in GIMP 2.8
Hope you enjoyed this tutorial.
If you have any questions related this tutorial, don't hesitate to ask.
Tutorial requests
Comments
Korneliya Yonkova from Cork, Ireland on January 07, 2015:
Great tutorial, thanks a lot for sharing :)
Dina Blaszczak (author) from Poland on August 07, 2014:
@Beth I'm very pleased to hear it :)
Beth on August 06, 2014:
Just finding this and this was exactly what I needed. This is the way I love tutorials! Just each specific step very clearly laid out. Thanks so much for taking the time!!
Dina Blaszczak (author) from Poland on February 26, 2013:
@Wonder wool & @dilipchandra12 Thank you so much for your kind comments, I'm pleased that my effort was appreciated! Thanks a lot!
Dilip Chandra from India on February 26, 2013:
Beautiful hub, very clearly explained how to create a glossy round web button.
Priyanka Estambale from United States on February 25, 2013:
Amazing! Love the detailed illustrated images!
