HV-Designs.co.uk

December 16th, 2009 in Photoshop Tutorials by Richard Carpenter

Hosting Layout #3

• Share

Good evening welcome to tutorial #236, in this tutorial il be showing you how to make a hosting layout. This hosting layout features a nice light theme with hints of orange.

Creating The Top Navigation

Create a new document 1200 x 1200 pixels, fill your background with the color #eeeeee. Select the rectangular marquee tool then make a rectangle which spans the width of your canvas but is about 40 – 42 pixels in height.

Fill the rectangle with any color then add a gradient overlay using the settings below.

Were now going to create our very own diagonal lines pattern. Create a new document 25 x 25 pixels, zoom in as much as you can then select the pencil tool or i 1 pixel paint brush. Once you’ve selected your desired tool duplicate the pattern below.

Now that you’ve duplicated the pattern from the image above go to “edit > define pattern”, save your pattern and give it a relevant name. Head back over to your original canvas then load a selection around your rectangle.

Create a new layer above the rectangle then fill the selection with your diagonal lines pattern. Once filled set the diagonal lines patterns opacity to 2%.

Were now going to add a little shine effect to the top navigation, select the rectangular marquee tool then make a selection around just under half of the rectangle.

Fill the selection on a new layer with the color white (#ffffff). Finally set the shine layers opacity to 50%.

Creating The Master Header

With the rectangular marquee tool make a selection about 145 pixels in height which spans the width of the canvas.

While the selection is still active, select the elliptical marquee tool then drag out a circle over the selection on the left side. Make sure you hold down the shift key before dragging out the circle, doing this will add the circle to the selection. Holding down CTRL will subtract from the selection.

Your looking to get something like this. Alternatively you can use a grid.

Fill then selection with any color on a new layer then add a gradient overlay using the settings below.

Load a selection around your main header shape if its not already selected, then go to “select > modify > contract”, contract the selection by 10 pixels. Create a new layer above the main shape while the selection is still active then fill the selection with any color.

Because the shape was contracted, both left and right edges will have contracted 10 pixels away from the edge of the canvas. Make a selection around both sides then extend them past the canvas.

Once you’ve extended the left and right sides add the following layer styles to the smaller shape.

So far your layout should look like this.

Creating The Glass Orb

Inside the header where we added the circle to the selection, select the elliptical marquee tool or the circle tool and add a circle inside.

Once you’ve created your circle add the following layer styles.

You should now have something like this.

Using the rectangle tool or the rectangular marquee tool create 4 white rectangles 2 at the top then 2 underneath, like a window.

Now go to “filter > distort > spherize”, now depending on how big you’ve done the rectangles will determine how many times you have to repeat the spherize step. I had to do mine once, but you may need to repeat the step a couple of times.

Once you’ve got your rectangles spherized, resize them and place them onto the orb. Set the rectangles layer opacity to 20%. You should have something like this.

Select the elliptical marquee tool then make a selection inside the orb.

Fill the ellipse with the color white, set the opacity to around 20% then add a layer mask. Drag a linear gradient from the bottom of the white ellipse towards the top but stopping around the middle of the white circle.

Repeat the process above to create a further 2 circles, change the direction of the linear gradient to give the orb a glassy look. you should have something like this.

Adding Some Content

Inside the orb add your website logo then set the logo’s blend mode to overlay. Using the type tool add your website title and slogan. Use the settings and color’s below for your title.

Now add the following layer styles to your website tite.

You should have something like this.

Again with the type tool add your navigation on the right side of your title, place the simple text links in the middle of the header shape. You can also add a smaller navigation in the top bar.

In between each navigation link create two 1 pixel lines next to each other which span the height of the smaller header shape, color the first one in white (#ffffff) and the second one in black (#000000), finally set the blend mode to overlay.

Adding A Catchy Tag Line

Underneath the header add a catchy tag line using the text settings as below.

Once you’ve added your text and the settings above add a drop shadow to the text using the settings below.

Creating The Content

Select the rounded rectangle tool with a radius of 10 pixels, (default settings are 10 pixels unless otherwise changed previously) drag out a biggish box big enough for a decent amount of content. Leave a space on the right for our sidebar.

Lets now give the content box a better look by adding the following layer styles.

You should now have something like this.

Inside the content box add your website add your content.

Follow the same steps for your sidebar, the layer styles for the box are the same as the main content box.

Adding Additional Content

Underneath the sidebar box create two 1 pixel lines on top of each other on the same layer.

Select the elliptical marquee tool and make a ellipse over the top of the divider, fill the ellipse with the color black (#000000).

Blur the ellipse by going to “filter > blur > guassian blur”, blur the ellipse by about 6-8 pixels. Set the ellipse’s layer opacity to around 5% then select the rectangular marquee tool and make a selection around the bottom of ellipse up to the divider.

Delete part of the ellipse from the divider downwards, basically leaving half of the ellipse above the divider. Finally add a little twitter icon and some twitter text just above the divider line.

Next, create 3 boxes using the rounded rectangle tool leaving an equal gap in between each one, use the same layer styles as we did for our main content box and sidebar box.

In between each box add a little arrow icon, I’m using an icon from the woo themes icon pack. (http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/).

Inside each box add your hosting plans.

Creating The Footer

The footer is fairly easy, in your layers palette select all the layers which correspond the main header, including the orb and logo but excluding the navigation items, website title and top bar.

Duplicate the layers then drag to the bottom of the canvas. While all layers are selected press CTRL + T then resize all the layers so the orb is fairly small and the header part is big enough for some footer text.

Flip all the layers horizontally, then extend the edges past the canvas.

The Finished Result

Thanks for reading, hope you enjoyed this tutorial, Thank You. You can download the PSD file for free by going HERE

• Share