3D Servers Integration

Recently we've been talking a lot about integrating 3D servers into website designs. We have even illustrated how great it looks at our official blog.

Today it's time for you to find out how to actually integrate our 3D servers into website designs. With this simple tutorial you will know how to do that in several steps. We assure you that there are no special skills or software components needed for that, you only use standard Adobe Photoshop tools. This time we will show you how to make this:

Click to enlarge

Ok, here we go.

1. Choose a design that you want to apply 3D servers to. It's recommended that you take a design of a website that is oriented towards hosting or dedicated servers so that servers would be something organic there.

Click to enlarge

2. Choose a server that you want to put into your design. In this particular tutorial this is Model #933.

3. Next is the server preparation. Make sure it has transparent background (servers from Templates.com always do have the transparent background), otherwise you will have to manually remove the background. Besides you should fit the server image's size for your design (or you can do it later when the server is already at the design with the "Free Transform" tool).

4. Then you should prepare some space at your website design for a server. Just move the layers with other elements (in this case we move them symmetrically to the right and to the left).

Click to enlarge

5. Next is you simply drag and drop the server layer to the design with a space prepared. Please mind the layers order as the servers have to be on top of all of the surrounding elements (except for the logo layer in this particular case).

Click to enlarge

6. Then we duplicate layer and flip it horizontally - this will be the second half of our servers section.

Click to enlarge

7. Move the second part to the proper place. In this example we move it to the left.

Click to enlarge

The result is several nice servers symmetrically oriented.

Click to enlarge

8. It would also be great if you add the shadows to the servers, it always looks so impressive! Create a new file and make a vertical line with a Brush tool (Brush radius is about 50-60 pixels, color is #6A6A6A for example).

9. Apply Gaussian Blur to it (Filter => Blur => Gaussian Blur, blurring radius is about 25-45 pixels) and select the height that you need.

10. Drag the selection to your initial design but be sure to put in under the servers layer. There you go - servers are now at your website design. Voila!

Click to enlarge

Well, there it is! You see that the process is indeed really simple and even fun. Enjoy it.