Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Dark Style Web Template

Dark Style Web Template


Firstly create a new document with the dimensions 950 x 1130 pixels. Fill your background layer with the color black. Select the rounded rectangle tool and set radius to 15px.

Dark Style Web Template image 1

Draw out a rounded rectangle for your header. Leave equal amounts of pixels either side and dont place it right at the top of your canvas.

Dark Style Web Template image 2

Add these layer styles to your header layer.

Dark Style Web Template image 3

Dark Style Web Template image 4

Your rectangle should be now transformed into the image below.

Dark Style Web Template image 5

On the left side of the header add your website title and slogan, on the right side add 3 navigation items.

Dark Style Web Template image 6

Inbetween the 3 navigation items on the right add a very small square or rectangle, I drawn 3 pixel long line. Once you have done that add this outer glow.

Dark Style Web Template image 7

You should have something like this.

Dark Style Web Template image 8

Finally make a selection on your header similar to the image below.

Dark Style Web Template image 9

Fill the selection with the color white then set layer opacity to 2%. Underneath your header add another rounded rectangle using the rounded rectangle tool with a radius of 15px, this will be our navigation.

Dark Style Web Template image 10

Add these layer styles to the navigation.

Dark Style Web Template image 11

Dark Style Web Template image 12

Dark Style Web Template image 13

Dark Style Web Template image 14

You should have something like this.

Dark Style Web Template image 15

Make a selection across half of your naviagtion.

Dark Style Web Template image 16

Fill the selection with the color white and set layer opacity to 5%. Now add your navigation text. Inbetween each item add a small divider. To make the divider create two 1 pixel lines next to each other using two different shades of grey, one dark and one light shade.

Dark Style Web Template image 17

To create a hover on your navigation select the elliptical marquee tool and create a white circle. Have the top of the circle just overlapping the bottom of the navigation you want to hover.

Dark Style Web Template image 18

Now goto "filter > blur > guassian blur", blur by about 6-8 pixels. Set layer opacity to 23% then delete the bottom half of the circle so it comes level with the navigation.

Dark Style Web Template image 19

Where now going to make a featured box for some featured content. Select the rounded rectangle and draw out a big rectangle underneath your navigation.

Dark Style Web Template image 20

Dont fill your selection with a color, instead select a radial gradient with the color #2c2d2d as your forground and black as your background and create a radial gradient in the selection, start the gradient from the bottom left corner. Then add this stroke.

Dark Style Web Template image 21

You should have something like this.

Dark Style Web Template image 22

Add an image of your choice, im using the final result of my iphone light beams tutorial. Add it to the left side of the box. Now add some descriptive text on the right side.

Dark Style Web Template image 23

The layer styles for the silver style button are as follows.

Dark Style Web Template image 24

Dark Style Web Template image 25

Dark Style Web Template image 26

Using the same layer styles as we used for the header, navigation and featured box create more content boxes using the rounded rectangle tool.

Dark Style Web Template image 27

Add your glowing dot that we used in the header and label each content box.

Dark Style Web Template image 28

The 1st content box im going to use as an image gallery. With the rounded rectangle tool add another rectangle within the content box. Then add these layer styles.

Dark Style Web Template image 29

Dark Style Web Template image 30

You should have something like this.

Dark Style Web Template image 31

Add an image inside the inner rectangle by copying an image to the clipboard then goto "edit > paste into". Move your image into place then create a black rectangle across the bottom of the image set layer opacity to 40% then add some image info.

Dark Style Web Template image 32

To the box on the right im going to add some simple news articles.

Dark Style Web Template image 33

In the 3rd content box im going to add a flickr gallery. Create an inner rounded rectangle like we did in the 1st content box.

Dark Style Web Template image 34

Add some flickr images within your inner rectangle, I made my images have rounded corners by copting them and pasting them into a rounded rectangle, doing this automatically adds a layer mask, just delete the rounded rectangle after.

Dark Style Web Template image 35

With the elliptical marquee tool just add two black circles in the middle at each end of the gallery.

Dark Style Web Template image 36

Inside the plain black circles just add a left and right glowing arrow.

Dark Style Web Template image 37

Now for the footer, Duplicate your header and all it's elements, drag to the bottom of your canvas. Delete the little navigation the the 3 glowing dots, replace with your copyright information.

Dark Style Web Template Tutorial: Final Result image 38



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Dark Style Web Template"

Only registered users can write comment

No comments yet...