How to Create 3D Web Sites
Websites that are 3D are a graphical illusion produced in the graphic design phase in Web development. While more options are becoming possible with the use of cascading stylesheets (CSS), these advanced features aren’t visible in all Web browsers, therefore, graphics are still the most common way to produce 3D websites. If you want to create 3D websites, try implementing these instructions in the graphic design phase before creating the code for your website. You should have a firm understanding of cascading stylesheets and Web development to add these graphics to your website after following these instructions.
Other People Are Reading
Instructions
-
Instructions
-
1
Open Photoshop. Click “File” followed by “New.” Create a new canvas that is 960 pixels in width, 600 pixels in height, and 180 pixels per inch. Click “OK.”
-
2
In the tool box, click the rectangle tool. Left click on the canvas and drag the mouse to create a rectangle. This will act as the header background image for the website.
To change the color of the rectangle, double-click the layer thumbnail in the layers panel in the bottom right. Select a new color.
-
-
3
Create a 3D effect for the rectangle layer. Right click on the rectangle layer in the layers panel. Select “Blending Options.” Check “Drop Shadow.” Click “OK.” Your box will now appear to hover about the background.
You can adjust the drop shadow effect or add additional 3D effects under “Blending Options.”
-
4
Create a 3D title on top of the box. This will act as the title of your 3D website. Click the text tool in the toolbox. Left click the mouse on top of the header box and drag the mouse to create a text box. Type a title for your 3D website.
-
5
Right click the 3D title in the layers panel. Select “Blending Options.” Select “Drop Shadow” and click “OK.” Your title should appear to hover above the header box.
-
6
Repeat steps 2 and 3 for any additional areas you want to create, including navigation, footer or body content boxes. If you want to include 3D lettering in these sections, also repeat steps 4 and 5 over these new boxes.
-
7
Click “Layer” in the top menu. Select “Flatten Image.” Your 3D website layout will become a flat graphic, suitable for Web design.
-
8
Using the crop tool, select the header graphic by holding down the left mouse button and dragging the box until it encompasses the entire graphic. Hit “Enter” on the keyboard to crop the image. Click “File” and “Save for Web.” Select JPG and click “OK.”
This will create a separate JPG file for the header. Repeat this step for each additional 3D graphic you created.
-
9
You have successfully created the 3D graphics to use for your 3D website. Use these graphics in the development phase to make your website appear 3-dimensional.
-
1
Tips & Warnings
Experiment using CSS3 techniques to get 3D effects in Web browsers likes Firefox, Chrome and Safari. Internet Explorer users will not see these effects, but implementing these ideas will encourage upgrading and innovation.
References
Resources
- Photo Credit Blank Card 3D image by Aleksandr from Fotolia.com
