shapes and colors

Apr 27 2009

Adobe Photoshop Tip– Lickable Candy Aqua Sphere Icons

Download List: MacMerc Aqua Sphere Style MacMerc Aqua Sphere Overlay Style MacMerc Icon Subject Style IconFactory’s 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”.

Lock

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

scale

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

scale

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.

NoName Scriptware’s

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.

By admin • Articles, Graphics Tips • Comments Off • Tags: Adobe, adobe photoshop tip, aqua sphere, BestStuff, button, circle, crystal ball, drop, ellipse tool, foreground color, left, left edge, mask, orbs, palette, Part, Photoshop, RGB, ruler, set, shadow, shapes and colors, style, transparency, using graphics