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:

 

 

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.

 

 

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).

 

 

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).

 

 

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

 

 

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

 

 

The result is several nice servers symmetrically oriented.

 

 

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. Voilà!

 

 

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

Here’s one for you, my friends: why are obvious design requirements and being constantly declined and ignored on the Internet today? I mean if the modern design is about paying more and more attention to the visual aspect than this aspect should not be forgotten, right? And it’s not only a matter of fashion or being trendy, it’s more about the convenience and usability: the visitor today tends to spend less time on the website and therefore in order to deliver the message webmasters are to make this message more vivid. What happens in reality is that the designs for some reason stay old-fashioned and are overloaded with texts (that are in turn appear to be ignored in most cases). Don’t get me wrong – audience becomes no dumber and people do still read texts, but in order to stand more chances in turning the visitors into customers the designs HAVE to be optimized to be less time-consuming in delivering the message. Illustrate, my friends! That’s what will bring you fame and fortune.

 

Let’s take for example a web hosting sphere. Hosting providers were always considered to be the headliners in having their share of attention (which is easy to explain as they are the only tool of getting the precious space). “Wait a minute!”– you will say. “How can one possibly illustrate such an abstract concept as web hosting?” A good question as every good question it has to have a good answer Here it is: “DISPLAY HOSTING SERVERS AS AN ILLUSTRATION!”

 

Take a look at how it can be with the actual hosting websites examples (Server 3D Models from Templates.com have been used for this):

 

LunarPages.com

 

BEFORE:

 

 

AFTER:

 

 

Server 3d Model #1106 has been used here.

 

Velocity Servers

 

BEFORE:

 

 

AFTER:

 

 

 

Verio Servers

 

BEFORE:

 

 

AFTER:

 

 

 

There’s nothing revolutionary about it and that’s a tremendously simple design hint to be honest. Nevertheless for some reason only up to 30% (according to our own research) of all of the hosting providers apply it. Of course some of the big players can afford that as they already have their own loyal audience and their brand is powerful enough to attract new customers only by being presented at the top position of SERPs. But on the other had why not to diversify your means of influencing the visitor, after all this is a GUARANTEE of a greater conversion rate. Besides, it is a proved fact that if a person looks for a package or an offer where the word “server” appears he or she intuitively expects to see a nice shiny server that his data is going to be stored on. Another important thing is that text blocks are less comprehendible than the graphical illustrations and putting a server image is way much more striking than the text. Text is good for explanations and clarifying while images attract attention and impress. It’s a shame to ignore such an easy and effective tool.

 

To prove how great illustrations are if combined with an ordinary (or even extraordinary) text we will ourselves illustrate the things mentioned above. We have found several hosting providers websites that we think might want to consider some design improvements. These are all good companies by the way and they provide great quality services. PLEASE NOTE that we are not trying to offend any company’s reputation by this, we only generate suggestions and illustrate those suggestions. Besides this whole thing DOES NOT mean that they have a non-usable design, it’s only about diversifying their ways to attract even more customers.

 

Here’s another portion of striking examples. This time it’s not about actual hosting companies, just a couple of innocent designs that have had such a bad luck to get into our sight

 

INNOCENT EXAMPLE #1

 

BEFORE:

 

 

AFTER:

 

 

 

Server 3D Model #1331 has been used here

INNOCENT EXAMPLE #2

 

BEFORE:

 

 

AFTER:

 

 

Server 3d Model #933 has been used here.

 

INNOCENT EXAMPLE #3

 

BEFORE:

 

 

AFTER:

 

 

 

Server 3D Model #1239 has been used here

Quite impressive metamorphoses, huh? Once again, please remember that these are only our suggestions about how putting a simple image of a 3D server to where a visitor expects it to be can change the whole train of a visitor’s thought and urge him/her to take the mental steps that you need him/her to take.

 

Please feel free to express your thoughts and suggestions on this issue (no matter how critical they may be) in the comments to this post, we promise to answer every single question and take every single comment into consideration.

 

We also welcome your graphical variants of design suggestions for hosting providers’ websites. We will publish the best works as the updates to the post. Besides that we will reward the best redesign suggestions with discounts for the Templates.com products. Please be sure to use the Servers 3D Model images from Templates.com in your designs (okay if with the sample watermarks) and send the design screenshots to fred.murray[at]templates.com