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