3d Worlds
1st edition — by Patrick McNeil — Jan. 3, 2006
The Design Element
By incorporating a sense of depth into a web site a designer can add a great
deal of interest. Typically when the the term 3d comes up most
people run for the hills. But many sites have added this
feel with out so much as considering how to build a 3d wire frame.
In the samples provided below two main elements are used to accomplish the
effect: careful usage of beautiful photographs, and subtle gradients. View
the two samples for a break down of how it is done:
Using Photographs
- A single photograph used as a background provides all that is needed
to establish a great deal of depth. Although the image appears as
the foreground, it is actually a background image in terms of
html. This allows the contact informantion to appear over the top of it
with no problems.
With Gradients
- Two gradients make up the background image. The top part is a 3 color
gradient. Notice the locations of the dark and light colors, similar to
what would be seen in a sunrise, the lighter colors being at the bottom.
- The second half of the background is a 4 color gradient. By using more
then 2 colors in the gradient a greater sense of depth and change is accomplished.
On the bottom part the horizon is further established by going from light
colors at the bottom to darker at the top, just as things would in the
real world.
- A 3d image placed in front of the primary content container is a key
tool in establishing the depth and hierarchy of the layout. Notice how
the zebra overlaps the bottom of the container.
Items such
as this simple 3d zebra can be built using the 3d
tools found in illustrator.
An awesome tool available to all designers which completely avoids the
typical complications of learning to render items in 3d. Be sure to try
out the Map Art feature, this is key to creating interesting elements, view
a video tutorial on the Map Art feature.
- Subtle reflections done in perspective are a sure way to add depth.
Reflection tutorials:
Creating
Basic Reflections
Understanding
Reflections
Ultra
simple reflections tutorial
- The rounded corners on the top of the content box versus the sharp corners
on the bottom further establish that the top is somehow not as connected.
In the end it is the small details which make the finished piece work.
Sample Usage
Links
Basic 3d illustrator tutorial
Map
Art Illustrator tutorial (quicktime)
All 3d Illustrator tutorials on adobe.com
More Extrude & Bevel Tutorials
Creating
Basic Reflections
Understanding Reflections
Ultra simple reflections tutorial
