Let's start this hosting layout tutorial with a new document with the following size: 960 x 900 pixels. For this layout I will use the following color for the background: #2f2617
With Rectangle Tool I will create another shape, with the following color: #20190f and I will place the shape like in the following image:
I will create another shape and I will place it like on the top of the previous one.
I will add the following layer styles for this orange shape
If you are serious about designing, then apply for a VIP account, and you will be able the following set of Gradients: 27.000 Gradients
The gradient from above was from that pack.
With Rectangle Tool you will need to create another shape. I will use this shape to create a shadow under the header of the layout.
Duplicate the shape, and change the color to black. Place the black shape under the original one, and go to Edit - Transform - Perspective. With Move Tool drag the left right corner of the shape to the right
After you press on Enter to apply the changes, you need to go to Filter - Blur - Gaussian Blur. Feel free to use any value you want.
And this is my result
With the same technique I will create the same effect on the footer of our hosting layout. You can click on the following image to see the full size hosting layout.
With Rectangle Tool I will continue to work on my navigation bar at the top.
For this navigation bar I will add the following layer styles:
I will create now a new layer on top of all layers and I will create a 1 pixel line with Pencil Tool (if you want to create the line perfect horizontally then you need to hold down the shift key)
You can change the blending mode for this layer to overlay
Now I will select Rounded Rectangle Tool, and I will create seven shapes. Please click on the image to see better how I placed the shapes.
I will add the following layer styles for all these shapes
This is hosting layout looks like. Click on the image to see the full size image.
On the left side of the layout I will create a black shape, and I
will reduce the opacity to 30 %. The same I will create also on the
right side. I want to create a 3D look for this hosting layout.
With Rectangle Tool
I will create another shape where I will place the logo with Grafpedia.
As you can see it is the same layer style as we have used on our
navigation bar.
I will add some text, and on a new layer I will draw a thin line on top of the shape. To create a new layer press on CTRL+SHIFT+ALT+N) then with Pencil toll I will make the line.
I will use Horizontal Type Tool to write some text
Now I will add some shape with Rectangle Tool
For some shapes I will add the same layer styles I have used for the navigation bar:
This is my result
I will create a new layer on top of all layers (press CTRL+SHIFT+ALT+N) and then with Pencil Tool I will create 2 thin lines
I will change the blending mode for this layer to Soft Light, and then with Eraser Tool (and with a smooth round brush) I will delete the left and the right part of the white lines.
The same I will make for the other 2 boxes. Now I will move forward to add a nice shadow. For this I will grab my Ellipse Tool, and I will create a black ellipse under the first box with the "business plan"
I will go to Filter - Blur - Gaussian blur, and I will use a random value between 4 and 7. Please note: if you will be asked to rasterize the shape press on yes (or OK)
Be sure you have this layer selected, and then press on CTRL+J to duplicate the shadow. With Move Tool you can place the shadow on the other boxes.
The same shadow you can add under the orange shapes too
I don't like the top part where I placed my logo. I think I will add there a shadow. I will not explain how I made that shadow. I am sure you will get the idea.
My final step is to add some stock images with a 3D server, and some logos on the bottom of the layout.
