All Categories :
VRML
Chapter 3
Adding Simple 3D Elements to Your Web Page
-by Kelly Murdock
CONTENTS
Welcome to Chapter 3. Hopefully, you're
here because you liked the Web pages you saw in the first two
chapters and want to do the same to your own pages. Well, just
as every voyage begins with one step, learning to make a 3D Web
site begins with one chapter-and this is it.
If you're convinced that adding 3D elements to your Web page will
give it the look you want, you may be ready to run out and buy
an advanced package to do 3D graphics. Before you do, you might
want to consider using the tools you already have in your arsenal.
Several fancy 3D graphics effects can be produced with simple
paint programs, such as Paint Shop Pro (which is on this book's
CD-ROM):
- Learn to quickly add a 3D look to text and objects by using
drop shadows.
- Use the Emboss filter to make elements appear raised from
the surface.
- Discover how to add perspective to your images.
- Adjust the brightness of your background images to make the
foreground text more legible.
- Create tiled backgrounds that are seamless.
If you're lucky enough to have more sophisticated 2D packages,
such as Photoshop or CorelDRAW!, then countless effects are possible;
this chapter will also teach you how to use them in your Web pages.
- Use Photoshop's lighting effects to add realism to your images.
- Create stylized depth effects with Photoshop's extrude filter.
- Learn how Fractal Design Painter can be used to quickly create
seamless tiled background patterns.
- Take a look at CorelDRAW!'s powerful extrude features.
- Discover how Photoshop plug-ins can add specialized 3D effects.
That's a lot to cover in one short chapter, but then 2D packages
shouldn't be sold short. They have been around much longer than
their 3D counterparts and have learned a thing or two about "faking"
3D.
Perhaps the simplest effect is to add a shadow to 2D objects.
This is done by copying the object and changing its color (most
often black is used), then positioning the original object diagonally
offset from the shadow. Many paint packages have commands that
automate this process. Paint Shop Pro, for example, offers a couple
of ways to do this.
Drop Shadows on Text
The Text dialog box in Paint Shop Pro has a Shadow option; to
use it, follow these steps:
- Select the text tool by clicking on the icon with a capital
T in the Paint toolbar.
- With the tool selected, click anywhere in the image to open
a dialog box, where you can specify the font, size, and style
of the text. There is also a checkbox for enabling a shadow. Type
in your text and select this checkbox, and your text will be displayed
with a shadow when you hit the OK button.
- Position the text where you want it and click the button to
set it. The color of the text and the shadow will be determined
by the foreground and background colors selected in the Paint
toolbar.
The resulting text from the drop shadow option set in the Text
dialog box can be seen in the top of Figure 3.1. The drawback
to using this method is that it's limited to text and the 1-pixel
shadow offset cannot be changed. So take a look at how this same
effect can be done by hand:
Figure 3.1: Creating drop shadows in Paint Shop Pro.
- Open a new image and select black as the foreground color
and green as the background color.
- Next, select the text tool and click anywhere in the image
workspace to open the Text dialog box. Type your text in the text
field, make sure the shadow checkbox is cleared, and click the
OK button. The text appears as a floating object that moves around
with the cursor. Position the text and click the mouse; the text
appears in black.
Tip |
Floating objects are objects that aren't yet part of the image. Their position is controlled by the mouse movements. By holding the mouse still, the object looks the way it will when set in the image. Click the mouse button, and the object is permanently set in the image. This technique lets you see what the final image will look like before it's set.
|
- Now, double-click the small R
icon next to the foreground and background colors to reverse the
colors.
- Then, with the text tool still active, click in the image
workspace again and click OK in the Text dialog box. The same
text will become a floating object. Position the text above and
slightly to the left of the black text and click the left mouse
button. The resulting green text will have a black shadow offset.
Applying Drop Shadows to Nontext Objects
Besides text, this method can be used for any type of 2D object
as well. The embellishments in Figure 3.1 used the same technique
except that the Magic Wand tool and the Cut, Copy, and Paste functions
were used to select and position the object. Be sure to place
the shadow down first so that the actual object isn't obscured.
The bottom half of Figure 3.1 shows the possibilities of using
this second method.
Caution |
Notice in Figure 3.1 that the holes in the embellishment don't have a shadow. In Paint Shop Pro, you can't select interior areas that are a different color with the Magic Wand tool. A workaround solution is to connect the interior sections to the background with a thin line that you can erase once the effect is complete.
|
Creating Skewed Drop Shadows
For a more realistic effect, the shadow can be skewed to give
the perception that the light source is located in a different
position. Try using the Image | Deformations | Skew command on
the shadow copy. Then position the original on top of it, matching
up the bottom lines. This can be used to create the effect of
different times of the day, as shown in Figure 3.2.
Figure 3.2: Using skewed shadows to give the appearance of a light source at different positions.
Filters are mathematical algorithms that change the image
in preprogrammed ways. They can be used to alter an image in one
bold process, thereby replacing a lot of tedious handwork. Several
of these processes can be used to create 3D effects.
The drop shadow effect adds only a shadow to the object, but the
Emboss filter adds a highlight and a shadow. This gives the embossed
object a relief look,
as if the embossed object sticks up from the surface. The filter
does this by changing the original object to gray, using the object
color for the highlight on one side of the object, and using a
complementary color for the shadow on the opposite side.
The Emboss filter is fairly common and can be found in most paint
programs, including Paint Shop Pro. As an example of applying
the Emboss filter, the results of the Web Tournament of Champions
are assembled in Figure 3.3.
Figure 3.3: Results of your Web Tournament of Champions with the Emboss filter applied.
Caution |
Filters can be applied only to high-resolution images. In the lower-left corner of the status bar, you can see the size and color depth of the current image. If your image is not in 16 million color format, select Colors | Increase Color Depth | 16 Million Colors (24 Bit).
|
Since you want to apply the Emboss filter to the entire image,
there is only one step. Select Image | Special Filters | Emboss.
The results can be seen in Figure 3.3. Notice that the angle of
the emboss effect is parallel to some of the lines, so they seem
to disappear.
One of the deformation filters that can be used to create a 3D
look is the Perspective filter. If you're looking down a country
road lined with trees, you will notice that the farther away the
tree is, the smaller it looks. That's how perspective works.
In Paint Shop Pro, there are two such filters: one for horizontal
perspective and the other for vertical perspective. Each gives
you a dialog box with a preview window and a control to change
the percent of the effect.
Try using the Horizontal and Vertical Perspective deformation
filters to create a wood box for your Web page:
- Open a new image and duplicate it by using the Window | Duplicate
command.
- Next, resize the image to 100 ¥
200 with the Image | Resize command and apply the Perspective
filter with the command Image | Deformations | Horizontal Perspective.
Enter the value of 90% into
the dialog box and click OK. The right edge of the image will
shrink.
- Make a copy with the Windows | Duplicate command and create
the opposite face with the Image | Mirror command; this creates
a mirror image.
- Select the original image, resize it to 200 ¥
100, and apply the Vertical Perspective deformation at 90 percent.
- Duplicate the image and select Image | Flip to create the
final face.
- Now copy all the images into a new 250 ¥
250 image file and position them as shown in Figure 3.4. Finally,
add the borders in with the fill tool.
Figure 3.4: Using the Perpective filtr in Paint Shop Pro to create a four-sided perspective image.
Once you're finished with your image, you can decrease the color
depth again by using Colors | Decrease Color Depth | 256 Colors
to significantly reduce the file size. The image can then be saved
as a GIF file. You can also save the image as a JPG file without
reducing the color depth. JPG save options allow you to specify
the amount of compression to be applied to the image. The greater
the compression setting, the smaller the image file size, but
the worse the quality. Most images can be set to a 50 percent
compression setting without noticeably affecting the image quality.
Backgrounds can really give your Web site that 3D feel, but they
need to be used with care. Placing a detailed 3D image as your
background looks great, but it also makes it difficult for visitors
to read the text on your Web page, no matter what text color you
use.
Another difficulty is dealing with the file size of backgrounds.
Nobody likes a slow-loading Web site. The two best ways to reduce
file sizes are to reduce the color depth and to reduce the overall
size of your image. It's not often recommended that you use fewer
than 256 colors for your 3D images, so one of the best ways to
use smaller images is to tile them across the page. HTML does
this automatically for background images.
Increasing Brightness of Backgrounds to Emphasize Text
If you are intent on using one of your 3D images as a background,
there is a simple way to ensure that the text is legible. Increasing
the brightness of the image fades the details and still lets users
see the image. A background image brightened by 50 percent lets
you use a dark text color that will be legible.
In Paint Shop Pro, use the Colors | Adjust | Brightness/Contrast
command and set the value between 50 and 80 percent. A setting
of 100 percent will wash out the image entirely, leaving a pure
white image-and there are easier ways to do that.
Figure 3.5 shows a good example of using a background in this
manner. For this example, I used a brightness setting of 40 percent.
Figure 3.5: Adjusting the brightness of the background image to ensure that the text is legible.
However, notice the strong seams at each edge of the image. It's
easy to tell that the background is tiled from one image. If you
can match the opposite edges, you can make your backgrounds look
like one consistent image.
Tiled backgrounds are one of the best ways to get a lot of benefit
out of small image files. A small image can be repeated to cover
entire Web pages no matter what the size is. The trick to making
the images look good is to eliminate the seams by matching each
edge to the opposite edge.
Simple image-editing packages like Paint Shop Pro can be used
to create seamless tiled backgrounds with a special trick. The
trick is to divide your image so that the seams on opposite sides
match up. You can do this by splitting the image into four quadrants
and copying each quadrant diagonally to the opposite quadrant,
then removing the newly created seams.
Because each quadrant of the original image is repositioned, this
isn't a good technique to use for objects that need to remain
consistent, such as a picture of an eye or a car. However, it
works well for abstract backgrounds. To do this with Paint Shop
Pro, try the following:
- Create a new image that is 96 ¥
96 pixels.
- Next, use the rectangular selector tool to select the upper-left
quadrant of the image from 0,0 to 47,47 and copy it onto the Clipboard.
The coordinates are shown on the status bar at the bottom of the
window.
- Create another new image that is 96 ¥
96 pixels, and paste the image quarter with the Edit | Paste |
As New Selection command into the new image. Then position it
in the lower-right corner and click the button.
- Repeat this copy-and-paste process for the other three quadrants,
copying each quadrant to its opposite corner.
- When you're finished, two seams remain, running horizontally
and vertically through the image. Use the drawing tools to hide
these seams, then save the image.
- As a final step, apply the Emboss filter and save the image
as a JPG file to be used as a background.
Figure 3.6 shows this process in four windows. The upper-left
window shows the original image, and the upper-right shows the
new image created from the pasted corners. The lower-left window
shows the image after the seams have been touched up, and the
lower-right window shows the image after you've applied the Emboss
filter. The larger image to the right is an example of the tiled
image.
Figure 3.6: Creating a seamless background with Paint Shop Pro by moving each quadrant to the opposite corner.
Low-end tools like Paint Shop Pro are a good place to start, but
they often require a lot more work to accomplish simple effects.
There are many advantages to working with high-end image-editing
packages, such as Adobe Photoshop, Corel PHOTO-PAINT, and Fractal
Design Painter.
These packages make a lot of effects easy to accomplish, but they're
very sophisticated and often require some time to learn. Many
artists and designers spend years learning these tools. Without
getting too deep, take a look at some 3D tricks that these products
make easy.
Adobe Photoshop can also create the drop shadow and emboss effects
you just learned with Paint Shop Pro. The advantage to Photoshop
is the ease and control you have. For example, Paint Shop Pro
won't let you select separate areas not connected by similar colors,
so it becomes cumbersome to apply filters on text.
Take a look at how Photoshop does embossing:
- First, select the line or object you want to emboss by using
the Magic Wand tool. You can easily select other areas regardless
of color by holding down the Shift key and selecting elsewhere.
- Once you're satisfied with your selection, then choose Filter
| Stylize | Emboss. This activates a dialog box that lets you
specify the direction and height of the emboss and the percentage
amount of the original image that the Emboss filter uses. These
added controls are one of the chief advantages of high-end tools.
Tip |
The most recently used filter jumps to the top of the Filter menu and can be selected quickly without navigating the menu choices.
|
In addition to the effects already covered, Photoshop is capable
of several unique 3D effects that aren't possible with low-end
tools. One of these is lighting effects. Photoshop can control
the direction, amount, and angles at which the light falls on
an object.
- Open the image you want to apply lighting effects to in Photoshop.
I'm using the rubber duckie image from the Photoshop Deluxe CD-ROM
for this example.
- Select the Filters | Render | Lighting Effects filter to open
a dialog box for selecting the light type, properties, and textures.
- From the pull-down menu at the top of the dialog box, select
the Xdown light style.
- In the preview window, drag the handles to change the direction
of the light and click OK when you're satisfied.
Figure 3.7 shows a before-and-after example that uses the Lighting
Effects filter.
Figure 3.7: Using lighting effect in Photoshop can add on element of realism to the image.
Do you remember in grade school when you learned to make a cube
out of a simple square by drawing parallel diagonal lines? Well,
the same method can be used to create 3D elements for your Web
page. Extruding is
just that-adding depth to an object by extending parallel lines
from each corner.
In Photoshop, the filter breaks the selected area up into squares
and separates them with an extrusion depth. The size of the squares
and the extrusion depth are controlled by using dialog box, opened
with the Filters | Stylize | Extrude command. This dialog box,
along with an example, is shown in Figure 3.8.
Figure 3.8: Using
Photoshop's Extrude filter to create a special 3D look.
Remember the trouble you had to go through to create a seamless
tiled background in Paint Shop Pro? Perhaps the slickest way I've
found to create these backgrounds is by using Fractal Design Painter.
Painter has a feature that lets you paint an image and match the
opposite edges automatically.
Creating tiled backgrounds in Painter is as easy as this:
- Start with a new file of any size. Under the Pattern menu
in the Art Materials dialog box, choose Define Pattern.
- Now, as you begin painting in the new workspace, the colors
wrap around to the far edge as you cross over them.
- Try painting with the Image Hose, found in the Brushes drawer.
This tool overlays several different images as you drag the pointer
over the image. As you paint near an edge, notice how half the
image shows up on the opposite edge.
- When you are done painting, you can check the background by
saving the pattern to the library with the command Pattern | Add
Image to Library. Give the pattern a name, then open a new image
larger than the pattern and fill it by using the fill tool.
- Save the file and use it as your background image.
A good sampling of tiled 3D backgrounds can be seen in Figure
3.9. These backgrounds took about five minutes to create using
the Image Hose tool and several of the nozzles found on the Painter
4 CD-ROM. The Painter Help file has a warning that creating patterns
can be addictive, and I can testify that this is true. Once you
start creating patterns in this way, you won't want to go back
to any other tool.
Figure 3.9: Using Fractal Design Painter, you can easily and quickly create tiled backgrounds.
Because Painter is a tool that simulates working with natural
media, it allows you to use all types of textures, like canvas,
wood, and different grades of paper. These textures, when applied
to images, give them a look of depth. For subtle textures with
a 3D look to them, you should look into using Painter.
Although image-editing software, such as Photoshop, has capabilities
for tasks like extruding and adding perspective, the real pros
at these effects are vector-based drawing packages, like Adobe's
Illustrator, Macromedia's FreeHand, and CorelDRAW!.
Take a look at how you would use the extrude feature of CorelDRAW!
6:
- Open a new image and place a 2D outline within the image.
For this example, I selected a symbol from the symbol library
by using the Tools | Symbols command.
- From the Stars1 font, set the size to 7 and drag the symbol
over to the page. The star outline shows up on the page.
- Access the Extrude roll-up menu by choosing Effects | Extrude.
The Extrude roll-up menu has five tabs. The first lets you select
preset options, the second controls the type and level of depth,
the third controls the rotation, the fourth the lighting options,
and the final tab controls the colors.
Once you've set the options you like, click the Apply button and
the outline will appear on the page.
You can see from this example in Figure 3.10 the types of features
that drawing packages offer. Because these packages deal with
vector lines, they have precise control over how the outlines
are manipulated.
Figure 3.10: A simple extrusion of a star outline done with CorlDRAW! 6.
Keep in mind when working with drawing packages that you can't
save them as GIF or JPG files. To use images created with vector-based
drawing packages, you have to export the file to a raster format,
like BMP, GIF, or JPG. If GIF or JPG isn't an export option (as
in CorelDRAW!), then export the image to BMP and convert the file
in Paint Shop Pro by opening the file and using the File | Save
As command to specify the format you want.
The easiest 3D effects to use are the ones built in to Photoshop,
like the Emboss or Extrude filters. However, because of the open
nature of the software, Photoshop isn't limited to these built-in
functions. Many third-party companies build plug-in modules that
add functions to the existing package.
These plug-in packages work like the plug-ins for Netscape Navigator
do. From within Photoshop, they show up as additional menu items
launching helper applications that work within Photoshop. There
are several of these applications that can add amazing 3D effects
very easily.
In addition, many other image-editing packages support this same
technology, so these plug-in filters aren't limited to working
only with Photoshop. Fractal Design Painter, Corel PHOTO-PAINT,
and even Paint Shop Pro can use these filters also.
Using Alien Skin Software's The Black Box
Alien Skin Software has a set of plug-in filters called The Black
Box; although not the most popular of the third-party plug-in
filters, it's probably one of the best for adding 3D effects.
The Black Box 2.0 contains 10 plug-in filters, including several
that apply 3D effects:
- Drop Shadow-allows precise control over the X and Y offset
and the blur and opacity of the shadow.
- Cutout-inverted shadow effect creates a hole in the image
out of the selected area.
- Inner Bevel-makes the selected area appear raised from the
image surface by adding highlights to the inner edge of the selection;
works great for creating buttons.
- Outer Bevel-another type of bevel that highlights the edges
outside the selection.
- Carve-is the opposite of the Inner Bevel filter and makes
the selection look indented into the image surface.
The Black Box has other filters that can add interesting effects
to whatever image you're creating. A sampling of the types of
effects possible with The Black Box are shown in Figure 3.11.
Figure 3.11: Using The Black Box filters by Alien Skin Software to create 3D snowflakes.
Take a quick look at how the Cutout filter works in Photoshop.
This filter is included on the book's CD-ROM as a sample, courtesy
of Alien Skin Software.
Tip |
Most plug-in filters work only when the computer is set to display 24-bit color (16 million colors). They can be used at other color depths, but the interfaces are difficult to see.
|
Caution |
The Black Box filters will not work in Paint Shop Pro. The filters load okay and run okay, but seem to cause the program to shut down when applied. So, if you try using the filters in Paint Shop Pro, save your images before testing them.
|
- Run the setup disk to install the filters, which are typically
saved and accessed from the plug-ins subdirectory of your image-editing
package.
- Now run Photoshop and open an image. If you choose Filters
| Alien Skin, the Cutout filter becomes available.
- Use the Magic Wand tool to make a selection in the image and
access the Cutout filter. A dialog box opens with controls that
allow you to change the X and Y offset, blur, and opacity of the
shadow. You can also select the color of the shadow and the fill
with the foreground and background options.
- Unique settings can be saved and added to the selection drop-down
menu above the preview window. Choose the Subtle option and click
the OK button.
- After applying the filter, the image looks like a hole has
been cut out of it.
Creating 3D Effects with Metatool's Kai's Power Tools
One of the best-selling plug-in filter sets is Kai's Power Tools
(KPT) by Metatools. Among the vast array of tools included in
this package are several that are excellent at creating 3D effects,
including filters for glass lens, page curl, and the new spheroid
designer.
KPT's Glass Lens Filter
Remember the old magnifying glass you used to burn ants? Well,
Kai's Power Tools has a filter that distorts your selection in
a similar manner. It's called the Glass Lens filter and is fairly
easy to use (and not nearly as dangerous for small bugs):
- Select the area of the image you want to distort.
- Use the Filter | KPT 3.0 | KPT Glass Lens 3.0 command to open
a dialog box for setting how the effect interacts with the image.
- Apply the filter by clicking the small green button in the
lower-right corner of the dialog box.
This effect, along with some others done with KPT, can be seen
in Figure 3.12.
Figure 3.12: Three examples using Kai's Power Tools: Glass Lens effect, the Page Curl effect, and an effect using the Spheroid Designer.
KPT's Page Curl Effect
The Page Curl effect is just that-an effect that makes the page
look like its edge is curled. This filter is applied much the
same way as the Glass Lens filter explained previously. It lets
you control the corner and direction of the page curl as well
as the opacity of the curled edge. You can see an example of this
effect in Figure 3.12.
KPT's Spheroid Designer
This filter is much more versatile than the other KPT filters
covered so far. It's actually a helper application that gives
you precise control over the spheroids you place in your image.
The example in Figure 3.12 uses the Spheroid Designer for a simple
effect, but much more complex and distorting options are available.
Some of the controls in the Spheroid Designer include the illumination
of spheres, the number of spheres, the curvature and transparency
of spheres, and the randomness of all the spheres. Boy, there
are spheres showing up everywhere! You can also use bump maps,
which are images that help define how the surface is textured.
By now your 2D tools are probably exhausted, so why don't you
give them a chance to catch their breath? Not too long, though,
because you'll use them again. They will be instrumental in creating
textures and materials used to dress up your 3D models.
If you take the 3D effects gleaned from this chapter and place
them in your Web page, you will earn a few hurrahs-and you've
just started. It's time to move on; the third dimension awaits.
Now, where did I put that other dimension?
Next Steps
Don't feel like you have to take this book chapter by chapter.
The end of each chapter includes a "jump list" like
this one to guide you in your journey:
- To jump into the 3D world and learn how to produce and use
true 3D images, move on to Chapter 4, "Creating
and Embedding 3D Rendered Images."
- If you've had enough images and are ready for animation, skip
to Chapter 6, "Using Animation Plug-Ins
in Your Web Page."
- To see an example of how these 3D elements are used in a real-world
example, jump to Chapter 12, "Real-Life
Examples: Creating a MYST-like Adventure on the Web."
- If you're anxious to get into VRML, then hop over to Chapter 11,
"Using Microsoft's ActiveVRML."
Q&A
Q: | What are the differences between image-editing packages like Photoshop and drawing packages like CorelDRAW!?
|
A: | Image-editing packages, also called paint packages, are raster-based, which means they deal with pixels-rows and columns of dots that make up the screen. Each pixel can hold essentially one color. If you zoom in on an image, you will eventually see the individual pixels.
Drawing packages are vector-based. Vectors are line elements defined mathematically. Every time the screen is redrawn, the vectors are recalculated; therefore, when you zoom in on a vector, it still looks like a line. Some fonts use vectors so that they stay smooth at any size.
|
Q: | Which are better at producing 3D effects, image-editing packages or drawing packages?
|
A: | It really depends on the type of effect you're looking for. You have more control with effects involving lines, such as extruding, if you use a drawing package. Softer effects, such as a blurry look to drop shadows, look better done with a paint package because you can more easily spread the pixels around.
|
Q: | Can I use the images created in this chapter in my 3D software and vice versa?
|
A: | I'm afraid the answer is like a one-way street. Still images created in a 3D environment can be saved as a picture and edited in an image editing-package, but when they're saved, all 3D information is lost. A 2D package doesn't know what to do with the 3D information, so it simply discards it. Conversely, when 2D images are imported into 3D packages, they show up as flat images. They can be viewed or even wrapped around 3D objects, but they are still flat.
|