Create Really Detailed Dark Web Layout Using

Photoshop
Posted in Tutorials 3 years ago Written by Michael John Burns 11 Comments
Hello! Today Im 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 didnt 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! Lets
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 youre wondering why I provide that guidelines? Let me answer then I measure them in
order to make this tutorial easier for you so you dont have to wonder at the end of tutorial why item
placement is different and you couldnt 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 weve 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.
Dont 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 dont 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. Were done with slideshow area.
Before moving to the body area dont 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, lets make the thumbnail of flickr photos. Duplicate the Thumbnails
on what weve 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 Ive 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 its 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!