ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create a glossy round web button in GIMP 2.8

Updated on April 4, 2013

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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

What GIMP tutorial would you be interested in?

See results

Comments

    0 of 8192 characters used
    Post Comment

    • CorneliaMladenova profile image

      Korneliya Yonkova 

      3 years ago from Cork, Ireland

      Great tutorial, thanks a lot for sharing :)

    • Dina Blaszczak profile imageAUTHOR

      Dina Blaszczak 

      4 years ago from Poland

      @Beth I'm very pleased to hear it :)

    • profile image

      Beth 

      4 years ago

      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 profile imageAUTHOR

      Dina Blaszczak 

      5 years ago from Poland

      @Wonder wool & @dilipchandra12 Thank you so much for your kind comments, I'm pleased that my effort was appreciated! Thanks a lot!

    • dilipchandra12 profile image

      Dilip Chandra 

      5 years ago from India

      Beautiful hub, very clearly explained how to create a glossy round web button.

    • Wonder wool profile image

      Priyanka Estambale 

      5 years ago from United States

      Amazing! Love the detailed illustrated images!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)