Create Really Detailed Dark Web Layout Using Photoshop

Posted in Tutorials • Posted on 11 Comments

Hello! Today I’m gonna teach you how to create a dark template, I tried to explain everything as detailed as I could, but let me know if you didn’t get something right. This is my very first time on writing a tutorial and I am very excited about this chance.

I will do my best to make this tutorial easy for you to follow, just follow screenshots as we move forward step by step and try to understand how to use these techniques in your own designs! Let’s start?

Before we get started download first 960grid system for easy Guideline creation..

Open 960_download\templates\photoshop\960_grid_12_col.psd

Here is what we will making, click on image for full preview:

1st Step- Creating Document & Guidelines

Follow this guidelines Go to view > new guide make sure that the orientation is Horizontal

Repeat until you complete all the guidelines: (20px,50px,70px,450px,480px,608px,638px,766px,796px,924px,974px)

Maybe you’re wondering why I provide that guidelines? Let me answer then –   I measure them in order to make this tutorial easier for you so you don’t have to wonder at the end of tutorial why item placement is different and you couldn’t get the same outcome as I did.

Step 2 – Creating The Header

Create a new layer and name it Top_header Click on Rectangular Marquee Tool(m) Make a selection from the left to right 70px height.

To make this tutorial easier I will not mention height anymore. I will just say 3rd horizontal Guide(3HG). This is based on what we’ve done on first step. OK?

Set the foreground to 2d2d2d, backround 121212.

Click on Gradient Toll (g) drag it from top to center

Step 3 – Creating SiteName and Highlights

Click on Horizontal Text Tool(t) Assuming that we have two-word Site Name. The 1st word is 1st and the second word is webdesigner.

1st word:

  • Size: 36px

2nd word:

  • Size: 24px

Put the SiteName at the Top left side.

1st Word:

Add this blending Option:

Drop Shadow:

  • Blend Mode: Normal
  • Opacity: 75%
  • Angle: 120
  • Distance: 1px
  • Spread: 0%
  • Size: 5px

Gradient Overlay:

  • Style: Linear
  • Color: a2a2a2 – ffffff

2nd Word:

Drop Shadow:

  • The same as 1st Word layer

Gradient Overlay:

  • Style: Linear
  • Color: 9ea5fe – 646cd8

Now for the Highlights create a new layer at the top of top_header and name it Highlights, (Ctrl + Click) the line between the two layer.

Select Highlights layer and set the blend mode to Overlay and Opacity to 0%.

Click on Brush Tool(B). Set the Diameter to 250 px and Hardness 0%

Start clicking at the top of our logo. Select 1st and Webdesigner hit (CTRL + G) to group and name it site_logo.

Now You should get something like in the screenshot below:

Step 4- Creating Navigation Menu

Click on Rounded Rectangle Tool(U), Radius: 20px. Color will not matter because we will applying Blending Options after that anyway.

For the alignment of our navigation it should be placed 320 px from the left side, between the 1st horizontal line and 2nd draw your Shape.

Add this Blending Option:

Inner Shadow:

  • Blend Mode: Overlay
  • Color(#ffffff)
  • Opacity: 75%
  • Angle: 120
  • Distance: 1px
  • Choke: 0%
  • Size: 0px

Gradient Overlay:

  • Blend Mode: Normal
  • Style: Linear
  • Angle: 90
  • Gradient: 121212 – 363636

Stroke:

  • Size: 3px
  • Position: Outside
  • Fill Type: Gradient
  • Gradient: 000000 – 363636
  • Style: Linear
  • Angle: 90

Make sure to check Reverse now and duplicate the shape.

Add these Blending Options on duplicated:

Inner Shadow:

  • The same

Gradient Overlay:

  • Check Reverse

Stroke:

  • Size: 2px
  • Fill Type: Color
  • Color: 000000

You should achieve the same result as in the screenshot below:

To make things organize and easy to remember name the first shape nav_frame and the duplicated shape to nav_btn.

Click on Text Tool(T) and type: Home. I used Futura Condensed font, 14 px Crisp.

Place it in the center of button we made. After doing that, group 3 layers and name group –  Home_btn.

Now for the other navigation button duplicate the Home_btn, move it 15px from the Home_btn, now select nav_btn

Add this blending Option:

Inner Shadow:

  • The same

Gradient OVerlay:

  • UnCheck Reverse

Stroke:

  • The Same

After doing this change HOME to BLOG. For the two remaining buttons just apply the same step. Name it ABOUT & CONTACT.

Don’t forget to rename each folder, then group all btn and name it Navigation_btn.

Done? For now you should have something looks like this:

Step 5- Creating Search Bar

Select Rounded Rectangle Tool (U), 15px from Contact button

Add this Blending Option:

Inner Shadow:

  • Blend Mode: Overlay
  • Color(ffffff)
  • Distance: 1px
  • Chock: 0
  • Size: 0px

Color Overlay:

  • Blend Mode: Normal
  • Color: 191919

Stroke:

  • Size: 1px
  • Position: Outside
  • Fill type: Gradient 000000 – 363636
  • Check Reverse

To make the search button duplicate the Shape go to Layer > Rasterize > Shape and clear all the layer styles. To do this select the layer Right Click > Clear Layer Style.

Select Rectangle Marquee Tool(M) follow the selection done as shown in screenshot below:

Name the 1st shape to search_frame and the duplicated shape to search_btn.

Select search_btn and

Add this Blending Option:

Inner Shadow:

  • The same

Gradient Overlay:

  • Gradient: 353399 – 646cd8

For the search icon Custom Shape Tool(U) select search icon and place the shape at the center of search_btn, name the shape search_ico and group the 3 layers and name it Search.

Step 6- Creating Slideshow

Create a new layer below the Top_header and name it Slideshow_bg.

Select Rectangular Marque Tool(M), make a selection from left to right 3rd Horizontal Guide to 4 th Guide, then fill it with #0a0a0a color.

Add this Blending Option:

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 202020

Select the Top_header Layer Add this Blending Option:

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 000000

Result:

Now we will download some free useful stuff Nexus One icon gadget – Here

Create a new layer above Slideshow_bg, name it slide_display. Open it, hide everything so just The Gray Nexus One remain –   (CTRL + SHIRT + E) to merge. Select all (CTRL + A) Copy (CTRL + C), go back to the document (CTRL + V) to paste. (CTRL + T) to transform and place it as shown below.

Click on text tool, choose Helvetica font, size 24px, Crisp and type on “Google Nexus One“.  Now copy some dummy text from Lipsum.com. Copy the Character Setting as shown below:

Now we will be making 2 buttons for ‘discover more‘ & ‘watch video‘. To do this create a new layer above Slideshow_bg. Select Rounded Rectangle Tool(U), draw a shape as shown below.

We will be applying the same style just like our navigation. Copy the layer style of nav_frame. To copy simply Right click > Copy Layer Style. To paste Right Click Shape 1 > Paste Layer Style. Duplicate Shape 1, Copy and Past the Style of nav_btn. Do the same step to shape 2. Name the shape as shown below.

We will change the Gradient color of Slide_btn

Change this Gradient Overlay Gradient to 353399 – 646cd8, grab Text Tool(T), Helvetica Bold, set the size to 12px, Crisp and type some text. Mine is DISCOVER MORE & WATCH VIDEO. Group the layers, name group Slide_btn.

Now we will make Slideshow Thumbnails. 86 x 86 px big. To do that select Rectangle Tool(U), make a shape as show below. Name it thumbnail.

Add this Blending Option:

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 272626

Create a new layer below the shape and name it thumb_frame, CTRL + Click on the shape mask to make a selection, then go to Select > Modify > Expand 5px. Fill it with #000000, black color.

Add this Blending Option

Drop Shadow:

  • Blend Mode: Overlay color(ffffff)
  • Distance: 1px
  • Spread: 0%
  • Size: 0px

For now we can really see that the effect popping up. Just stick with me and later on we will add the highlights for the Slideshow_bg. To make our thumbnail image, duplicate the slide_display and place the duplicated layer at the top of the thumbnail and link it by pressing CTRL + CLICK the line as shown below.

Group the 3 layers and name it thumbnail. Duplicate 2 times 20 px apart. And reduce the opacity of the group to 50 %.

Now we will create Prev and Next Buttons.

Select Rounded Rectangle Tool(U). Set the Radius to 20px. Follow the image shown below.

Add this Blending Option

Inner Shadow:

  • Distance: 1px
  • Choke: 0%
  • Size: 5px

Gradient Overlay:

  • Gradient: 313131 – a7a7a7

Apply to both arrows and don’t forget to name it next and prev.

Now lets work on our Slideshow_bg. Create a new layer above and name it noise link it to Slideshow_bg. Add another layer above and name it Highlights.

Select the noise layer, set the foreground color to #0a0a0a and fill it using Paint Bucket Tool(G) or by hitting (ALT + Backspace).

Go to Filter Noise > Add Noise > Amount 1% and set the opacity to 30%

Select Highlights Layer, set the layer mode to Soft Light, Opacity to 40%.

Select Brush Tool(B). Master Diameter to 600 px, Hardness 0% and you are ready to start.

Click in the middle of the slide show and at the top of Nexus One. We’re done with slideshow area. Before moving to the body area don’t forget to Group, what we have made and name it Slideshow_Section.

Step 7: Creating Body Background

Create a new layer above the Background and name it body_bg.

Grab the Rectangle Marquee Tool (M), make a selection in the remaining white areas. Grab Gradient Tool(G), set it to be Radial Gradient, change the foreground to #292929 background #121212. Start to drag from the top to the bottom.

Create a layer above body_bg, link it to body_bg and name it noise. Do the same step as we did on our Slideshow_bg.

Step 8- Dividing the body into two section

Now will divide the body into two parts: Left Side bar and the Content. Grab the Line Tool(U) 1px with white black color.

Set the layer mode to Soft Light. Make another line besides the black line by hitting ALT + ARROW RIGHT. Set the layer to Soft Light and Opacity to 50%. Group both shape and name it Divider.

Step 9- Creating Left Side Bar Recent Posts

To our Leftside Bar for this tutorial we will be making Recent Post and Flickr images.

Grab Text Tool (T),  Font Helvetica, 18 pt, Smooth. This is for our Header. For our posting titles change the size to 12 pt, None. Refer to image below for the positioning.

Create a new layer below the text and name it post_bg.

Grab Rectangular Marquee Tool (M), make a selection as show in the image.

Fill it with #0a0a0a color. Set the layer to Overlay, Opacity to 15%. Do the same in every Post Title. Group all the layers we made and name it Recent_posts.

Step 10- Creating Left Side Bar Flickr

The same font and size to Step 9, let’s make the thumbnail of flickr photos. Duplicate the Thumbnails on what we’ve done on our slide show and resize it about 65 x 65.

Duplicate the divider. Transform it horizontally, place and resize as shown in the screenshot.

Step 11- Creating The Content

For this step we will be making a common post on a blog that will have its Post title a little info and an image thumbnail.

For the image thumbnail just the same on Flickr thumbnails Grab a copy on it and Resize 120 x 120. For the Post title Set the font size to 14pt,  Smooth Color(#bebebe). For the info, set the font size to 12pt None.

Additional to our post, download a free social icons as you like.

Here what I’ve done.

Group all layers and name group as Post. Duplicate 2 times and place it 20 px below.

Step 12- Creating the Footer

Below the last post create a layer and name it footer. Grab Rectangle Marquee Tool(M), Set the foreground color to #0a0a0a.

Make a selection from the bottom left to top right of the last horizontal guide and fill it with the foreground color.

Add this Blending Options

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 202020

Grab Text Tool(T), set it’s size 12pt, None. Type in your Copyright.

Finally were done.

I hope you enjoyed this tutorial and you could understand my explanations, I am not native English-speaking but I tried my best to teach you some great tips. Maybe you have some comments what should be improved?

Maybe some steps were not enough good explained? Let us know –  we are here to help!

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

11 Comments Best Comments First
  • Marin Todorov

    Tuesday, July 6th, 2010 15:02

    1

    Very well done tutorial thanks for sharing.

    However I don’t think the concept is relevant, while Android app developers probably won’t be interested in having a perfect web site design like the apple devs. Just my 2c :)

    0
  • Sandeep Soni

    Tuesday, July 6th, 2010 20:38

    4

    This really helped me in creating my design

    0
  • Rob

    Tuesday, July 6th, 2010 18:26

    3

    Great tutorial. Thanks. I would love to see a tutorial such as this built in something more in tune with the web, like Fireworks or Opacity. Photoshop is so last century when it come to web design.

    0
    • Eduardo

      Wednesday, February 9th, 2011 20:18

      9

      I AGREE.
      I dont know the people still creating photoshop tutorials to web design!!!!!

      Take a look at this post “50 reasons to not use Photoshop for Webdesign”:
      http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html

      0
    • Brandon

      Sunday, July 3rd, 2011 11:16

      10

      This makes everything so completely pasinles.

      0
  • tom lewis

    Tuesday, July 6th, 2010 18:23

    2

    Presentation was good, but Audio explanation would have made it better.

    Tom

    0
  • Tyler

    Wednesday, July 7th, 2010 14:31

    6

    This is a great design and tutorial. If only I had seen it before I created my last site that was all dark themed like this. I am book marking, I might have to make a couple changes to the one I did! Thanks!

    0
    • Saad Bassi

      Wednesday, July 7th, 2010 14:39

      7

      We hope it will come handy in your next design project. :D

      0
  • James

    Friday, February 24th, 2012 14:50

    11

    Just a minor, to get the line selected between layers it’s (ALT+CLICK) on this paragraph

    “Now for the Highlights create a new layer at the top of top_header and name it Highlights, (Ctrl + Click) the line between the two layer.”

    Great tutorial :)

    0
  • Sett

    Sunday, July 11th, 2010 19:51

    8

    it is so perfect and really help. because my blog really suitable with dark theme, consider the name..

    Thank you so much, i love this posting.

    0
  • Michael Burns

    Wednesday, July 7th, 2010 13:31

    5

    Your welcome vectorss :D

    0
  • James

    Friday, February 24th, 2012 14:50

    11

    Just a minor, to get the line selected between layers it’s (ALT+CLICK) on this paragraph

    “Now for the Highlights create a new layer at the top of top_header and name it Highlights, (Ctrl + Click) the line between the two layer.”

    Great tutorial :)

    0
  • Sett

    Sunday, July 11th, 2010 19:51

    8

    it is so perfect and really help. because my blog really suitable with dark theme, consider the name..

    Thank you so much, i love this posting.

    0
  • Tyler

    Wednesday, July 7th, 2010 14:31

    6

    This is a great design and tutorial. If only I had seen it before I created my last site that was all dark themed like this. I am book marking, I might have to make a couple changes to the one I did! Thanks!

    0
    • Saad Bassi

      Wednesday, July 7th, 2010 14:39

      7

      We hope it will come handy in your next design project. :D

      0
  • Sandeep Soni

    Tuesday, July 6th, 2010 20:38

    4

    This really helped me in creating my design

    0
  • Rob

    Tuesday, July 6th, 2010 18:26

    3

    Great tutorial. Thanks. I would love to see a tutorial such as this built in something more in tune with the web, like Fireworks or Opacity. Photoshop is so last century when it come to web design.

    0
    • Eduardo

      Wednesday, February 9th, 2011 20:18

      9

      I AGREE.
      I dont know the people still creating photoshop tutorials to web design!!!!!

      Take a look at this post “50 reasons to not use Photoshop for Webdesign”:
      http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html

      0
    • Brandon

      Sunday, July 3rd, 2011 11:16

      10

      This makes everything so completely pasinles.

      0
  • tom lewis

    Tuesday, July 6th, 2010 18:23

    2

    Presentation was good, but Audio explanation would have made it better.

    Tom

    0
  • Marin Todorov

    Tuesday, July 6th, 2010 15:02

    1

    Very well done tutorial thanks for sharing.

    However I don’t think the concept is relevant, while Android app developers probably won’t be interested in having a perfect web site design like the apple devs. Just my 2c :)

    0
  • Michael Burns

    Wednesday, July 7th, 2010 13:31

    5

    Your welcome vectorss :D

    0

Comments are closed.

54.205.144.54 - unknown - unknown - US