|
|
|
Spheres are a dietary staple of the interface design professional, and make
their way into many different designs, whether by choice or just plain habit.
This is not a coincidence - carefully crafted 3D-effect spheres are one of the
most visually pleasing and effective weapons in the designer's arsenal.
There are, consequently, dozens of different methods used to get a similar
result - some more complex than others. My technique takes a middle road - it
looks good and takes a moderate amount of time to set up. Its biggest
advantage, however, is that it uses nothing but Photoshop Layer effects, so you
can fine-tune the effect with relative ease (something that's just not possible
if you rely purely on the lighting effects filter or radial gradients). For the
sake of those interested in the theory, I've also spent a little time explaining
the different settings, and how their alteration will affect the final look of
the effect. Read on...
 |
Step 1: Create a blank 200px by 200px
document and fill the background with anything you like (white may be best
at first). Create a new transparent layer on top and, using the Elliptical Marquee Tool,
draw a circle whilst holding down the shift key (this will give you a
classic circle with equal proportions). Now make sure you have the top
layer active and choose Edit > Fill from the menu. Fill the
circle with 50% grey. You can now deselect if you want. |
 |
Step 2: With the circle layer still selected
in the layers palette, click on Layer > Layer Style > Bevel and Emboss
in the menu and duplicate the settings on the left. You can alter the
direction & height of the shine highlight by altering the angle and altitude
accordingly. Likewise, if its a little too bright for you, or
you want to go for a more 'rubbery' effect, drop the highlight opacity a
little. Don't exit the layer effects dialog just yet though...
|
 |
Step 3: Now progress onto the inner shadow
subsection and enter the settings shown here. This will just add a
little black shadowing into the bottom-right of the sphere, and make the
whole shape appear more rounded. |
 |
Step 3b: As an optional step, you can go into the
gradient overlay and add a little more shading to the surface. If you
don't want a sphere that 'pops out at you' though, you may consider omitting
this stage. Now leave the layer effects
dialog by clicking on the OK button. |
 |
Step 4: And here is the result of all your hard
work! Of course, its all a bit grey as yet, but a quick visit to
Layer > Layer Style > Colour Overlay should sort that out sharpish. |
 |
Step 5: You shouldn't stop there of course - feel
free to add other layer effects to your spheres for some truly unique
effects. The sphere on the left, for example, is the same as the
one above, but with a colour overlay, drop shadow, radial gradient, and
pattern overlay defined. It really is simple to add these things using
the layer effects dialogs, and no expert knowledge is required.
So, go on, be a devil and experiment a little. You'll be shocked what
you can conjure up in a few minutes... |
- Tutorial written by Man1c M0g
| 
|
User: catalyst (#47150)
Date: Fri Jan 04, 2008. 16:48:20 | Post #10 of 10 |
|
Very helpful, thanks! After following the steps twice, my gradients, highlights, shadows, et al look great. But the sphere edges are jaggy. Dunno what I'm doing or not doing. Using PSCS3, used the oval marquee and the 50% fill. Any ideas?
Tnx again! |
Reply to this post |
|
|
Can anyone help...I have created a nice shiny sphere, however first of all it doesn't appear clear at all (even when I mess with opacity it just looks foggy not crisp and clear) and when I try to use it with a different background by using the move tool, the whole look changes???? It's all wrong... |
Reply to this post |
|
|
Wow! It looks just like a blown glass paperweight. How cool is that. Thanks again. |
Reply to this post |
User: Darkie (#34402)
Date: Wed Nov 15, 2006. 15:03:31 | Post #6 of 10 |
|
Wow I actully did it thanks. this is how it turned out I added a drop shadow. |
Reply to this post |
--- View Entire Thread ---
|

|
|
 |
php, shoutbox problems Author: vanhansen Posted: Nov 17th, 1:30am Activity: 5 replies, 93 views
|  | MarkupGeeks Logo Author: ahstanford Posted: Nov 16th, 8:45pm Activity: 12 replies, 156 views
|  | Drawing Tutorials Author: ahstanford Posted: Nov 16th, 12:46am Activity: 0 replies, 99 views
|  | Superbowl predictions, anyone? Author: ahstanford Posted: Nov 15th, 10:46pm Activity: 10 replies, 138 views
|  | Photomanipulation Footsteps Author: ahstanford Posted: Nov 15th, 10:43pm Activity: 4 replies, 98 views
|  | Learning to draw... Author: ahstanford Posted: Nov 15th, 12:43pm Activity: 4 replies, 116 views
|  | Looking for simple UI elements Author: FenixRoA Posted: Nov 15th, 6:40am Activity: 7 replies, 108 views
|  | HDD Help? Author: Phoenix Wynde Posted: Nov 13th, 2:31am Activity: 1 replies, 107 views
|  | Fun New Battles Posted! Author: ahstanford Posted: Nov 11th, 7:33pm Activity: 0 replies, 141 views
|  | 4-man Simon Tournament Author: ahstanford Posted: Nov 11th, 3:28pm Activity: 0 replies, 91 views
|  | Design Brief Inspiration for BioRUST Battles! Author: ahstanford Posted: Nov 11th, 7:19am Activity: 4 replies, 140 views
|  | The BioRUST Free Stock Photography Thread Author: ahstanford Posted: Nov 11th, 6:32am Activity: 2 replies, 146 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
 |
|
 |
 |
|