Dark Style Web Template

In this tutorial il show you how to create a dark style layout, 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.

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.

Add these layer styles to your header layer.

Your rectangle should be now transformed into the image below.

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

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.

You should have something like this.

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

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.

Add these layer styles to the navigation.

You should have something like this.

Make a selection across half of your naviagtion.

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.

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.

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.

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.

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.

You should have something like this.

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.

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

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

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

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.

You should have something like this.

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.

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

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.

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.

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

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

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.

39 thoughts on “Dark Style Web Template”

  1. I can’t get the Rounded rectangle with gradient fill in to work… it just seems impossible?
    i open a new layer -> use the rounded rt -> it automatically fills with either black or white -> i press CTRL+Enter to get a selection, and i try to drag the gradient inside of the selection but it says something like; this layer isn’t editable or something :(( please help ^^

  2. change from using “shape Layers” then create the rectangle. once created select pen tool ,right-click and goto “make selection” hope this helps.

  3. Pingback: psaddict.com
  4. Mmmm… i dont like it… its a standart web 2.0 layout , make a tutorial web 2.0 + grunge = petty cool 🙂
    so long

  5. Hey, how do you use photoshop to actually make a website?

    like, do you separate the images and make them the background images of divs?

    Please just run me thru the process of going from photoshop to HTML/CSS webiste.

  6. yes basically you have to slice up parts of the website then hard code them into HTML/CSS

    im currently coding this template at the minute, the next tutorial to be re-leased will be another PSD > HTML tutorial on my new layout “creative design layout”

  7. Keno,

    I think your problem is your selecting the wrong option on the box drawing. What I mean is look at the tut, pay close attention to what is highlighted to the left of the tool toobar, you will notice the 2nd box is what he used, default is the 1st box, just change it… not sure if I explained right, but hopefully this will help you.

  8. really great work…awesome!!
    i wana ask a basic thing…how to know the width and height in pixels of any of the elements in this photoshop design..i-e content boxes, navigation etc..? can i use this design to understand the height and width..??

  9. How to save it in html file… cause i made a photoshop templates but when i save it, it all become an images…. i can change the text…

  10. Hey. Just found this website but seems like it will be helping me out immensly… I am an inspired webdesigner but rarely make a template I myself actually like… I have looked through all of your tutorials this morning and looks like you have progressed your skills along with the website. Well done at putting these up for our use and to help us get better and improve our skills.

    Well done again! Congrats on the terrific website 10/10. Will be sending more people this way!

  11. HI,
    Quick question! How do you go about making a selection in photoshop like it is done int the steps for making the header and navigation bar in this tutorial? Sorry I’m a newbie.. don’t really know which tool was used!

  12. Hey Joe… what do you mean by making a selection… if your talking about for highlights then in the header I would suggest you use Polygon Lasso tool, and for the nav bar use the Marquee tool… Then what you do is select the layer you are putting the highlight to by pressing CTRL+Left Click the layer, inverse your selection CTRL+ALT I (i believe) and then hit the del button. Making your shape the same as the layer below. Hope this helps
    <3 Ryan

  13. For the rollover images for the Navigation… you make it look easy, mine comes out… shit basically… any further advice on how to get it to blend more to the image.

  14. Hey Ryan,
    If you’re talking about the hover image with the white circular blur underneath the navigation text.. try this… create a new layer, click on the Elliptical Marquee Tool and draw a circle under the navigation text you want to add the effect to… then go to your layers panel and CTRL+ALT+SHIFT + Click on the icon within the layer containing your actual navigation bar… this will automatically delete the botom half of the circle… and now all you have to do is go to the bottom of your layers panel and click on the “Create New Fill” icon and select Solid Color then choose white… then you can just set your layer opacity to 23% like the tutorial mentions and go up to the Filter menu and add your Gaussian Blur… hope that helps! It worked for me!

  15. Hi I like very much your tutorial but it’s very difficult to me. I had one question?, what type of letter do you use? I can’t found it, can you same how named is please. sorry by my poor english but I speak spanish only. Thanks very much…

Leave a Reply

Your email address will not be published. Required fields are marked *