TutsArena

Easily create hosting servers in Photoshop

by TutsArena - Tutorials

About the author

TutsArena is dedicated to providing the best, free web design tutorials.

Visit TutsArena's Website | All Articles From This Author

It’s very easy to create a slick set of hosting-related icons in Photoshop. Read on to see exactly how it’s done in less than 10 steps.

Preview:

Hosting Rack Design.

Step 1:

Let’s start out by creating a new file. I used a 400×300 pixels canvas set at 72dpi, and I filled my background with white. Now create a new layer set and name it ‘Hosting Rack’. Then in a new layer use your brush tool and draw a black spot for shadows. In another new layer draw a gray rectangle with #CECECE color shade and 86 x 117 px dimensions on the black spot.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Glow, Satin and Gradient Overlay blending options to your gray rectangle layer.

Result:

Step 3:

In a new layer draw a small dark rectangle with #1A1A1A color shade and 86 x 6 px dimensions. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Result:

Step 4:

Duplicate the small dark rectangle layer 4 times and position them as shown below.

Step 5:

In a new layer add a small dark rectangle on the bottom end of the server design. Then set the layer’s opacity level to 18%.

Step 6:

Create a new layer and draw a small black circle with 15 x 15 px dimensions.

Step 7:

Under Layer Style(Layer > Layer Style) add an Inner Glow, Gradient Overlay and Stroke blending options to the small black circle layer. Then set the layer’s blending mode to Soft Light.

Result:

Step 8:

In a new layer draw a small black circle inside the blue circle design.

Step 9:

Merge your ‘Hosting Rack’ layer set so it turns into a regular layer through Layer > Merge Layer Set. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Satin blending option.

Result:

Final result:

Hosting Rack Design.

Download