RSS/Atom feed Twitter
Site is read-only, email is disabled
  1. Chat
  2. Useful links
  3. Polls

Featured content

Tutorial: Orb-Icons for Websites

Written by · Created on Mar 18, 2007, last updated almost 12 years ago CC BY-NC License
Orb-Icons for Websites

Download GIMP workspace (.xcfbz2) (39.9 KB)

Motivation

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!

Tutorial details

  1. 1

    Create a new file: 250×250px. Fill the background with #828282.

  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.

  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.

  4. 4

    Activate the layer that contains the gradient.

    Go to Filter / Licht & Shadow: Drop Shadow. X/Y: 0/0, Tranparency: 60%.

  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.

  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.

  7. 7

    Take the Move-Tool now and move the white shine (the gradient ;)) to the top in the upper center of the sphere.

  8. 8

    Go to Filter / Blur / Gaussian Blur: Value: 5.

  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.

  10. 10

    Thats it! Have fun with your new orbs ;)

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.

Subscription management

Please log in to manage your subscriptions.

User rating

This topic (Orb-Icons for Websites) has been rated 5.0/5.0.

New comments are disabled because of spam.

AllstarSeaworthyofNBC member for over 8 years AllstarSeaworthyofNBC 4 comments rated this topic with 5/5
over 8 years ago

Wow... I loved this one. This is a information icon in green Written it DIN Neuzeit Grotesk.

devvv member for about 18 years devvv 1475 comments
almost 12 years ago

You can download it now in the tutorial details - must have missed the upload - sorry. Have fun!

Luke
almost 12 years ago

Insert the xcf file

Luke
almost 12 years ago

It's so hard

NR
over 12 years ago

Grain extract doesn't work :( The text becomes darker, why is that?

Cheesedude
over 14 years ago

*sigh* I can't get the tutorial to work. Split-Visionz's orbs are off center, the left side is not rounded. I guess I can't win around here. Thanks anyway!

Cheesedude
over 14 years ago

I'll have to try Split-Visionz scripts because this does not work for me. The problem is on Step 5.

Where it says:

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.

What kind of layer? I assume transparent, because you can't do a white to transparent gradient on a white filled layer. At least my version of Gimp 2.6.7 won't.

Chobicus rated this topic with 5/5
over 14 years ago

Very nice tut.

ddjj
over 15 years ago

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

Matt
over 15 years ago

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

ShockwaveLover member for almost 16 years ShockwaveLover 7 comments
over 15 years ago

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.

agcilantro
over 15 years ago

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.

Zeke
over 15 years ago

What about exporting it to svgz?

Butterfly
over 15 years ago

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

Butterfly
over 15 years ago

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

Desert
about 16 years ago

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

jimmycrackcorn
about 16 years ago

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!

Desert
about 16 years ago

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

stalepretzel
over 16 years ago

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!

Ztoph member for almost 17 years Ztoph 4 comments
almost 17 years ago

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

But thanks. Now i just gotta find the folder.

Split-Visionz member for almost 17 years Split-Visionz 3 comments
almost 17 years ago

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.

Ztoph member for almost 17 years Ztoph 4 comments
almost 17 years ago

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?

devvv member for about 18 years devvv 1475 comments
almost 17 years ago

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

Gimpwarrior member for almost 17 years Gimpwarrior 1 comment
almost 17 years ago

i got lost at step five

Split-Visionz member for almost 17 years Split-Visionz 3 comments
almost 17 years ago

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

devvv member for about 18 years devvv 1475 comments
almost 17 years ago

very cool ;) but where do we get it?

Split-Visionz member for almost 17 years Split-Visionz 3 comments
almost 17 years ago

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

cemkalyoncu
over 17 years ago

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.

devvv member for about 18 years devvv 1475 comments
over 17 years ago

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

Mirat Bayrak
over 17 years ago

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

devvv member for about 18 years devvv 1475 comments
over 17 years ago

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.

Peter Grosse
over 17 years ago

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

kyle87
over 17 years ago

This tutorial is very cool