Graphics and Templates

Creating 3D Websites

Posted on: April 28, 2011

These days 3D technology is at its peak. Do you also want to use this technology and create a 3D website? If your answer is yes then you must first learn to do this and for this purpose I have come up with some simple steps that will help you to create a 3D website:

  • Firstly you have to open Photoshop and click File followed by New. Now you will create a new canvas which should be 600 pixels in height, 960 pixels in width and 180 pixels per inch. After doing that, click OK.
  • Now click the rectangle tool in the tool box. In order to create a rectangle, left click on the canvas and drag mouse. This will serve as header background image for website. If you want to change color of rectangle, you will have to double-click the layer thumbnail in the layers panel which is in bottom right and now select a new color.
  • Next step is to create a 3D effect for the rectangle layer and then right click on the rectangle layer in layers panel. Choose Blending Options and check Drop Shadow. Now click OK. You will see your box appear to hovering about the background. Using the Blending Options, you can adjust the drop shadow or additional 3D effects.
  • Develop a 3D title on the top of box which will serve as title of your 3D website. In the toolbox, click the text tool. After this, left click the mouse on the top of header box and drag the mouse in order to create a text box. Now you will type a title for your 3D website.
  • In the layers panel, right click the 3D title. Now choose Blending Options and then select Drop Shadow. Click Ok. You title should appear to be hovered above the header box.
  • For any additional areas you want to generate like navigation, footer or body content boxes, you can repeat step two and three.
  • In the top main menu, click Layer and pick Flatten Image. By doing this, your 3D website design will turn into flat graphic.
  • While using crop tool, choose header graphic by holding down the left mouse button and then dragging the box until it covers entire graphic.  To crop the image, press Enter on keyboard. Now click File and Save for Web. Now select JPG and click OK. This will help you to create a separate JPG file for the header. If you want to create more 3D graphics, you can repeat this step.
  • Now you have created 3D graphics which you can use in your 3D websites. These graphics can be used to develop a 3D website.

Hopefully these steps would help you a lot so follow these steps to create your own 3D website.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

Hi, My name is Tania Yellob and I love to write. This is my blog and I love to hear from you regarding my writings. Recently, I have started creating contents and templates for a famous website BuraqPrintables. Please visit it and let me know hows my work and any improvements I can do?


%d bloggers like this: