Hosting Layout #2

Hello, welcome to another tutorial from hv-designs. Today il be showing you how to create a hosting layout with a 3D aspect to it.

Setting Up The Background

Create a new document 1200 x 1200 pixels, set your foreground color to #3e3e3e and background color to #191919. Select the gradient tool with a radial gradient.

Step1

Once you have the radial gradient selected, start from the top middle of the canvas then drag downwards about halfway down. Now go to “filter > noise > add noise”, use the settings below.

Step2

You canvas should now look something like this.

Step3

Creating The Website Title

Select the type tool then add your website title to the canvas. I used the font verdana and a font size of 36pt.

Step4

Add these layer styles to your website title text.

Step5

Step6

Step7

Step8

You should have something like this.

Step9

Creating The Navigation Bar

Select the rounded rectangle tool with a radius of 15 pixels.

Step10

Drag out your path along side the website title, leaving a decent size gap inbetween each element.

Step11

Once you’ve dragged out your path select the pen tool. Right-click inside the path and go to fill path.

Step12

Finally right-click inside the path again and go to delete path. Now add the following layer styles.

Step13

Step14

Step15

Step16

You should have something like this.

Step17

Using the same method as explained above create another rounded rectangle inside the navigation. Fill the rectangle with the color white.

Step18

Now set the opacity of the white rectangle to 8% then add your navigation links.

Step19

Inbetween each navigation link add a small circle using the elliptical marquee tool.

Step20

Fill the circle using the color #00688f then add a drop shadow using the settings below.

Step21

Your navigation should now look like this.

Step22

Creating The Content Area

Underneath the website title and navigation add a catchy sentance of some sort, then using the rectangular marquee tool create a rectangle on the right side.

Step23

Add a gradient overlay to the rectangle you just created using the settings below.

Step24

Inside the rectangle add some dummy content. Use the color #373737 for the titles and a size of 14pt, for all paragraphs use the color #898989 with a size of 12pt. Also within the content area throw in some snazzy icons in a nice list form, the icons ive used are from woothemes.

Step25

Creating The Sidebar

Duplicate your content rectangle layer, then drag the duplicated layer underneath its orginal. Press “ctrl + t” to free transform the rectangle, resize the rectangle to a thin rectangle, then move it side by side to the content rectangle.

Step26

With your duplicated rectangle layer still selected go to “edit > transform > perspective”. Select the top left anchor point and move it downwards whilst holding down the shift key on the keyboard.

Step27

Update the gradient overlay on the duplicated rectangle to the settings below.

Step28

Duplicate the content rectangle once more, resize the rectangle using the free transform tool. The rectangle should be resized to fit side by side the first rectangle we duplicated.

Step29

On each crease where the rectangles meet, add a divider using the color’s specified below. The dividers should span the whole height of the each crease.

Step30

You should have something like this.

Step31

Adding The Sidebar Content

Using the type tool and the plus icon from the woothemes icon set, create a simple list displaying dummy content.

Step32

Inbetween each list item add a dotted divider. You can easily create the dotted divider by using the type tool and hold down the full stop key. (………)

Step33

Underneath the list add a simple learn more button. Select the rounded rectangle tool with a radius of 15px same as our navigation bar, drag out a small sized button then fill with any color. Right click the navigation layer and go to “copy layer styles”, right click the learn more button layer and go to “paste layer styles”.

Step34

Repeat the steps above to create more plans as needed.

Step35

Step36

Finally inbetween each plan add a divider to seperate the content. Create two 1 pixel lines using the colors below.

Step37

Finally…

Finally add your footer content underneath the content rectangle using the type tool. Thats it all done, hope you enjoyed this tutorial, il look forward to your comments.

Step38

Dont Forget

Dont forget to digg and re-tweet this tutorial, your help and support is much appreciated. Thank You.!

Learn To Code This Layout

You can learn to code this layout into a working CSS template by following these two follow-up tutorials. Part #1 and Part #2.