Apr 27 2009
Adobe Photoshop Tip– Lickable Candy Aqua Sphere Icons
|
Download List: Aqua Sphere Style Aqua Sphere Overlay Style Icon Subject Style IconBuilder |
 |
 |
 |
 |
 |
|
 |
 |
 |
You’ve seen the icons. You know the ones I mean. They look like colored glassy
orbs and often have logos or other icons embedded within them. Oh, you’ve seen
them alright. They’re everywhere. They’re here and here and here and here and
here and here and here. Why are they so prevalent? Because they are easy to
make. All you need is Photoshop and the Icon Factory’s IconBuilder plug-in.
For the purposes of this tutorial, I will be using graphics provided to me
by Nitrozac and Snaggy from Geek
Culture. The final collection contains 24 different Joy
of Tech and After
Y2K icons and is available for download. He’s how I made ‘em:
Step 1: Look deep into the crystal ball…
Create a new RGB Photoshop file that is 128 pixels by 128 pixels and 72 pixels/inch
in resolution. Set the contents to “Transparent” and click OK. Set
your ruler units to show pixels and set two horizontal guides, one
at 1 pixel from the top of the canvas and another at 112 pixels. Set two vertical
guides also, one at 8 pixels from the left edge and another at 119 pixels from
the left edge. Name this layer “Aqua Sphere”.
Within these guides, create a colored circle. You can either draw a selection
and fill it with a color of your choosing or use the ellipse tool to draw your
shape the same color as your foreground color.
This all seems pretty intricate and tedious but that is only because I’m showing
you how to match my icons exactly. Once you’ve gone through the tutorial successfully,
you’ll probably be comfortable enough to experiment with other sizes, shapes
and colors. You’ll soon see that this is the hardest part of the tutorial.
Download the MacMerc
Aqua Sphere Style, load
it into your Styles palette and apply the style to your circle. I told
you it would be easy.
Now duplicate the Aqua Sphere layer. Name the duplicate “Aqua Sphere Overlay”.
the transparency of the Aqua Sphere Overlay layer and fill it with
50% gray. Now you’ll need to download the MacMerc
Aqua Sphere Overlay Style, load
it into your Styles palette and apply that style to the Aqua Sphere
Overlay layer.
|
Other uses for this tutorial: If you just happened along this tutorial while looking for information on how to make quick and dirty Aqua spheres, you’re done. If you want to Aqua buttons, there’s not much more to it. Just make you document about 3 times wider, create an Aqua button shape and apply the MacMerc Aqua Sphere Style to it. You might want to scale the effect by about 150% and extend the canvas below the button to accommodate the larger drop shadow.
Notice is this screen shot I have not show an extended canvas. See how the canvas ends before the drop shadow fades out completely? That’s bad…very bad. |
Now, hopefully you have a subject for your icon ó something to embed
within the glassy sphere you’ve just created. Go look for something appropriate
and meet me back here for… Part
2
Part 2: Adding subject matter to you icon
Choosing the right subject is very important. You will only have a small circular
area in which to position your icon, so it is best if it fits well within those
confines. Also, for the purposes of this tutorial, the picture you use for your
icon’s subject must not have any background. It must be a single layer that
is in dependant of background.
Open the file containing your icons subject image. Copy that image and paste
it in new layer between the Aqua Sphere layer an the Aqua Sphere Overlay layer.
Name this new layer “Icon Subject”.
We want this image to be confined within the sphere. To do this we will have
to mask off any parts of it that might otherwise stick out.With the Icon Subject
layer selected in the Layers palette, select
the transparency of the Aqua Sphere layer.
Apply this selection as a layer mask to the Icon Subject layer by going to
the Layer menu and choosing Add Layer Mask>Reveal Selection.
Now to finish off the look of this icon, download, load
and apply MacMerc
Icon Subject Style to the Icon Subject layer. You might need to
the effect if the highlights do not look correct.
Okay, the look of the icon is done…now we need to make it function as an
icon for the Mac OS.
Part 3: Making your sphere into an icon
As the IconFactory web site puts it, “IconBuilder
is a filter for use with Adobe Photoshopô that makes creating icons a
snap. By harnessing the professional power of Photoshop and Photoshop layers,
IconBuilder provides icon artists with the most complete tool set possible for
modern icon design.”
Download IconFactory’s
IconBuilder (there are a few versions available, so make sure you
download the right one for you) and install it according to the instructions
that accompany it.
IconBuilder will build an icon out of individual layers only and will not read
layer styles, so we will need to choose Merge Visible from the Layers menu (or
Command-Shift-E).
Go Filter>IconFactory>IconBuilder Pro and select the Aqua tab. Make sure
your screen looks like mine and then click the “Both” arrow. Click
“Save” and name your icon and save it to your desktop. Click Done.
Before we go any further, make sure your preferences for your History palette
are set to at least 2 as we will be backtracking to create the various sizes
of icon resources.
Go Command-T to activate Free Transform (also found under the edit menu) and
by 37.5%.
Go back to IconBuilder, select the Grid tab (you may need to center your icon
in the Photoshop Layer preview window. Click the Center button.) and click the
QuickBuildô button. Click the Save button again and save over your original
icon file. Click Done.
| |
|
|
| |
|
|
| |
|
|
Open the History palette and select the “Merge Visible” event to
go back in time to before we scaled.We are going to scale again, but we want
to make sure that we scale from the original and not from a scaled reinterpretation
of it.
Go Command-T again and scale to 25%.
Go back to IconBuilder and select the bottom square in the center column of
the the grid view. Center the icon in the Photoshop Layer preview window if
need be. Click the Both arrow to plug that image into the 32-bit, 32×32 pixel
icon resource. Select the next square up in the grid (8 bit, 32×32 pixel icon)
and click the Both arrow again. Continue by selecting the 4 bit 32×32 pixel
icon square and the 1 bit 32x 32 pixel icon square and plugging your icon image
into those resources with the Both arrow button. Click the Save button and save
over your original icon file once again. Click Done.
In the History Palette, click back to the “Merge Visible” event again.
Go Command-T and scale to 12.5%
Go back to IconBuilder and select the bottom square in the leftmost column
of the the grid view. Center the icon in the Photoshop Layer preview window
if need be. Click the Both arrow to plug that image into the 32-bit, 16×16 pixel
icon resource. Select the next square up in the grid (8 bit, 16×16 pixel icon)
and click the Both arrow again. Continue by selecting the 4 bit 16×16 pixel
icon square and the 1 bit 16×16 pixel icon square and plugging your icon image
into those resources with the Both arrow button. Click the Save button and save
over your original icon file. Click Done….cuz now you ARE done.
If you’d like to preserve the layered version of your Photoshop file for future
reference or editing, simply click the event above “Merge Visible”
in the History palette.
That’s it!
There you have it. I know it was a very long tutorial but, I think you’ll agree,
it was pretty simple. The MacMerc Aqua Sphere Style and the MacMerc Icon Subject
Style can also be used to “aquafy” logos and other shapes but its
powers should only be used for good. Have a look at what can be achieved with
just a little extra effort and Photoshop know-how.
Troubleshooting
You may find yourself looking at an icon that won’t update after you edit it.
And you may tell yourself, “My god! What have I done?” Don’t worry.
The problem stems from that fact that Mac OS X has a nasty habit of holding
onto cached previews of Finder windows and other items long after they become
outdated. What you need to do is clear that cache and everything will be fine.
Cache Out X is a good utility to occasionally fix this problem with the
OS.
Tune in again some other week for more graphics tips. In the meantime check
out previous Graphics
Tips of the Week or send
me a message and let me know what you would like to see in future installments.