Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout VPS Hosting Layout

VPS Hosting Layout


Let's start with a new document

Size 760x770 pixels
Background color : white

Select Rounded rectangle tool ( set the radius to 5 pixels ) and create a few shapes. i will use different colors, so you can see better what i am doing

image 1
Click to enlarge

Now for the red shapes ( our buttons ) please add the following layer styles

image 2

image 3

image 4

image 5

image 6

After i have applied the same layer style for all buttons here is my result

image 7
Click to enlarge

Now select the big black shape, and add the following layer styles

image 8

image 9

image 10

image 11

image 12

This is my result

image 13
Click to enlarge

Now for the other black shape add the following layer styles

image 8

image 15

image 10

image 11

image 12

This is my result

image 19
Click to enlarge

Now let's add a layer style for the blue shape

image 20

image 21

image 22

image 23

image 24

Now for the orange shape add the following layer styles

image 20

image 21

image 27

image 28

image 24

Now for the green shape add the following layer styles

image 20

image 21

image 32

image 33

image 24

This is my result

image 35
Click to enlarge

Now select the Blue shape layer.Hold down Ctrl key from your keyboard, and with your mouse click on the layer thumbnail.

image 36

You can see that your blue layer is selected.

image 37

Now create a new layer right above the blue layer. You can create the layer if you press Ctrl+Shift+Alt+N .

After you have created the layer, select Brush tool, and with a round brush ( Airbrush Soft round ) create some random lines on the new layer.

image 38

Now for this new layer change the blending mode to " overlay " and then reduce the opacity to 40%

image 39

Press Ctrl+D to deselect, and then you should have something like me

image 40

Be sure you have this layer selected , then press Ctrl+J ( this action will duplicate the layer )

With Move tool place the layer over the orange layer,

You can duplicate this layer 2 times, so you can place also one over the green layer

This is my result

image 41
Click to enlarge

Now it is time to add some images on this layout. i will add the 3D servers i have created in our previous tutorial.

image 42
Click to enlarge

Now i will add some text with Text tool

image 43
Click to enlarge

Between servers i will create another shape

image 44

Now if you have Talk-Mania Big-Pack

Please load some brush arrows and add the following arrows on our layout

image 45
Click to enlarge

For this arrows please add the following layer styles

image 46

image 47

image 48

image 49

This is my result

image 50
Click to enlarge

I will add a logo from VIP area.

If you want to know how to apply for a VIP membership please read the following tutorial: link

VPS Hosting Layout
Click to enlarge

I hope you like it.



Author's URL: amitk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "VPS Hosting Layout"

Captcha