How to Draw 3D Shapes for Websites
Drawing 3-D shapes for websites means drawing 3-D images viewable in a Web browser. There are two broad categories of methods for producing such images: drawing with the aid of design programs to produce the illusion of 3-D, and drawing without such aid. The aided type of drawing involves using 3-D modeling programs such as Blender or Google Sketchup. These programs can produce static images, or dynamic ones that users can manipulate (i.e. rotate, walk around). Drawing 3-D shapes for websites allows Web developers to provide a visual experience for their site's visitors that's richer than that available from 2-D images.
Other People Are Reading
Instructions
-
Method One: Draw 3-D Shapes by Hand
-
1
Open Microsoft Paint and click the brush tool. Click the black shade at the top left of the color palette, then draw a cube from a viewpoint that shows three of its faces. Refer to cube images on the Web, or cube-like shapes around your home (e.g. boxes) to help you draw this image. The reason for drawing a cube is its immediate familiarity: you recognize instantly that it's a 3-D shape.
-
2
Click the second gray shade from the top left of the color palette, then paint the cube's right side. This shade represents the side of the cube lit by indirect (i.e. ambient) light.
-
-
3
Click the first shade (black) at the top left of the color palette. This value represents the side of the cube that's in shade. Paint the cube's left side with the darker shade.
-
4
Click the third gray shade from the left, bottom row of the palette, then paint the top of the cube. This shade reflects the side of the cube exposed to direct (sun) light.
-
5
Save the image as a JPEG or GIF type with any file name description you choose.
-
6
Paste the following HTML code into a new Notepad document:
<html>
<body>
<img src="<YOUR_IMAGE_FILE_NAME>" >
</body>
</html>
-
7
Change the text "<YOUR_IMAGE_FILE_NAME>" to the name of the graphic file you saved in step 5.
-
8
Save the Notepad file in the same folder as the image you made, creating a file name with the extension ".htm," and with the type "Any type."
-
9
Open Windows Explorer, navigate to the sample Web page on your hard drive and double-click it to open it in your browser. The 3-D cube will display.
Method Two: Draw 3-D Shapes with a Modeling Program
-
10
Open a 3-D modeling program. Click the "Create" menu heading, followed by "cube" to enter the mode for drawing a basic 3-D shape, the cube. (Note that your program might call the "Create" menu something different. Search the help file for "object creation" to determine the specific menu heading.)
-
11
Click and drag in the drawing window to define a cube of any size.
-
12
Click the "File" menu, then "Export."
-
13
Type any file name in the "File Name" text box, but select "VRML 97 (WRL)" for the file type. This file type is for VRML (Virtual Reality Markup Language), a language similar to HTML for depicting 3-D scenes.
-
14
Install a freely available VRML plugin for your browser. This can be found using an online search.
-
15
Open Windows Explorer, then navigate to and double-click the WRL file you saved earlier. Your browser will open and display the cube.
-
1
References
Resources
- Photo Credit 3D image by Eagle from Fotolia.com
