Hello, welcome to another tutorial by hv-designs. In todays tutorial il be showing you how to replicate the windows 7 taskbar, only this taskbar will be a navigation bar for a website. In another tutorial il be showing you how to code it.

 

Lets get started!

Creating The Background

Create a new document 600×400 pixels, you dont need a massive sized document for this tutorial, feel free to do so if you want to. Set your foreground color to #1592d7 and background color to #136da2. Select the gradient tool with a radial gradient.

Once you’ve selected the gradient tool start from the middle of the canvas and drag in any direction. You should have something like this.

Adding The Background Light Streaks

Create a new layer above your background layer then select the custom shape tool from the menu on the left.

Once you’ve selected the tool, at the top you’ll see the word shape, click the little arrow to open the shapes panel. Find the “registration target” shape.

If you dont see then registration target shape click the little black arrow in the top right hand corner, you and load more preset shapes there.

Once you’ve selected the shape drag it out over your canvas, make the shape as big as you can. Place the shape so that the streaks are flowing nicely over the canvas.

Select the pen tool and right-click on your shape, when the menu opens go to “fill path”. Make sure you have the color white selected as your forground (#ffffff).

Right-click once more and go to “delete path”.

Now go to “filter > blur > guassian blur”, blur the shape by about 5 pixels then click ok. Set your shapes blending mode to “soft light” and opacity to “30%”. Finish off by labelling the layer “background streaks”.

Creating The Navigation Background

Create a new layer called “navigation” then select the rectangular marquee tool with the color black (#000000). Drag out a rectangle spanning the width of the canvas and about 45-50 pixels in height depending on how high you want the navigation. Fill the rectangle with the color black.

Change the fill percentage of the navigation layer to around 10%.

Create a new layer called “top line”, select the rectangular marquee tool and create two 1 pixel lines on top of each other, color the line nearest the bottom white and the top one black. Finally set the opacity to 50%.

Duplicate the layer “top line” then rename the duplicated layer “bottom line”. Move the bottom line down to the bottom of the navigation.

Creating The Navigation Buttons

Create a new layer called “button stroke”, select the rectangular marquee tool and make a rectangle the size of the button you need. The top bit of the rectangle should cover the top white line and the bottom of the rectangle should be above the two lines.

Fill the rectangle in the color black then add these layer styles.

Duplicate the layer “button stroke” then rename the duplicated layer “button shine”. Right click the layer and go to “clear layer styles” then add these layer styles.

You should have something like this.

Create a new layer called “white corner stroke”. Select the rectangular marquee tool and make two 1 pixel selections around the right edge and the bottom edge. Fill the selections with the color white (ffffff).

Add a layer mask to the “white corner stroke” layer, set the foreground the black and background to white. With a linear gradient start from the top of one right 1 pixel line and drag down about half way. Right click the mask in the layers window and go to “apply mask”, repeat the process for the bottom line only this time drag from left to right. You should have something like this.

Finally, select the pen tool and make a rounded path around the top left corner of the button.

Once you’ve made the path create a new layer called “button shine 2″. Select the pen tool and right-click inside the path, when the menu pops open select “fill path”, fill the path in the color white. While “button shine 2″ layer is selected, click on the “button shine” layer whilst holding down the CTRL key on the keyboard, this should load a selection. Now go to “select > inverse”, when the inverse has been done hit the delete key to remove the excess. Finish off by setting the layers opacity to 10%.

More Buttons

Duplicate all the button elements to create more buttons as needed, finally label each button as you would with any other navigation.

Thank You

Thanks for reading this tutorial hope you all enjoyed it and found it helpfull, now help me and promote this post, DIGG and RE-TWEET, you help is appreciated. I suggest you subscribe via twitter or RSS as the second part of this tutorial will be coding it. See you all soon.

Learn to code This Navigation

You can learn to code this navigation by following a follow-up tutorial written here.

Good evening everyone, today il be showing you how to make a colorful web design company layout. The website features multiple enlightening colors and a simplistic navigation with a 3D hover.

 

Creating Our Document & Guides

Create a new document 1200 x 1055 pixels with a white background.

Once you’ve created your document we need to create two guides. Go to “view > new guide” enter the settings below.

Repeat the steps above only this time use the settings below.

Now select the gradient tool with a linear gradient, set your foreground color to #e6f7ff and background color to #ffffff. Drag the gradient over your canvas starting from the top and ending towards the middle.

Creating The Website Title

Select the text tool with the font verdana, set the font size to 30pt then set the color to #92a6a6. Add your website title at the top of the canvas.

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

You should have something like this.

Creating The Search Field

Select the rounded rectangle tool with a radius of 10px.

On the right side of the canvas inline with the website title create a long rounded rectangle.

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

You should have something like this.

Were now going to create a 3D search button, create a rounded rectangle with a radius of 10px, create the rectangle about 80 x 50 pixels.

 

Using the rectangular marquee make a rectangle over the top half of the rectangle. Fill the rectangle the same layer as the rounded rectangle.

Duplicate the rounded rectangle then rotate the duplicated layer 180 degrees by going to “edit > transform > rotate 180″. Finally, place the shapes next to each other making sure there level

Make a selection around the bottom half of the duplicated shape using the rectangular marquee tool. Once you’ve made a selection, hit the delete key.

Align the duplicated shape next to the orginal shape, making sure they are not directly overlapping. Once moved into place, Ctrl + click your duplicated shape layer’s thumbnail within the layers window to load a selection around it.

Select the orginal shapes layer then hit the delete key to remove the selection. Repeat the steps above for the other side of the shape then finally you should have something like this.

Now add these layer styles to your shape.

Resize and place your shape over your search field.

On a new layer below your shape create two small circles where either side where the shape bends out. Finally label the tab like shape with the word search.

Creating The Navigation

Create a big rounded rectangle 850 x 250 pixels, fill the rectangle with the color white then add a 1 pixel stroke using the color #cfeaea.

Using the same methods as we did for our 3D part on the search field, do the same for the rectangle you just created. The rectangle will be a featured area and navigation all rolled into one.

Adding A Splash Of Color

Using the rounded rectangle with a radius of 5 px create another rectangle inside the bigger rectangle you just created. Fill the rectangle with any color.

Now add a gradient overlay using the settings below.

You should have something like this.

Click your multicolored rectangle whilst holding down the CTRL key on the keyboard, this should load a selection. Create a new layer then go to “filter > render > clouds”.

Now go to “filter > artistic > underpainting”, use the settings below.

Were now going to add abit of blur, go to “filter > blur > motion blur”. Make sure your selection is still active or else the motion blue will evade the rectangle and cover the bigger rectangle, which we dont want.

Finally set the opacity to 50% and layer blending mode to “vivid light”. You should have something like this.

Using the text tool add some nice looking text, if you add a heading like on mine add an outer glow to it using the default settings. Finish off by creating like a shine effect using the pen tool.

Creating The Service Boxes

Using the rounded rectangle tool with a radius of 10px create 3 boxes next to each other totalling 850 pixels, be sure to leave a gap inbetween each rectangle.

Fill the rectangles with any color then add these layer styles.

Im now going to use a few icons from “wefunction” to build up my service’s sections. Im going to start by adding a little icon then a heading, the color of the heading will picked from the colorfull featured area using the eye dropper tool.

After the heading im going to add a short paragraph using lorem ipsum text, after the paragraph im going to create a short list using the circle tick icon from wefunction as the list bullet. Im then going ti finish off the services section by creating a read more button, created with the rounded rectangle tool.

Creating The Main Content Box

Once again with the rounded rectangle tool create a full size rectangle with a width of 850px, fill the rectangle with the color #e7f7ff then add a 1 pixel stroke using the color #d5f0fc.

Add the little home icon from the wefunction icon set to the top left corner of the rectangle, next to it add your welcome message. Finally fill the rectangle with your dummy text.

Creating The Footer

Finish off the layout with a plain white small round rectangle underneath the main content rectangle, add a 1 pixel stroke to the footer using the color #d5f0fc. Finally add your copyright information to the footer.

The Finished Layout

Thats it all done, heres the final product.

Final Note

Thanks for reading through my tutorial, hope you enjoyed it. Dont forget to re-tweet and digg this turtorial, your help and support is much appreciated. Cheers…

Welcome to tutorial 230, in this tutorial il be showing you how to create a sleek, clean and spacious wordpress blog.

 

Setting Up The Canvas And Guides

Create a new document 1200 x 1520, fill your background layer with the color #e6e6e6.

The layout were making is going to be 900px wide, so were going to need to setup some guides. Go to “view > new guide” from the menu at the top, in the box that pops up enter the following settings.

Do the same again only this time enter these settings.

Creating The Header

Select the rectangular marquee tool, then create a rectangle the width of the canvas and about 80 pixels in height. Fill the rectangle with any color then add these layer styles.

You should have something like this.

On the left side add your wordpress website title and slogan, fill the text using the color #979797. Once you’ve added your title and slogan add a drop shadow using the settings below.

You should have something like this.

Creating The Navigation

Using the text tool add some dummy links to the right side of the header.

Using the rounded rectangle tool make a selection around each navigation link.

Fill the rectangles in any color then add these layer styles.

You should have something like this.

Creating The Welcome Area

Using the rectangular marquee tool make a selection underneath the header, make sure the selection is on a new layer underneath the header.

Fill the selection with any color then add these layer styles.

You should have something like this.

Were now going to add a character from wefunction, click here (http://wefunction.com/2008/11/free-character-pack/) and download the character pack. Once you’ve downloaded it, extract it too your hard drive then open up “002__002.eps” in photoshop. Drag the character over onto your canvas and position it like the image below.

Chop the characters legs off just below the stroke on the welcome area.

Finally add a drop shadow using the settings below.

On the right side of the character add a simple sentance about your blog.

Creating The Content Area

Select the rectangular marquee tool and make a selection on the right side of the canvas against the right guide. the rectangle should be about 600 pixels in width and as long as you see fit, you can always resize the rectangle later to fit the content.

Fill the selection with any color then add these layer styles.

Create a new layer underneath the content rectangle, then select the polygonal lasso tool. On the corner of the content rectangle create a triangular shape like the image below.

Make sure the selection doesn’t go below the welcome area’s stroke. Once you’ve created the selection fill it with the color #a9a9a9. You should have something like this.

Mocking Up The WordPress Posts

Inside our content area, lets begin to mock up our dummy posts. Select the type tool and add an example posts title using the color #666666 and font size 24pt. Underneath the post title add some meta data (E.G post time, post date, author and category).

Underneath the post meta data add a 1 pixel line using a light grayish color. Now head over to woothemes and download this icon pack (http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/). On the right side of the post title add the speech bubble icon with some text saying comment here.

Finish off the post with a dummy image and some dummy text. After you’ve added the dummy text add a read more button using the buttons from the navigation. Ive also thrown in some social buttons for good measure.

Creating The Sidebar

The sidebar will be located on the left side, opposed to many blogs which display it on the right. In the sidebar im going to add a flickr gallery first, create a heading using a font size of 18pt, use the color #666666 for the heading color.

Underneath the flickr gallery title add some small thumbnail like images to act as our dummy flickr gallery. Before we continue adding our sidebar elements let seperate each part using a simple separator. Select the rectangular marquee tool, then create two 1 pixel lines on top of each other. Fill the lines in two different colors, the line thats on the bottom fill with white and the line that sits on top fill in a grayish color darker than the sidebar background. Finally drag the separator lines layer underneath the content box layer so they disapear nicely behind the content box.

Continue to bloat out your sidebar with the elements you’d want in the sidebar, ive added a simple recent comments list and some website sponsors.

Creating The Footer

Duplicate your welcome area background then drag it down to the bottom of the canvas. Open up the layer styles window then switch the colors between the stroke and the inner shadow. You need the make sure the white line is underneath the dark gray line else you wont get the indented effect.

On the left side of the footer add a nice twitter icon with speech bubble next to it. The speech bubble was from the custom shapes libary from within photoshop.

Add a dummy twitter post inside the speech bubble then stick a header over the top. On the right side of the footer add your copyright information and maybe another little character image from wefunction.

Creating The Pagination

Select the rectangular marquee tool or the rectangle tool and create a couple of square boxes just over the footer stroke. Using the same method as we did for our content box , add the little triangular grey shapes to make them look as if they are wrapping around the footers stroke.

On the right side of the footer add 1 single square with a little arrow inside it, again use the same method as above to get the 3D effect.

Well Done… Finished

Thats it all done, heres the finished layout.

Final Note

Thanks for taking part in this tutorial, il look forward to your comments. Also look out for the finished wordpress theme which will be available to download for FREEEE. Subscribe via our RSS feeds to stay tuned.

Thank You.

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.

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.

You canvas should now look something like this.

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.

Add these layer styles to your website title text.

You should have something like this.

Creating The Navigation Bar

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

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

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

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

You should have something like this.

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

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

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

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

Your navigation should now look like this.

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.

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

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.

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.

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.

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

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.

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.

You should have something like this.

Adding The Sidebar Content

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

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. (………)

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”.

Repeat the steps above to create more plans as needed.

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

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.

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.

 

 

Enjoy

Good evening everybody,…. today il be showing you how to create a PC mouse from scratch. Right lets get started!

 

You can download the PSD file for free.

Creating Our Document

For the purpose of this tutorial im going to be using a smaller background than you might use. Il be using 600 x 350 pixels, id recommed a nice big canvas size depending on how big you want your mouse. Create your a new document using your recommended settings, fill your background with a nice subtle color, nothing in particular just not white.

Drafting Out The Mouse

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

Drag out a rectanglular path as big as you want your mouse to be.

Once you’ve dragged out the path to your rectangle select the pen tool from the side menu, right-click inside the rectangular path and go to “make selection”. Select the gradient tool with a radial gradient, using the colors #262a2d and #090f0d drag out the radial gradient.

Were now going to customize our rectangle’s shape with the warp tool, go to “edit > transform > warp” (if your using a version of photoshop before CS2 then the warp tool wont be available)

Once you’ve selected the warp tool transform the shape into your mouse. Drag the corner anchor points inwards towards each other, then drag the middle lines out towards the edges of the canvas. Your aiming for a bloated version of the orginal rectangle.

You should have something like this.

Cutting The Buttons

Duplicate your mouse layer then hide the duplicated layer as we’ll be using it later to create the mouses shadow. Select the elliptical marquee tool and make a selection around the top half of the mouse.

Once you’ve made the selection go to “edit > cut” then “edit > paste”. The top half of the mouse should now have been detached, re-position the top half of the mouse back to where it was cut from then add a gradient overlay using the settings below.

You should have something that looks like this.

Adding Some Mouse Body Details

Were now going to add some minor details to the mouse body just to bring it to like abit. Firstly lets add abit of noise to the mouse body, select the mouse body layer whilst holding the ctrl key on the keyboard this should load the selection. Once the selection has been loaded go to “filter > noise > add noise”.

Once the noise has been added keep the selection active. Select the dodge tool with a brush size of around 45pixels, change the exposure to 25%.

Gently brush some highlights around the top edge of the body, along the middle and towards the bottom. Check the image below for my result.

Next add a inner shadow to the mouse body layer using the settings below.

Lastly were going to add a stroke to the top half of our mouse body, to do this we need to load a selection around the mouse body, then go to “edit > stroke”, us the color #3f434a for your stroke. Once you’ve applied the stroke remove the stroke from around the sides and edges of the mouse leaving the top part.

Duplicate the stroke which is left then move it up by 1 pixel, color the new stroke black by adding a black color overlay.

Adding The Mouse Buttons

Select the rectangular marquee tool on a new layer create 3 single lines, color the first one #f8f8f9, color the middle one black #000000 then color the last one white #888a94. Place all 3 lines in the middle of top part of the mouse.

Add a layer mask to the lines then drag a linear gradient from the top downwards. The look were going for is to have the line faded at the top then gradually have it come back to normal as it reaches the bottom part of the mouse buttons.

Adding The Mouse Wheel

Select the rounded rectangle tool with a radius of 35 pixels, drag out a rectangle over the lines we created in the previous step.

Select the gradient tool with a radial gradient, set your foreground color to #4a4e55 and background color to #0d0d12. Drag the radial gradient from the top towards the bottom of the rounded rectangle.

Now add these layer styles to your mouse wheel.

Finally were going to add a second stroke around the mouse wheel, load a selection around your mouse wheel then go to “edit > stroke” change the strokes color to #a3a5ad. You should have something like this.

Adding The Mouse L.E.D

Select the circle tool or elliptical marquee tool and create a circle just below the mouse buttons on the mouse body.

Fill the circle with any color then add these layer styles.

You should have something like this.

Were now going to add a little light sparkle. Select the paint brush tool, then click the little black arrow where you select your brush and size. Inside this window there is another black arrow, click it then go to “assorted brushes”.

Now select the crosshatch brush from with the brushes window.

With the color white and a brush size of around 25 add the crosshatch in the middle of the L.E.D.

Once you’ve added the crosshatch remove two of the lines using your prefered cutting tool then add a gradient overlay using the settings below.

You should have something like this.

Finishing Up

Finally add your mouse brand or logo on the body of the mouse, you can use the warp tool to make the text slightly rounded. Unhide your duplicated mouse layer which we tooked away earlier, make sure its underneath all the other layers then add a guassian blur, blur by about 1.5 – 2 pixels. Set the shadow layers opacity to about 50% then move it a couple of pixels towards the right.

Thats it all done, you should now have something like the image above, BUT dont leave it there why not add a little bit more. Maybe a wire here and there or even the USB connection or even a different colored mouse.

Hope you’ve enjoyed this tutorial, dont forget to re-tweet and digg. Il look forard to your comments.

Hello welcome to another tutorial by hv-designs, today we’ll be making software layout with a nice wooden texture applied as a background.

 

Creating Our Document And Background

Create a new document 1200 x 1120 pixels with a transparent background.

Once you’ve created your document download this wooden texture by “Matt Hamm”. Once you’ve downloaded the texture place it in the top left corner of the canvas.

Duplicate the texture by right-clicking the layer and going to “duplicate layer”. Once duplicated flip the duplicated texure horizontally then place it next to its orginal.

Repeat the process until you’ve reached the other side of the canvas. Once you’ve reached the right side of the canvas repeat the process again only this time flipping the texture vertically. When the whole canvas is covered merge all the layers into one layer called background. Finally desaturate the background by going to “image > adjustments > desaturate”

Creating The Title And Navigation

Select the type tool then add your website title in the top left corner. The font and settings ive used are listed in the image below.

Once you’ve added the text add these layer styles.

Once you’ve sorted the website title on the right side add a simple text style navigation using the color #b3b3b3. On the first text link change the color to white (#ffffff).

On the link that is coloured white were going to add a hover state. Select the rounded rectangle tool with a radius of 15px.

On a new layer underneath the navigation text create a small rectangle around the link.

Fill the rectangle with any color then add these layer styles.

You should have something like this.

Creating The Outer Content Area

Select the rectangular marquee tool and create a big white rectangle, the rectangle should be about 850 x 700 pixels. Once you’ve created the rectangle add 15% noise by going “filter > noise > add noise”.

Once you’ve added the noise apply these layer styles.

You should have something like this.

Creating The Inner Content Area

Click the “Outer Content Area” box whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 20pixels then fill the selection with the color white on a new layer.

Now add these layer styles to the new inner rectangle.

You should have something like this.

Creating The Featured Area

Click the “Inner Content Area” box whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 20pixels then fill the selection with the color white on a new layer. Once filled add a 1 pixel stroke using the color #e4e4e4.

Select the rectangular marquee tool OR your prefered cutting tool, make a selection around the rectangle you just created starting from the bottom. Leave about 200pixels at the top, then hit the delete key. You should be left with a 200 pixel wide box.

Click the “Rectangle” you just cut whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Once the selection is loaded go to “select > modify > contract”. Contract the selection by 5-10 pixels then fill the selection with the color white on a new layer. Once filled add this gradient overlay.

You should have something like this.

Click the “Rectangle” you just created whilst holding down the CTRL key on the keyboard, this should load a selection around the rectangle. Create a new layer then go to “filter > render > clouds”, now go to “filter > pixelate > mosaic” use the settings below.

Now set the layer blend mode to “soft light” and opacity to 75%. You should have something like this.

Inside the blue rectangle add some dummy content and maybe an icon of some sort. Im using an icon from one of smashing magazine’s icon sets.

Creating The Featured Area Buttons

Create two circles either side of the featured area, make the circles small dont make them too big. Once you’ve created the circles add these layer styles.

You should have something like this.

Finish off the little buttons by adding a dark gray arrow to it.

The Dummy Content

This next part doesnt really need a “step-by-step” as its just all text done with the type tool. Create simple blue headings with subtle gray text underneath, maybe add a list or two to break the layout up abit. Leave an area at the bottom for some additional content.

In the area at the bottom create a box in the same way we did our featured area outer box. The layer styles for this new box at the bottom are also the same as the featured area outer box. Fill the outer box with some a dummy paragraph or two and maybe an icon or two. The icons ive used this time are from “wefunction”.

Creating The Footer

Select the rectangular marquee tool and create a black rectangle across the bottom of the canvas, over the wood texture. Set the fill % of the black box to 40%.

Now add these layer styles to the layer.

Using a twitter icon and a speech bubble from photoshop’s custom shapes libary, create a follow us area on the left side of the footer. The twitter icon ive used is from smashing magazine.

On the right side of the footer add a duplicate of your website title and slogan. Then add your copyright information and any other information you would find inside of the footer area.

Finished Layout

Congratulations you’ve finished the tutorial, hope you found it intresting, thanks for reading il look forward to your comments.

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