[thelist] Three dimensional button with Photoshop

Pixel Grafx pixel-grafx at attbi.com
Sun Mar 17 15:43:01 CST 2002

Syed Zeeshan Haider wrote:

> I want to create some circular buttons, which can change into spheres
> (like planets' photos) on onMouseOver() event of JavaScript. I can
> create simple buttons and circles with Photoshop and write JS code for
> them. However, I don't know how to change simple circles into spheres
> with Photoshop, so that those spheres can give an impression of a
> photograph of a planet.
> Can somebody tell me, how to do this? Any easy way with Photoshop?
> Thank you,
> Syed Zeeshan Haider.


As in anything one wants to do in Photoshop there are at least 6 ways of
accomplishing the same look.

Here's the easiest was that I learned - but again others will probably have
an easier one than this.

Here goes:

1. Open your document in Photoshop and immediately create a New Layer. Grab
the Elliptical Marquee Tool and create your circle on this New Layer - not
the Background Layer.

2. Hit the letter "D" which will re-set your colors to Foreground: Black and
Background: White and now hit the letter "X" which will reverse the colors
so that now your settings will be Foreground: White and Background: Black

3. Select the Gradient Tool using the Radial Gradient setting (this will
differ depending on which version of Photoshop that you have) and draw from
the center of your Elliptical Marquee Selection that you made in Step 1. You
can try starting the Gradient from different positions with your Circle to
get the design you're after.

4. Finally go to the Menu Bar to Image:Adjust:Hue/Saturation and when that
dialog box opens up select "Colorize" and "Preview" and start moving the 3
scales until you get the color you're after.

You can make a copy with one color and go back into
Image:Adjust:Hue/Saturation and create another color and save that to use in
your JavaScript rollover.

I like to start out making the circles 400% or 500% of what I actually want
to end up with because when I scale down the button/circle it's quite smooth
with no banding.

Hope that helps................

More information about the thelist mailing list