Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Getting Around with Spheres - Page 2

January 19, 2001

Spheres are probably the easiest of geometrics to create. Draw a circle, fill it with a gradient and wah-lah, instant sphere... or is it.

The secret to great spheres is in having the proper shading for the sphere and the correct shadow angle. Each of the three spheres below was created from the same base color, the highlight is a lighter shade of the same color... all the way to white.


basic red - hue: 255, saturation: 255, light: 125
A highlight close to the base color of the sphere creates the effect of a very soft light. The shadow would need to be equally as soft, with blurred edges.

basic red - hue: 255, saturation: 255, light: 212
A medium highlight simulates.... you guessed it.... a medium light. The shadow should be soft, slight blur to the edges.

basic red - hue: 255, saturation: 0, light: 255
The bright highlight gives the impression of a bright light shining on the sphere. A shadow would need to have sharply defined edges close to the object and a slight blur at the outer edges.

So exactly how do we make a sphere?

Start by activating the Preset Shape tool. In the Tool Options dialog box select the Ellipse shape, de-select "Retain style", check "Antialias" and "Create as Vector". The line width and style can be left as is; we won't be using the foreground/stroke style at this point.

To make sure your circle is perfectly round, turn on the grid which can be accessed from the menu bar, under View > Grid and View > Change Grid and Guide Properties. In the Change Grid and Guide Properties dialog box, make the following settings:

  • units: pixels
  • horizontal spacing: 20
  • vertical spacing: 20
  • line color: your choice

Select your foreground and background colors. The foreground color will be the highlight, remember to adjust it according to the amount of light you want displayed on the sphere. The background color is the color of the sphere itself.

Set the foreground Style Box to null, the background to gradient. Click inside of the background Style Box to open the Gradient dialog box and make the following settings:

  • Horizontal: 30
  • Vertical: 32
  • Style: Sunburst (third button from the top)
  • Make sure Invert Gradient is unchecked

We should be all set now. Using the grid as your guide, draw out a circle on the canvas. And there you have it, a sphere sans shadow.

The Shadow Knows

Equally important as the sphere shading is the shadow shading and position. Great sphere shadows are created much like spheres, with the Preset Shape tool and a gradient fill. Set the background Active Style Box to Gradient (if it isn't still set from creating your sphere). The foreground Style Box should be set to null.

Change the background color from the color you selected for your sphere to black. The foreground color should be white, if it isn't already. Open the Gradient Dialog box and put a check in the box next to Invert Gradient. That's the only change you'll need to make here, so exit the dialog box.

Your sphere should have automatically gone to it's own layer when you created it. If at this point you attempt to create the shadow, it will go on the same layer as the sphere. Not good. The shadow will appear to be laying on top of the sphere. Go into the Layers Palette and click on the background. Now when you create your shadow it will also go to it's own layer and be beneath the sphere, where it belongs. Alternately, you could create the shadow on the same layer as the sphere and move the layer that contains the shadow below the layer that contains the sphere.

Using the Preset Shape tool, draw an oval. You can drag the handles on the bounding box around to stretch the shadow out or re-shape it; twist the shadow with the handle in the center of the bounding box if the light is coming from the front. Use what ever tools you need to get that shadow right. If you have to, set up a light and a ball on your desk to compare the real shadow to the one you are creating. Remember when working with spheres that a small portion of the shadow should appear on the same side of the sphere as the light source.

Once the angle is correct, use the Retouch tool, Soften setting to smooth the outer edges of the shadow, leaving the shadow edge close to the object alone. Fade the shadow out by adjusting the layer opacity in the Layers Palette.

From Flat to 3D
From Flat to 3D
Cubes Are Challenging - Page 3



Up to => Home / Authoring / Graphics / Tools / PSP7 / 3dGeo




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers