Chapter 3

Adding Simple 3D Elements to Your Web Page

-by Kelly Murdock

CONTENTS

• Adding a 3D Look by Using Drop Shadows
• Using the Emboss Filter
• Using Perspective Deformations
• Using 3D Backgrounds in Your Web Page
• Manually Creating Tiled Backgrounds with Paint Shop Pro
• Using High-End 2D Tools
• Using Photoshop's Emboss Filter
• Using Photoshop's Lighting Effects
• Adding Stylized Depth Effects by Extruding with Photoshop
• Creating Quick and Easy Tiled Back-grounds with Fractal Design Painter
• Creating Extruded Outlines with CorelDRAW!
• 3D Effects Made Easy with Plug-In Filters
• Workshop Wrap-up

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.

Adding a 3D Look by Using Drop Shadows

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:

1. Select the text tool by clicking on the icon with a capital T in the Paint toolbar.
2. 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.
3. 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.

1. Open a new image and select black as the foreground color and green as the background color.
2. 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.

   
   

3. Now, double-click the small R icon next to the foreground and background colors to reverse the colors.
4. 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.

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.

Using the Emboss Filter

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.

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.

Using Perspective Deformations

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:

1. Open a new image and duplicate it by using the Window | Duplicate command.
2. 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.
3. Make a copy with the Windows | Duplicate command and create the opposite face with the Image | Mirror command; this creates a mirror image.
4. Select the original image, resize it to 200 ¥ 100, and apply the Vertical Perspective deformation at 90 percent.
5. Duplicate the image and select Image | Flip to create the final face.
6. 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.

Using 3D Backgrounds in Your Web Page

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.

Manually Creating Tiled Backgrounds with Paint Shop Pro

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:

1. Create a new image that is 96 ¥ 96 pixels.
2. 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.
3. 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.
4. Repeat this copy-and-paste process for the other three quadrants, copying each quadrant to its opposite corner.
5. 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.
6. 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.

Using High-End 2D Tools

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.

Using Photoshop's Emboss Filter

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.

Using Photoshop's Lighting Effects

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.

1. 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.
2. Select the Filters | Render | Lighting Effects filter to open a dialog box for selecting the light type, properties, and textures.
3. From the pull-down menu at the top of the dialog box, select the Xdown light style.
4. 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.

Adding Stylized Depth Effects by Extruding with Photoshop

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.

Creating Quick and Easy Tiled Back-grounds with Fractal Design Painter

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:

1. Start with a new file of any size. Under the Pattern menu in the Art Materials dialog box, choose Define Pattern.
2. Now, as you begin painting in the new workspace, the colors wrap around to the far edge as you cross over them.
3. 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.
4. 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.
5. 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.

Creating Extruded Outlines with CorelDRAW!

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:

1. 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.
2. 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.
3. 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.

3D Effects Made Easy with Plug-In Filters

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.

1. Run the setup disk to install the filters, which are typically saved and accessed from the plug-ins subdirectory of your image-editing package.
2. Now run Photoshop and open an image. If you choose Filters | Alien Skin, the Cutout filter becomes available.
3. 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.
4. 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.
5. 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):

1. Select the area of the image you want to distort.
2. 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.
3. 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.

Workshop Wrap-up

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.