Dark Layout #2

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.

Step1

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.

Step2

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.

Step3

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.

Step4

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.

Step5

You should have something like this.

Step6

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.

Step7

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

Step8

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

Step9

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.

Step10

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

Step11

Step12

Step13

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

Step14

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

Step15

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.

Step16

Step13

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

Step17

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

Step18

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

Step19

Step20

Step21

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.

Step22

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

Step23

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.

Step24

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

Step25

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.

Step26

You should have something like this.

Step27

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.

Step28

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.

Step29

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

Step30

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

Step31

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

Step32

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.

Step33

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.

Step34

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.

Step35

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.

Step36

Inside the rectangles add your dummy content.

Step37

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.

Step38

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

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