HV-Designs.co.uk

June 19th, 2009 in Photoshop Tutorials by Richard Carpenter

Dark Layout #2

• Share

Welcome to tutorial 209, in this tutorial we’ll be creating a dark layout with some nice unique styling. We’ll also be making our very own custom patterns to go with the layout.

Lets get started, create a new document 950 x 1065 pixels.

Fill your background layer with the color black, then create a new document 10 pixels by 10 pixels. Select the color black with the pencil tool, with a 1 pixel size brush create something like this.

Once you have the same as the image above goto “edit > define pattern” label the pattern any thing you want. Go back to your orginal canvas and with the rectangular marquee tool make a selection at the top of your canvas, the selection should be the width of your canvas and about 170 pixels in height.

Once you’ve made the selection select the paint bucket tool, change the options in the panel at the top from “foreground” to pattern, then click the little arrow and select your pattern.

Fill your selection with the pattern, at first you won’t see nothing as the pattern is in black. When your not doing this tutorial and you want to use the pattern you’ll need to add a color overlay. But for this tutorial add the layer styles below.

You should have something like this.

Add a layer mask to your pattern layer, then select the gradient tool with a reflected gradient. Set your foreground color to white and background to black starting from the middle of your rectangle drag the reflected gradient to the edge of the canvas.

Select the type tool and add your website title and slogan. You should have something like this.

The settings i used for my website title text are shown below.

Using the rectangular marquee tool make a selection at the very top of your header area. The selection should span across the whole canvas and be about 12 pixels in height.

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

Still with the rectangular marquee create a small rectangle on the right side of the header.

Fill the selection with the color black then add this layer style.

Next to the rectangle add a small square the same height as the rectangle you just created, fill the square with any color than add these layer styles.

Your dummy search form should now be complete, label your search form and button. You should have something like this.

Were now going to make the navigation bar, select the rectangular marquee tool and create a selection underneath the your patterned header.

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

Once you’ve added the layer styles select your desired cutting tool and cutaway 50 pixels off both ends of the navigation, you should have something like this.

On a new layer above your navigation fill in the gaps on either side where the drop shadow is missing.

Once you’ve fill both ends of the navigation create two rectangles where you deleted it from the navigation. Make the first rectangle the same height of the navigation (not including the drop shadow), create the other rectangle the same height as the drop shadow. The first rectangle should be in the color #333333 and the 2nd in the color #1b1b1b. You should have something like this.

Repeat the steps above for both sides of the navigation bar. Now label your navigation bar with some dummy links.

Inbetween each navigation link add a seperator using two 1 pixel lines next to each other. Either use the rectangular marquee tool or pen tool to create the seperators.

You should have something like this.

For this next part we need to make another custom pattern, create a new document 4 pixels by 4 pixels, using the color black and a 1 pixel brush size, create the image below.

Goto “edit > define pattern” then save it as what ever you want. Make a selection underneath your navigation bar using the rectangular marquee tool, select all the rest of the canvas, then fill the selection with your new pattern. Add a layer mask to your pattern then drag a radial gradient from the middle underneath the navigation, to the end of the canvas. Make sure your foreground is set to white and background set to black.

Once the radial gradient has been added you should have something like this.

Select the elliptical marquee tool and create a small circle on the left side of your canvas, inline with all your other elements.

Add these layer styles to your ellipse so it matches the image above.

Inside the ellipse add a arrow pointing to the left. Once you’ve added your arrow duplicate both layers then flip the layers horizontally by going to “edit > transform > flip horizontal”. Place the duplicated layers on the right side of the canvas inline with the orginal.

Using the rounded rectangle tool with a radius of 15 pixels draw out a rectangle. Goto “edit > free transform” and rotate the rounded rectangle slightly either left or right.

The rectangle has had a 3 pixel stroke added, with a subtle gradient overlay. We now need to duplicate the layer and rotate it again in the opposite direction you rotated the first rectangle. Inside the rectangle thats ontop add a “featured image”, next to the image/rectangles add a simple paragraph.

Still with the rounded rectangle create two more rectangles underneath your featured area, these rectangles are for our sidebar and main content. Fill the rectangles with the color #0a0a0a then add a 1 pixel stroke using the color #181818.

Inside the rectangles add your dummy content.

Finally duplicate your navigation bar and the left and right navigation ends. Drag them to the bottom of the canvas and add your footer information.

Only completion of the footer you should have yourself a nice template, here’s my result.

Hope you enjoyed this tutorial, next time we’ll be converting this template into a 1 page css template. Dont forget to subscribe via our rss feeds and twitter. Your help and support is much appreciated.

Learn To Code This Layout

You can learn to code this layout into a working CSS template by following the follow-up tutorial HERE.

• Share