Orbicons: The Tutorial
Create Your Own Orbicon Icons.
Tuesday, January 4, 2005 by wstaylor | Discussion: Icons
I have made over 100 icons in the past 2 days. They all have the same idea in mind; glass orbs with an image referring to a program inside of the orb. For some reason I cannot stop making these little orbs. Now, I know that some of you are saying - "Orbs are very old..." or "We are tired of seeing orbs..." - but I say, "MAN! I wish I could stop making these things!"
This is where this article gets interesting: I am going to share with you just how I made these orb icons, so that you too might try and see whether or not you can stop making them. Yes, this is a tutorial for making Orbicon icons using Photoshop and Icon Developer. I hope it comes in handy for someone.
Step one: Open Photoshop and Icon Developer.
Step two: Find some image or logo that you would like to use for your icon. If you want to Google search images for the logo that will work as well. I like to use http://www.brandsoftheworld.com to find high resolution EPS (encapsulated post script) images for download. So I am going to use this site to find a logo for www.mozilla.org - the giant red dinosaur ( found here ) - and I am going to download the EPS of it and save it to disk.
|
Step three: Open the EPS file using Photoshop. Should look something like this: Just click OK on this dialog box. |
|
| Step Four: The next step will be to make the EPS file background transparent. The wonderful Magic Wand in the toolbar of Photoshop.
Notice that I have selected the Magic Wand and set the tolerance to (5) and chosen anti-alias and contiguous. Then choose the white area around the mozilla.org dinosaur, and go to select and choose inverse. Push [ ctrl + X ] or go to Edit --> Cut and that will remove the dinosaur from the EPS file. Next go to File --> New and set the background to transparent, click ok to the default size then go to Edit--> Paste and a new image with the red dinosaur will appear, with a transparent background. |
|
Step Five: Now to begin making the Orb'd dinosaur. The easiest way I found to do this was to reduce the image size to 128x<128... meaning go to Image-->Image Size - and change the smaller number to 128 (constrain proportions selected)... this case being the height. Your dinosaur dimensions should be 146x128. Now go to Image--> Canvas Size and change that to 2 by 2 inches. The blank area around the dinosaur should be a lot bigger now. Now we will go to Filter--> Distort--> and Spherize. We will increase the slider to 100% and Press OK... then apply it 2 more times, by pressing [ ctrl + F ]. the dinosaur should look somewhat larger and kind of Orb'd. Go to Image--> Trim choose transparent pixels check all of the sides (top, bottom, left, right) and Press OK. Leave that image alone.
| Step Six: To make the glassy orb: Go to File--> New set background to transparent and make the size 128x128. Then right click the Rectangular Marquee Tool and change it to Elliptical Marquee Tool (Figure1). Set its properties like the way I have them in the screen shot. Then zoom into the blank image (about 500%) and click the top left corner, so that a circle will be selected that touches each side of the square. Keep trying until you have a circle that is as big as the canvas.
Change the foreground color to white. and go to the Gradient tool, choose foreground to transparent and then choose the radial gradient. (Figure2) |
 |
|
| Figure1 - click to zoom | Figure2 - click to zoom |
| Then drag the radial gradient tool across the orb from bottom-right to top-left. Then go to Layer--> New and create a new layer. Now select another foreground color - this will be the color of your orb. Drag the Radial Gradient tool from top-left to bottom-right this time. I have chosen Red... Now go to Image and then Canvas and set it to 1x1 inches. Set your zoom back to 100%... Then right click the White to Transparent Layer and choose Blending Options. Choose Drop Shadow and set the Angle to 90... then choose Inner Shadow and uncheck global lighting set its Angle to 120 and set the Size to 30. (Figure3) |
|
|
Figure3 - click to zoom | |
|
Next add the layer for the light glare on top of the orb. Go to Layer--> New and then with the Elliptical Marquee Tool create an oval shape over the orb... then go to Select--> Transform Selection and move that oval to position and make it the size you feel comfortable with (Figure4). Choose the gradient tool and select white as the foreground color... then drag the linear gradient from top to bottom - you can then move that oval around if you want. (Figure5) Now We Have Our Orb | |
 |
 |
|
Figure4 - click to zoom |
Figure5 - click to zoom |
| Step Seven: Add the mozilla.org dinosaur to the icon. Go back to your dinosaur and Press [ ctrl + A ] and then [ ctrl + C] to Copy the dinosaur... then go to your orb and press [ ctrl + P ] to Paste the dinosaur there. Then Free Transform the dinosaur, by Pressing [ ctrl + T ] - set the horizontal and vertical scale to 25% and center the dinosaur in the orb. (Figure6) - Then right click the dinosaur Layer and go to Blending Options - choose Drop Shadow and Press OK. Choose the Dinosaur Layer and set it to 80% Opacity. (Figure7) |
|
|
|
Figure6 - click to zoom |
Figure7 - click to zoom |
| Step Eight: Create the Icon. Now go to Image-->Trim... this will make the image back to a smaller size. Then go to File-->Save For Web and choose PNG-24 Then select the Image Size tab and uncheck Constrain Proportions and set the size to 128x128.(Figure8) Then Click Save. |
|
|
Figure8 - click to zoom |
Now We Have Our 128x128 PNG
| Step Nine (Optional): Open Icon Developer and choose Convert Image to Icon. Choose ONLY XP Icons and click OK(Figure9). Then go to File-->Save As and name your Icon. |
|
Now We Have Our 128x128 Icon
Download the Finished ZIP Here...
Step Ten (Optional): Zip your *.ICO and *.PNG file together and Upload it to the Misc Icons Section at Wincustomize.com. 
You can see examples of my Orbicons over at http://wstaylor.wincustomize.com - ENJOY !!!
Reply #2 Tuesday, January 4, 2005 2:09 PM
Reply #4 Tuesday, January 4, 2005 8:15 PM
Great Job!! Thanks!
Reply #6 Friday, January 7, 2005 3:18 AM
Really clear and concise instructions. I think I could possibly follow this tutorial.
Reply #7 Friday, January 7, 2005 8:34 AM
Reply #9 Friday, January 14, 2005 6:52 PM
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Tuesday, January 4, 2005 7:58 AM