gimpusers.com logo
German version English version

Not logged in

Sign up! | Lost password?

Latest discussion

  1. gimp-user | today 09:49 AM
    Need help: "correcting" exposures in time-lapse imagesets
  2. gimp-developer | today 06:14 AM
    GIMP color-management spec and further discussion
  3. gimp-user | yesterday 11:13 PM
    collages in gimp?
  4. gimp-developer | yesterday 07:07 PM
    Color management (UI perspective for GIMP 2.8)
  5. gimp-user | yesterday 02:42 PM
    printing

External news

Poll

Would you like to be able to use your Google/Yahoo/MSN (OpenID) login on gimpusers, too?

Definately! I would enjoy the possibility to use my OpenID on different websites!

I don't have a special need for OpenID but I think it could be useful

Doesn't matter to me

Never, OpenID is a pain regarding privacy and personal data protection!

No. (please post a comment)

See results

Stats

gimpusers.com RSS feed

RSS feed Retweet this!

18 Mar 2007 02:11 PM, by devvv (Bernhard Stockmann)

Orb-Icons for Websites

Of course you know these small little icons which can be often seen all around the web that look like a small glossy orb. Pretty nice to enhance also your personal website with it!

This article has been written using GIMP 2.3.15. It's divided into 10 steps and takes about 10 min to complete for an average user. 39841 times read so far. Category: Buttons, icons, web, required skill: 1 of 5

25 comments have been posted so far.

Available in other languages:

  1. 1
    Create a new file: 250x250px. Fill the background with #828282.
    Screenshot of step 1
    Click to enlarge
  2. 2
    Take the Elliptical Selection-Tool and create an exact circle. After that create a new empty layer, take the Gradient-Tool (L). As a FG-color choose #571f00, for the BG-color choose #ff5a00.

    Now draw a gradient from top to the bottom of that layer.
    Screenshot of step 2
    Click to enlarge
  3. 3
    The selection should still be active.

    Again create a new layer. Fill it black. To do this very fast first press D then press CTRL+,

    Now follow these steps:

    - Select / Shrink: 1px
    - Select / Feather: 100px

    After that press DEL two times to delete the selected part.
    Screenshot of step 3
    Click to enlarge
  4. 4
    Activate the layer that contains the gradient.

    Go to Filter / Licht & Shadow: Drop Shadow. X/Y: 0/0, Tranparency: 60%.
    Screenshot of step 4
    Click to enlarge
  5. 5
    Activate the layer that contains the gradient. From the context-menu of the layers-dialog choose "Alpha to selection".

    Add a new layer. Choose white as FG-color. Take the "Gradient-Tool". In the preferences-box of this tool choose the fourth option in the drop-down-menu for the gradients: "FG to Trasparent". Apply this gradient from top to bottom.
    Screenshot of step 5
    Click to enlarge
  6. 6
    - Select / None
    - Activate the Scale-Tool
    - Click the layer, when the popup-menu appears enter 175 as width and 150px for the new height. Click OK.
    Screenshot of step 6
    Click to enlarge
  7. 7
    Take the Move-Tool now and move the white shine (the gradient ;)) to the top in the upper center of the sphere.
    Screenshot of step 7
    Click to enlarge
  8. 8
    Go to Filter / Blur / Gaussian Blur: Value: 5.
    Screenshot of step 8
    Click to enlarge
  9. 9
    We're almost done. Now you can add for example a single character or any small symbol you want.

    I took the Text-Tool and simply wrote a question-mark "?" in white color into the middle of the orb. Then i chose "Grain extract" from the layers-mode drop-down.
    Screenshot of step 9
    Click to enlarge
  10. 10
    Thats it! Have fun with your new orbs ;)
    Screenshot of step 10
    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.

  1. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Sat 05 May 2007 08:32:29 PM CEST kyle87, 05 May 2007 08:32 PM

    This tutorial is very cool

  2. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Tue 22 May 2007 05:11:45 PM CEST Peter Grosse, 22 May 2007 05:11 PM

    Dude , nice tut , but never save images as jpg , unless you computers memory is like 64mb.

  3. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Tue 22 May 2007 05:30:16 PM CEST devvv, 22 May 2007 05:30 PM

    hey peter! i don't know exactly what you mean. but only the preview of the pictures are saved as jpg, the full size is lossless png.

  4. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Fri 06 Jul 2007 09:48:36 AM CEST Mirat Bayrak, 06 Jul 2007 09:48 AM

    Can you show it with another shape? with rectangle or something else

  5. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Fri 06 Jul 2007 11:21:55 AM CEST devvv, 06 Jul 2007 11:21 AM

    you can simply try rectangle shapes or any other shape, the steps remain pretty much the same.

  6. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Fri 24 Aug 2007 09:16:20 AM CEST cemkalyoncu, 24 Aug 2007 09:16 AM

    Great.
    When I use gain extract I get a black text with some tinting on it. Instead I used gain merge and it looks fine.

  7. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 13 Dec 2007 01:28:42 AM CET Split-Visionz, 13 Dec 2007 01:28 AM

    I created a Gimp Script based off of this tutorial that will create the orbs. You can get it at:


    Click to enlarge

  8. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 13 Dec 2007 01:54:43 PM CET devvv, 13 Dec 2007 01:54 PM

    very cool ;) but where do we get it?

  9. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 13 Dec 2007 02:13:30 PM CET Split-Visionz, 13 Dec 2007 02:13 PM

    Sorry, I guess I didn't post the link. lol.
    Here:
    http://split-visionz.net/Scripts/GlossOrbScript%20Pack%20version%201.zip

  10. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 17 Jan 2008 01:04:42 AM CET Gimpwarrior, 17 Jan 2008 01:04 AM

    i got lost at step five

  11. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 17 Jan 2008 08:07:50 AM CET devvv, 17 Jan 2008 08:07 AM

    the result of step five should be a gradient that is white at top and transparent at bottom. if you have other detailed questions please just ask

  12. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Fri 15 Feb 2008 12:57:23 PM CET Ztoph, 15 Feb 2008 12:57 PM

    Nice tut, but wouldnt it be better with a transparent bg? then you could put it on anything

    And a little question to Split-Visionz:
    How do i install that script?

  13. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Sat 16 Feb 2008 02:51:28 AM CET Split-Visionz, 16 Feb 2008 02:51 AM

    You put the files in the gimp scripts folder, there are two folders you can use...
    1.
    documents and settings> user_name >.gimp2.4> scripts
    If you put it in that folder only the account who user_name refers to can use them or...
    2.
    C:>Program Files>GIMP-2.0>share>gimp>2.0>scripts
    all accounts on the pc can use them if you place them there... Also to note... what i said is for Windows only and the scripts folder may be located somewhere else on linux or Mac...

    Also I created a gelbar script you might be interested in....
    http://www.gimptalk.com/forum/topic/Gelbar-Script-Pack-26975-1.html

    Even though its not my tutorial, in my opinion it is sometimes better to through on generic background layer on images so you can fully view things such as the shadow or edge of something your cutting which is sometimes not noticeable on gimps checkerboard BG it uses to symbolize transparency.

  14. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Sat 16 Feb 2008 01:18:14 PM CET Ztoph, 16 Feb 2008 01:18 PM

    I Could never dream of using windows.
    its a fucking shit OS.!!

    But thanks. Now i just gotta find the folder.

  15. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Sun 06 Apr 2008 09:43:10 PM CEST stalepretzel, 06 Apr 2008 09:43 PM

    Thanks for the tutorial!
    I've wanted to makes some Web-2.0-looking graphics for some time, now, but I was unable; I only had Photoshop Elements. That's problematic because:
    1) It was on the Windows computer, not the Mac that's much easier to use, and,
    2) Almost all Photoshop Tutorials use CS, often relying on tools that weren't available in elements.
    Then GIMP came along!
    Free, easy, and it comes with a comunity of other GIMPers making tutorials for the same version I use!

    Thanks again for the tutorial!

  16. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Tue 07 Oct 2008 03:22:09 PM CEST Desert, 07 Oct 2008 03:22 PM

    In linux it's located in /home/YOUR_USERNAME/.gimp? where the ? is your version of gimp.
    Hope it helped you.

  17. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Wed 08 Oct 2008 09:40:18 PM CEST jimmycrackcorn, 08 Oct 2008 09:40 PM

    how do i save this as a bitmap? i need just the button with a transparent background for a project so i can put this button overtop of another image. thanks for the help. great tutorial!

  18. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 09 Oct 2008 07:07:44 PM CEST Desert, 09 Oct 2008 07:07 PM

    Just save the file as *.bmp, gimp will automatically (at least mine does) as a bitmap

  19. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Sun 15 Mar 2009 02:14:25 AM CET Butterfly, 15 Mar 2009 02:14 AM

    I would like to tell devvv thank you so much for this tut. I've been looking for something like this for a while. And to that visionz guy thanks so much.. No if I could just find a way to make a nice bubble i would be in heaven :P

  20. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Sun 15 Mar 2009 02:29:47 AM CET Butterfly, 15 Mar 2009 02:29 AM

    I would also like to hint that if you're not looking for such a pronounced "shine" You should mess around with the Gaussian Blur and maybe put to something like 20. That worked out a lot better for me =D

  21. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Tue 24 Mar 2009 03:02:26 AM CET Zeke, 24 Mar 2009 03:02 AM

    What about exporting it to svgz?

  22. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Tue 24 Mar 2009 12:36:49 PM CET agcilantro, 24 Mar 2009 12:36 PM

    Thanks for the great tutorial
    Can you please explain what the selection to alpha does? It is the only step that I don't understand.

  23. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Thu 02 Apr 2009 05:17:30 AM CEST ShockwaveLover, 02 Apr 2009 05:17 AM

    Another brilliantly useful tutorial.

    @agcilantro - The Alpha to Selection function allows you to retain a selection while you create a new layer. This may not seem like much use, but it means that you can create exact duplicates of what ever it is that is selected. Making shadows is very easy this way.

    Simply right click the layer you want, click 'Alpha to selection', create a new layer, then drag the colour or gradient you wish to apply over the selection. Apply any filters, and there you go.

  24. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Mon 13 Apr 2009 06:54:28 PM CEST Matt, 13 Apr 2009 06:54 PM

    Brilliant tutorial, especially on how to get a border round the orb

  25. http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites.html Mon 20 Apr 2009 10:31:21 PM CEST ddjj, 20 Apr 2009 10:31 PM

    Nice. Rather than say something like, "Activate the layer that contains the gradient", give each layer a
    name and refer to that name. I was a little confused
    at times, what layer I should be manipulating. From Step 9, it appears meaningful names were given at some time.
    Thx

Registered users can log in (top right of the page) to use their profile name to post comments, request email notification on new comments and attach images (e.g. their versions of the effect) to their postings.

Are you human?

Adobe® Photoshop® is a registered trademark of Adobe Systems, Inc. Linux is a trademark of Linus Torvalds. Ubuntu and Canonical are registered trademarks of Canonical Ltd. | Clock times are shown as CET / CEST | Imprint / Privacy policy | powered by bitfire it services