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


Cubes Are Challenging - Page 3

January 19, 2001

Cubes can be a bit more challenging than spheres. Actually, they're a lot more challenging than spheres. But on the plus side you're now familiar with the Preset Shape tool, the color palette, and the Active Style Boxes. So let's get started.

First select your colors. Make the background color the same as the foreground color, but make it a lighter shade.

Set the foreground Active Style Box to Solid Color (the brush) and the background to Gradient. In the Gradient dialog box, select the Linear gradient, (the top box). Position the lighter color so that it is located in the top left corner of the sample, (the angle will be somewhere around 315).

Select the preset shape tool, making the following selections in the tool dialog box:

  • Select the rectangle
  • Retain style unchecked
  • Antialias checked
  • Line width: 1
  • Create as vector

You're going to need the grid for this one, and while all those little squares can be annoying, they can also make the difference in the final results of your image. The grid 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

Draw out a square that measures exactly 4 grid blocks by 4 grid blocks. Deselect.

Change the gradient angle of the background color so that the lighter shade is located in the bottom left corner, (angle about 226).

Draw a rectangle measuring 4 blocks wide by 2 blocks high just above your square. Be sure to line up the edges. Press CTRL + D to de-select the selection.

On the color palette click on the "L" shaped arrow to reverse the foreground and background colors. Click on the foreground style box and select the circle with the line through it to turn that style box off.

Again draw a rectangle, this time to the right of your original square. It should be 4 grid blocks high and 2 grid blocks wide. De-select the selection.

Activate the Object Selector tool.

Click once on the top rectangle to activate it. The selection will be surrounded by a bounding box. Position your cursor over the top center handle, press in the shift key, and drag the handle to the right until the right top corner is snugged up to the vertical grid line that meets the outer edge of the right hand rectangle. Deselect.

Activate the right hand rectangle and repeat the process, only this time drag the handle up until the corner of the rectangle is snugged up to the top right corner of the top rectangle.

Don't deselect; while you've still got the rectangle inside the bounding box position the cursor over the bottom right handle, hold in the shift key and slide the handle up one half block. Now, select the top box and do the same, sliding the top left handle one half block to the right.


Again, don't deselect. Hold the shift key in and click on first the right hand rectangle and then the main square. This will result in all three sides of your cube being selected.

Still holding the shift key in, drag the bottom left handle up by one half block to change the perspective of the cube face.


Add a shadow as a finishing touch. This is done by using the technique we learned for the sphere. Change the foreground color to black, the background color to white. Set the top Active Style box to null and the bottom Active Style Box to Gradient. In the Gradient dialog box, put a check next to Invert Gradient. You'll need to activate the background layer or the shadow will appear on top of the cube, so do that now in the Layers Palette.

We're all set, so draw a square 4 blocks by 4 blocks. Grab onto the top center handle and slide it to the right, while holding in the shift key. Hmmm... that shadows a little 'off', we'd better do a little manipulating to get it right. Still holding in the shift key, slide the bottom left handle up until the shadow disappears behind the cube. Then slide the bottom right handle down until the edge of the shadow is even with the bottom edge of your cube.

For a finishing touch, convert the shadow layer to a raster layer and blur the edges using the Retouch Tool > Soften. The edges of the shadow farthest from the cube should have the most blur while the edges of the shadow that comes right down next to the cube should have almost no blur. Use the Layer Palette opacity setting to fade the shadow out if it's too dark for your tastes.

Getting Around with Spheres - Page 2
From Flat to 3D
Of Cylinders and Cones - Page 4


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