Create a Dark and Sleek Web Layout Using Photoshop

Jun 2 2009 by Tyler Denis | 62 Comments

How to Create a Dark and Sleek Web Layout using Photoshop.

In this Photoshop web design tutorial, we are going to create a beautiful, dark, and sleek website mock-up centered on an elegant navigation menu that lends itself easily to CSS background sprites.

This is the first part of a two-part series of tutorials that will show you how to create the design in Photoshop. The second part of the series will show you how to build a web page with the Photoshop layout mockup using HTML/CSS and a little bit of jQuery.

Credit: This tutorial was heavily inspired by the Dragon Interactive website design; they are a groundbreaking web design and development agency based in Los Angeles, California.

Final Result

Click on the image below to see a full-scale version of what we’re about to make.

Final

Setting up the Photoshop document

1 Let’s start off by opening up a 1280px x 900px document in Photoshop. Fill the background with light gray color (#CCCCCC).

Setting up.

2 Make a guide in the center of our document. To do this, click and drag a guide to the middle of the document from the vertical ruler; the guide will lock in at the exact center of the background layer.

3 Now that we have that, create a new 950px x 900px document, then click and drag it into our original document. Use the Free Transform option, Edit > Free Transform (Ctrl + T), to transform the object and to bring up the Transform Controls.  Line up the middle top and bottom anchor points so our 950px box lines up right in the center.

4 Click and drag a guide for the left and right side of that 950px box.

5 Now, delete the layer.

Creating the navigation bar

6 We are going to start off with the navigation, so let’s make a new folder in the Layers palette  (third icon in from the left at the bottom of the layers palette) and call it "Navigation".

7 In that folder create another one called "Nav Basics" which we will use to place the basic setup of the navigation bar.

8 Create a new layer within the "Nav Basics" folder called "Nav Background".

9 Use the Rectangular Marquee Tool (M) to make a selection with a height around 120px that extends the full width of the canvas. Fill in the selection using Edit > Fill… (Shift + F5), with the color #999999.

10 Create another new layer called "border top". Using the Rectangular Marquee Tool (M) again, create a box around 10px high that goes across the entire canvas. Fill in the selection with a gray color (#333333).

Navigation Bar.

11 Click on the "Nav Background" layer, and then add a Gradient Overlay on the layer by clicking on the icon at the bottom of the Layers palette that says "Fx", and then selecting "Gradient Overlay…" which will open up the Gradient Overlay dialog box.

12 We are going to create a gradient with the setting I have in the following figure with a color of #333333 that fades to 0% opacity.

Opacity settings.

Setting up the navigation text

13 Create a new folder within the "Navigation" folder and call it "header text".

14  Create another new folder – this time within the "header text" folder and call it "Logo".

15Add your logo (if you have one) to the "Logo" folder and fill it with #333333. Add a Gradient Overlay and an Inner Shadow Layer Style, as I have done in the following figure.

Setting up the navigation text

Putting in the navigation menu text

16 Create a new folder in the "Header Text" folder and call it "Navigation Text".

17 Next, add the text for your navigation menu items; this tutorial uses Home, Portfolio, Services, and Contact with a font face of Myriad Pro.

18 Add the same layer styles as the logo in Step 15 to your text layer. I spaced them out so that if you are starting end to end, hold the Shift key and move it over six times with your arrow keys.

Navigation text.

Giving the text a light gray drop shadow

19 Now create a new layer in the "Logo" folder.

20 Make a selection around the logo text by Ctrl + clicking on the texts’ layer.

21 Fill in the selection with the color #999999.

22 Deselect your selection using Select > Deselect (Ctrl + D), then move the text layer down two units using your arrow keys.

23 Repeat Steps 20-22 for the text inside the "Navigation Text" folder.

navigation text.

Giving the navigation bar some highlights

24 Now, we are going to add some subtle highlights and shadows to the navigation. In the "Nav Basics" folder, create a new layer called "Highlights".

25 Make a 1px horizontal selection across the entire length of the canvas using the Single Row Marquee Tool, and then fill it in with the color #999999 as the color at bottom of the light gray box.

26 Make another line, but this time the color is going to be #666666 at the bottom of the dark gray box.

7 image.

Giving the navigation text some highlights

27 Create a new layer in the "Nav Basics" folder called "Button Highlights".

28 Using the Rectangular Marquee Tool, create a 1px vertical line the same height as the light gray background. Fill this in with the color #999999.

29 Create another 1px vertical line selection on the right of the previous vertical line and fill it in with the color: #666666.

30 Move the lines to the edge of the left side of "Home" using the Move Tool (V), then holding down Shift, move it over three spaces using your arrow keys.

31 Duplicate the lines into another layer by right-clicking on the Button Highlights layer, then choosing "Duplicate Layer…" (Ctrl  + J). Move the lines to the right side of "Home" using the same method as the previous step (Step 30).

32 Repeat Steps 29-31 with each button so you get a blocked off area for each one.

Navigation text highlights.

Creating the blue rollover state

We’re going to create the rollover state menu instance; this will be used for when the user hovers over a menu button.

33 Create a new folder called "Nav Instances".

34 In that folder, create a new layer called "Blue Highlight". This will be our rollover background state for the non-active buttons.

35 Using the Rectangular Marquee Tool (M), make a box around the "Home" button. Fill the selected area with the color #0033FF and then change the Layer’s Blend Mode to "Overlay".

36 Duplicate "Blue Highlight" layer (Ctrl + J), move the duplicated layer over the next navigation menu item, then transform the object using Edit > Free Transform (Ctrl + T). Repeat this step for each menu item.

37 Link all the blue layers by clicking on each of the empty boxes in between the eye icon and the layer and then merge the linked layers by right-clicking on a layer and selecting Merge Layers (Ctrl + E).

Nav instances.

Giving the blue rollover state an Inner Glow

38 Let’s give the layer an Inner Glow. Double-click on the layer to enter its Layer Style dialog box. Check the box beside "Inner Glow, and change the settings to the same settings as the following figure, using the color #000066.

Blue hover state inner glow.

Giving the blue rollover state a gloss

39 Now, we are going to give our buttons a gloss. Using the Elliptical Marquee Tool, make a selection that resembles an oval circle on top of the "Home" menu item.

Gloss.

40 Create a new layer called "Nav Highlight", and with the oval circle selection from the previous step still still active (Step 39), use the Gradient Tool (G) to add a White to 0% opacity gradient over the bottom half of the over circle that is overlapping the blue background. Play around with it until you get something you like.

41 Select the object in the "Blue Highlight" by Ctrl + clicking on the layer, then invert the selection using Select > Inverse (Ctrl + Shift + I), and then delete the selected area (the area outside of the blue background) using Edit > Clear (or Del key).

42 Duplicate the "Blue Highlight" layer, move it over each menu item, using Edit > Free Transform (Ctrl + T), and moving the Transform Controls to fit the highlight on the menu items.

43 Load the "Blue Highlight" layer again by Ctrl + clicking on the layer and then create a new layer called "Nav Shadow".

44 Add a Gradient Overlay Layer Style with the gradient preset set to Black to 0% opacity, make a shadow starting at the bottom of the button and going to the bottom of the white highlight we just made. Change the Blend Mode to Soft Light.

Creating the active state instances

45 Let’s create our active menu items which will be lighter than the rest. Ctrl + click on the "Blue Highlight" layer to load the selection, and then create a new layer called "White Highlight". Fill it in (Shift + F5) with a white color (#FFFFFF).

46 Drop the opacity down of the "White Highlight" layer to 70%, then change the Blend Mode to Overlay.

Creating the active state instances

47 Double-click on the "White Highlight" layer to open up the Layer Styles dialog box, and then add an Inner Glow with a color of black (#000000).

Making the orange menu background

48 We are now going to make the orange menu item background that is going to be the menu hover item for the page that the user is currently on. Repeat Steps 45 through 47, except call the new layer "Orange Highlight" and fill it in (Shift + F5) with an orange color (#FF9900), and keep the opacity at 100% instead of dropping it down to 70% (like in Step 46).

49 Add an Inner Glow Layer Style with #993300.

Making the orange menu background

Creating the "idle" state menu background

The next menu item we’re going to create is the "idle" state, that is, when the button is neither active nor hovered on. For this state, we are going to have to make a layer for each menu item because of the gradient we are going to add to each one.

50 First, hide the highlight and shadow layers by clicking on the "eye" icon to toggle the layers’ visibility.

51 Use the Magic Wand Tool to create a selection around the navigation menu items, clicking on any one of the other colored layers one at a time to add to the selection.

52 Once you have the selected area create a folder called "Gray Highlight", then create a new layer called "Gray Home" and fill with #333333. Change the fill to 0%, and add a gradient overlay Layer Style as I have done with a the Black to White gradient preset selected. Repeat this step for each menu item, naming the layer accordingly.

Creating the "idle" state menu background

Creating the "featured area" container

53 Create a new folder called "box" and then create a new layer inside it called "box border".

54 Using the Rectangular Marquee Tool, make a box that goes in between the two guides about the same height as I have (around 270px) and then fill with the color #333333. Select the object by Ctrl + clicking on the "box" layer and then shrink the selection by using Select > Modify > Contract, and then contract it by 10px.

55 Create a new layer called "border background" and fill the selection you made in the previous step (Step 54) with a gray color (#999999).

Featured area container.

Adding details to the gray box

56 Double-click on the "border background" layer to enter the Layer Styles dialog box, and then add an Inner Glow Layer Style using the settings in the figure below.

57 Create a new layer called "Box Highlight". Create a 1px selection using the Rectangular Marquee Tool on the right of the box, and fill it in with black (#000000). Create another 1px selection at the bottom of the box and fill it in with black (#000000) as well.

58 Create a 1px selection on the top edge of the box, and then fill it in with a dark gray color (#999999). Repeat this step for the left edge of the box. Create a 1px line on the right of the outer edge of the box and fill it in with #000000. Repeat this process for the bottom of the outer edge.

59 Now, make a 1px selection on the top-left edge of the outer edge, fill it in with dark gray (#999999), then do the same for the bottom-right of the inner edge.

Borders.

Add some content into the gray box

60 Add an image and some kind of tag line; I used Myriad Pro Light as the font for the tag line text.

Add some content into the gray box

61 Using the Rectangular Marquee Tool, select around the light gray area, and then modify the selection to feather it by using Select > Modify > Feather (Shift + F6) with the value of 20px for the feather.

62 Invert the selection using Select > Inverse (Ctrl + Shift + I), and fill in the inverted selection with a gray color (#333333).

63Invert the selection again (Ctrl + Shift + I), then delete the selected area (Edit > Clear or hit the Del key); this deletes the area not covering that box.

Adding an image in the gray box.

Creating the "Featured Work" area

64 Create a new folder called "featured work". Using the same font and styles as the navigation bar text (see Step 17 above), type out "featured work" using the Horizontal Type Tool (T). Align the left side of the text on the middle guide.

Creating the Featured work area

Adding the "Featured Work"content

65 Repeat Steps 53-60 with a box the width of the area between the center guide and the right guide for the featured work to create the second box.

66 Add you work inside the boxes by positioning them on top of the box, making a selection around the light gray box by Ctrl + clicking on its layer, inverting the selection (Ctrl + Shift + I), and then deleting the area inside the inverted selection. Repeat this with the second feature box.

Adding content to the featured work area.

Creating the "About Us" content

67 Create a new folder called "about us". Type out "about us" and align it to the right of the "featured work" text on the left side of the guide. Use the same styles "Featured Work" area.

68 Move the type layer in by holding down Shift and pressing your arrow key twice.

69 Add some text in by creating a box the width of the area from the left guide to the center guide and set Anti-Aliasing to None.

Creating the "About Us" content

70 Using your arrow keys to move the layer, Hold Shift and move it to the left four times, bring the left side to the left guide, Hold Shift, then move it to the right twice.

Building the Footer area

71 Make a selection across the bottom of the screen for the footer using the Rectangular Marquee Tool spanning the width of the canvas, filling it in with a gray color (#333333). This will serve as the footer’s background.

72 Use the Single Row Marquee Tool to select a 1px line across the top of the footer, and fill this selection in with a dark gray color (#999999).

73 Finally, add the content for your footer area (such as copyright information) using the Horizontal Type Tool (T).

Building the Footer area

And… we’re done!

If you followed along the tutorial, you should end up with something like the following figure:

Final

Stay tuned if you want to learn how to code this design!

If you’re interested in learning how to convert this web design into a working web page – stay tuned for the follow-up tutorial which will be published next week!

The best way to know when the next part of the tutorial is published is by subscribing to the Six Revisions RSS feed.

"Dark and Sleek Web Layout" Series

This is the first part of a two-part series that teaches you how to create a dark and sleek web design mockup in Photoshop and then you how to code it into a functional web page template.

Do you have questions?

If you have questions regarding this tutorial, don’t hesitate to ask in the comments. In the same token, if you have any feedback or if you catch any errors on this tutorial – please share it with us in the comments.

* Credit *: This tutorial was heavily inspired by the Dragon Interactive website design; they are a groundbreaking web design and development agency based in Los Angeles, California. Check them out when you have a few moments to spare!

Related content

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

62 Comments

CyberFox

June 2nd, 2009

Very Nice Tut. Thanks

fragileheart

June 2nd, 2009

Awesome. Thanks for this.

brum

June 2nd, 2009

Its a nice layout. thx.

Dietmar

June 2nd, 2009

Cool tutorial, thanx for sharing!

Bob

June 2nd, 2009

Nice shit! :)

XIII

June 2nd, 2009

Looking good, I’m looking forward to that follow up.

honour chick

June 2nd, 2009

great tutorial… thxs for sharing this :)

Farooq

June 2nd, 2009

really good tutorial nice template.

Spence

June 2nd, 2009

Great tut!

James Duncan

June 2nd, 2009

Wow, dude no way! That is WAY cool!

ralphredimix

June 2nd, 2009

Ahaha looks like this dude enjoyed your tutorial:

http://dragoninteractive.com/services/identity/

Anupum

June 2nd, 2009

I know all photoshop stuff, someone please explain the cutting after this. Something I came up on my own is here anupum.mrpant.com(incomplete)

Jacob Gube

June 2nd, 2009

@ralphredimix: Wow you missed the two credits to Dragon interactive – at the top and at the bottom of the post. Someone needs reading glasses.

Matt S

June 2nd, 2009

Nice tutorial, only thing I don’t like is how you did that blue gradient on the buttons for the hover – shouldn’t be so dark, I think, as it makes the black text harder to read. Needs to be a bit lighter, closer to the tones DragonInteractive had, in my opinion. Rest of it is nice, :).

@Anupum – Just wait for Part 2, as it involves the coding side to get it into HTML and CSS.

Jacob Gube

June 2nd, 2009

@Matt S: Hey Matt, thanks for sharing your thoughts. I think that you can tweak the design easily to change the hue of the blue color for sure – a darker blue would probably make it less prominent, which could be a good or bad thing depending on your design taste.

Matt S

June 2nd, 2009

@Jacob: Yeah, I was just commenting on their use of that particular tone of blue. I agree that having the navigation being prominent and bold would stand out, but I think that the text should still be more readable, as some users may find it difficult to see what the buttons are labeled. Regardless, it’s a great design, and has put ideas in my mind for one to create this evening.

Sara S

June 2nd, 2009

Bob (above) said it for me. Excellent. Can’t wait for part 2, what a cliff hanger!

Rene

June 3rd, 2009

I like dark colors :p check my website and you will know :p

agilius

June 3rd, 2009

I just found out about your site form twitter :D Great content, what can I say… Added your feed to my list. I hope to see more great stuff from you! :D

Oh, and btw, nice tutorial. I like the nav bar very much!

Mohammad

June 3rd, 2009

tanx , easy and fast , i like web 2.0 website design .

destrukt

June 3rd, 2009

Part 2 Pleeze!

Dirk

June 3rd, 2009

Step 2 – my guides do not snap automatically to center, they stay where I drop them. What am I doing wrong?

Christian Markley

June 3rd, 2009

This is awesome – a very sharp, sleek web design. Thank you! I cannot wait to try this out myself.

Tyler

June 4th, 2009

@Dirk:
If you go to view>snap and make sure that is checked, it should snap in place once that is selected.

helder

June 4th, 2009

Good job!

EricB

June 5th, 2009

Great tutorial!! Thanks for sharing this. Looking forward to part 2! Kudos to Tyler and SixRevisions team!

CgBaran Tuts

June 6th, 2009

Great tutorial can’t wait for the second part

Raphaël

June 6th, 2009

Could I be able to do the tutorial with photoshop elements???

Thanks!

Jacob Gube

June 6th, 2009

@Raphaël: I haven’t used PS Elements in a while (last time I used it was pre-CS versions, so it can be drastically different now).

David Mark Horowitz

June 7th, 2009

Steps 39-44 were tricky to follow. Not sure if I got it right. Keep up the tutorials!

Jahangir agha

June 7th, 2009

Great tutorial :)

Step by step and very easy to follow.

Thanks.

Vikram V-H

June 8th, 2009

Loved the tutorial, and looking forward to the follow-up.

Steps 39-44 were a tad confusing, and I couldn’t get the tesxt right in the ‘about us’ section. I also learned that Myriad Light is a beautiful, but expensive font; what would you consider an alternative? Also; would you ever consider posting a tutorial on the subject of building a ‘blog’ style website, in the style of well.. sixrevision?

Thanks again. :)

fatheadsuk

June 9th, 2009

Lovely tutorial, very classy and beautiful design

David

June 10th, 2009

I’m anxiously awaiting the followup! As a beginning codemonkey, I need all the help I can get :-)

Jacob Gube

June 10th, 2009

@David: It’s coming really, really, really, really soon.

Jon Edwards

June 12th, 2009

Yes, sadly I am struggling with sections 39-44 as wel, I am virtually brand new to Photoshop so I am probably doing something wrong, I have managed to create the selection with the marquee tool (step 39), crated the new Nav Highlight layer and added the gradient (step 40), it’s the next part that is confusing me, in step 41 it states ‘Select the object in the “Blue Highlight” by Ctrl + clicking on the layer’, Now I took that to mean that with the Nav Highlight layer selected, Ctrl+click the Blue Highlight layer icon, which selects the entire row of Nav Buttons because they were linked and then merged in step 37, I can then invert that selection and clear the elliptical area outside the blue background, which leaves me with the glossy highlight in the top half of the home button and the top left hand side of the portfolio button,which brings us to step 42 which says ‘Duplicate the “Blue Highlight” layer, move it over each menu item’, well if I do that it moves a copy of the entire row of buttons, have I missed something.

It seems that one way to do it would be to follow all of those steps immediately after defining the first blue overlay on the home button at step 35.

Any advice with this would be greatly appreciated

Blake

June 15th, 2009

Jacob, have you ever considered posting a template or zip of a pre-made one of your layouts? That would be amazing if you did.

Jacob Gube

June 15th, 2009

@Blake: I should probably make it more evident that you do get a full working template and the PSD source file in the second follow-up tutorial. Check out the tutorial where you can download the source files: How to Code a Dark and Sleek Web Design from Photoshop

Rogerio

June 16th, 2009

Very nice. Thanks for sharing!

Col

June 17th, 2009

This tutorial is sloppy and frustrating to work through. Aren’t 57-59 redundant?

Bogdan Pop

June 19th, 2009

Nice tutorial, but I don’t like the outcome at all.

mylo

June 22nd, 2009

hi..am new at photoshop and web design and i was testing this tutorial and i could not understand step # 61 (is some step missin??) anyone plz help
thnx

Yordan

June 29th, 2009

Not sure why there is a step to create the blue rollover state. Still working on understanding everything, though.

Raspo

July 4th, 2009

Thanks, I’m new with photoshop and I really need this kind of tut

…maybe “this tutorial was TOO heavily inspired by the Dragon Interactive website design”

oliver

July 7th, 2009

I’ve created the new layer in step 19 but i’m confused with step 20. What tool in photoshop do I use to make the selection?

Jacob Gube

July 7th, 2009

@oliver: In the Layers panel, press Ctrl or Cmd and click on the layer with the logos text, this will create a selection for you.

oliver

July 7th, 2009

Thanks Jacob, figured it out I was clicking on the text instead of the thumbnail of the layer.

Jacob Gube

July 7th, 2009

@oliver: Ah! Yes, ctrl+clicking on the name of the layer instead of the thumbnail, will either “unactivate” that layer or let you rename the layer, while clicking on the thumbnail creates a selection around the text. Thanks for letting us know the source of the confusion, this type of ambiguity in the instructions on Six Revisions tutorials is what I’m wishing to avoid in future tutorials.

Tolis

August 6th, 2009

Thenks Jacob for this awesome tut :D can you plz tell me what font you used for the navigation?

Jacob Gube

August 6th, 2009

@Tolis: Tyler used Myriad Pro (it’s an Adobe font) for the main navigation.

Stillwater

August 27th, 2009

Hi, I am stucked at steps 50 and 51. I don’t understand what to do, what layers to hide and what to select with the magic wand. Anyone could give me a hand? Thx!

artendz

September 4th, 2009

Wow.. great design and tutorial..
keep creative..

Don

September 8th, 2009

Great tut. so easy to follow and alot of great photoshop tricks. thanks alot.

Ashley Adams

September 23rd, 2009

Very nice layout!! And thanks for the accompanying tutorial….it’s really well explained. But the blue gradient on the buttons makes the black text a bit harder to read. Otherwise great work

barb

October 29th, 2009

the best tutorial I have ever got!

Richard

January 17th, 2010

Good job, my question is once you have done this how to you turn it into a html file, that is what I am struggling with I am just starting to learn web design

slier

March 26th, 2010

thx for the tuts

mazuki

August 5th, 2010

very nice!

Sharon

May 30th, 2011

Nice layout, thanks for sharing

Florence

September 23rd, 2011

thank u…. this just saved me…brilliant..! :-)

sonusmac

October 10th, 2011

Awesome, thanks for the tutorial.

jonty

October 22nd, 2011

the guides for the second part are 165px and 1115px a lot simpler than dragging a new document and trying to seperate them.

Leave a Comment

Subscribe to the comments on this article.