Create an Extremely Simple Dark Web Design in Photoshop

Preview

Click the following image to see the design in full size.

Tutorial Resources

Step 1: Set Up the Canvas

Create a new 1200x1165px document (Ctrl/Cmd + N) with Background Contents set to Transparent.

The web layout we’re going to be making will have a width of 950px, so to ensure our layout contents stay inside this width, let us set up two Photoshop guides. To do this, go to View > New Guide; in the dialog window that pops up, choose Vertical for Orientation and enter 125px for Position.

Set Up the Canvas

Use the same process to add a vertical guide at 1075px.

Set Up the Canvas

You should have something that looks like this:

Step 2: Create the Layout’s Background

In the Tools Panel, change your Background Color to black (#000000) and your Foreground Color to a very dark gray (#0e0e0e), then select the Gradient Tool (G) and make sure to choose Linear Gradient in the Options Bar.

Create the Layout's Background

Create the linear gradient from the top of your canvas and downwards towards the bottom.

Add a subtle texture to the background using the Noise filter (Filter > Noise > Add Noise) with Amount set to 1%, Distribution set to Uniform, and the Monochromatic option checked.

Create the Layout's Background

Step 3: Create the Layout’s Header

Choose the Rounded Rectangle Tool (U) from the Tools Panel and set its Radius to 10px.

Create the Layout's Background

Drag out the rectangle in between your two guides; the rectangle should be exactly 950px wide and 120px tall.

Create the Layout's Background

Once you’ve created the rectangle, double-click on its layer to open up the Layer Style window and give it a Drop Shadow, Inner Shadow, Gradient Overlay and Stroke.

Drop Shadow

Drop Shadow

Inner Shadow

Inner Shadow

Gradient Overlay

Gradient Overlay

Stroke

Stroke

Here is the outcome of the layer style we applied to the header layer:

Stroke

We’re now going to create a shine effect on the header. Go ahead and choose the Pen Tool (P), then draw a path on top of the header–the look you’re going for is to have a nice curved edge at the bottom.

Stroke

Fill your path with white (#ffffff). Next, we need to remove the excess white areas that spill outside of the header. First, click on the white shine layer in the Layers Panel to make it the active layer. Then Ctrl/Cmd + click the thumbnail of the header layer to load a selection around it. Invert the selection by going to Select > Inverse (Shift + Ctrl/Cmd + I). Make sure that the active layer is still the white shine layer, then hit Delete to remove the selected area.

You should be left with something like this:

Now set the Opacity of the shine layer to 1%, and then add a layer mask to the layer. Once you’ve added a layer mask, drag a linear gradient from the right side of the canvas to about a quarter of the way across.

Step 4: Adding Header Content

Choose the Horizontal Type Tool (T) and then add your site’s title and slogan on the left side of the header. I went with "Design Instruct" as the site title, and "Dark Style Template" as the slogan.

Adding Header Content

On the left side of the site title, add one of the glowing orbs from this resource (or create one of your own): Colorful Glowing Orbs.

Adding Header Content

Next, on the right side of the header, we’re going to create our search field. Use the Rounded Rectangle Tool (U) with a Radius of 10px to draw a rounded rectangle onto your header.

Adding Header Content

Double-click on the search field layer to open up the Layer Style window, then give it a Drop Shadow and a Color Overlay.

Drop Shadow

Adding Header Content

Color Overlay

Adding Header Content

Inside the search field rectangle, add some placeholder text (such "Search our site"). On the right side of the search field, add a small magnifying glass from Adobe’s custom shapes library using the Custom Shapes Tool (U).

Adding Header Content

You should have something like this:

Adding Header Content

Step 5: Creating the Navigation Bar

Use the Rounded Rectangle Tool (U) with a Radius of 10px to create a rounded rectangle below the header; it should be 950px wide and 50px tall.

Creating the Navigation Bar

Double-click on the navigation bar’s layer in the Layers Panel to access the Layer Style window and give the layer a Drop Shadow, Inner Shadow, Gradient Overlay, and Stroke.

Drop Shadow

Creating the Navigation Bar

Inner Shadow

Creating the Navigation Bar

Gradient Overlay

Creating the Navigation Bar

Stroke

Stroke

You should have something like this:

Stroke

Use the Rounded Rectangle Tool (U) again to create another rectangle over the top of your navigation bar. Make this new rectangle half the height of the navigation bar (25px), but roughly the same width.

Stroke

Set the opacity of the rounded rectangle layer to 1%. Select the Horizontal Type Tool (T) to add some navigation menu items such as "Home", "Services", "Portfolio", and so forth.

Stroke

Let’s create a rounded rectangle behind one of the links to represent the currently active navigation item, using the Rounded Rectangle Tool.

Give the active navigation item rounded rectangle a Drop Shadow and Color Overlay.

Drop Shadow

Color Overlay

What results is sort of this depressed look for the active navigation item:

On the right side of the navigation area, add a little Twitter bird icon and some text that mocks up the most recent tweet of the site; I used the Twitter bird icon from the Practika icon set.

Finally, in between the Twitter icon and the last navigation item, create two vertical 1px lines next to each other. Fill the first line with black (#000000) and the second line with white (#ffffff), then set the layer’s Blend Mode to Overlay.

Step 6: Creating the Featured Area

Download the iPad pack, find the version of the iPad which looks like it’s lying flat, place it into our Photoshop document, use Free Transform (Ctrl/Cmd + T) to resize it, and then use the Move Tool (V) to position it underneath the navigation bar and towards the left of the canvas.

Creating the Featured Area

Duplicate the iPad layer and move the duplicate layer below the original layer in the Layers Panel. Run the duplicate layer through the Gaussian Blur filter (Filter > Blur > Gaussian Blur) with a Radius of about 2–3px. Afterwards, use the Move Tool (V) to shift the iPad down beneath the original.

Creating the Featured Area

Add a second iPad using the same process, but make the second iPad smaller, place it to the right of the first (bigger) iPad, and make them slightly overlap.

Creating the Featured Area

Use the Rectangular Marquee Tool (M) to create two horizontal 1px lines on top of each other; fill the top line with black (#000000) then the bottom line with white (#ffffff). The line should start about 30px away from the iPad and stretch all the way to the right Photoshop guide that we created earlier. This is going to be our title divider.

Creating the Featured Area

Set the Blend Mode of the title divider layer to Overlay.

Creating the Featured Area

Above the horizontal line, add some text to represent a heading and a short paragraph of text.

Creating the Featured Area

Give the heading text layer a Drop Shadow and Gradient Overlay.

Drop Shadow

Drop Shadow

Gradient Overlay

Drop Shadow

Use the Horizontal Type Tool (T) to add a short paragraph underneath the title divider.

Let’s create a simple "Read More" button. Use the Rounded Rectangle Tool (U) to create a small button below the short paragraph.

Give the "Read More" button a Drop Shadow, Inner Shadow, Bevel and Emboss – Contour, and Stroke.

Drop Shadow

Inner Shadow

Bevel and Emboss – Contour

Stroke

Here is what we have so far:

Step 7: Creating a Slider Mock-Up

Our Featured area will be a slideshow, so we should create some user interface controls for it. Use the Elliptical Marquee Tool (M) to draw four circles, with each circle on a separate layer.

Place the circles on the right side in the Featured area.

Creating a Slider Mock-Up

Give circles 1,3 and 4 a Drop Shadow and Color Overlay.

Drop Shadow

Creating a Slider Mock-Up

Color Overlay

Creating a Slider Mock-Up

You should now have something like this:

Creating a Slider Mock-Up

Give circle 2 a Drop Shadow, Inner Shadow, Outer Glow, and Gradient Overlay.

Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

This results in a glowing ball of light:

Use the Horizontal Type Tool (T) to add text on the left of the circles to indicate the current position (such as "Slide 1 of 4"). Create a 950px horizontal divider using the same method we used for creating the title divider.

Step 8: Creating the Services Area

Using the Horizontal Type Tool (T), add two titles underneath the divider you created in Step 7 and use the same layer style we applied to the heading text layer (Drop Shadow and Gradient Overlay) in Step 6.

Under the left title, add a small paragraph of text, duplicate the "Read More" button we created earlier, and place it underneath the paragraph. On the right side, create a list of 6 items.

Give the list of items some icons that represent them visually. I used the WooFunction icon set to place 6 icons next to each of the list items.

Step 9: Creating the Gallery

Underneath the Services area, create a new title heading the same way as before (with a Drop Shadow and Gradient Overlay). Next to the new title heading, create a small rounded rectangle using the Rounded Rectangle Tool (U). Inside the small rounded rectangle, add the text "New!" Underneath the title, add a short paragraph of text.

Select the Rounded Rectangle Tool (U), then create four rectangles that are evenly spaced apart; place each rectangle on a separate layer.

Give the rectangles a Color Overlay and Stroke.

Color Overlay

Stoke

Here are our rectangles (which will be the backgrounds of our product screenshots):

Before we add some product screenshots, we must first make a selection within the background to make sure that our product screenshots is placed in the center. To do this accurately, first copy your desired image to the clipboard. Then Ctrl/Cmd + click on the first rectangle layer to load a selection around it. Next, go to Select > Modify > Contract and contract the selection by 10px.

Once the selection has been contracted, go to Edit > Paste Into. Do this for all four rectangles until each rectangle has a product screenshot inside it.

Step 10: Creating the Footer

This is our final step. In the last little bit of space left on our canvas, create a rounded rectangle using the Rounded Rectangle Tool; the rectangle should sit below the Gallery.

Give the rounded rectangle a Drop Shadow, Inner Shadow, Gradient Overlay, and Stroke.

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

This is the result of the layer effects we just applied to the footer:

Using the Horizontal Type Tool (T), add your footer copyright information on the left.

On the right side of the footer, throw in your favorite social media icons and an RSS feed icon (alternatively, check out the Freebies section here on Design Instruct for some free social media icon sets).

Tutorial Summary

That’s it, all done! Your final layout should look something like the one shown below. In this tutorial, we created a simple web layout with modern-looking features such as slick buttons and some nice, glowing elements. Thanks for taking part in this tutorial. I’d love to hear your feedback and see your tutorial results (link to them in the comments and post them on our Flickr group).

Preview

Download Source Files

  • Thanks Richard, I like the tutorial! But I’m not a great fan of the outcome. It’s a little too dark, it’s hard to read the top-menu and the bottom dark texts for example.

    But something else I really have to get this off my chest (in general)… Again; Why the Apple iPad?? Whyyyy does every design hàve to contain sómething related to Apple??? Using a Mac or showing you love Apple doesn’t make the design(er) any better, I don’t see the point, Why not a random picture? :'( Why not just add a topless chick, hehe that’s also appealing. Soon I’ll start a movement called designers against Apple 🙂

  • Another very good tutorial, however the contrast between the background colour and the text is not great, but overall a nice tut, thanks Richard.

  • BlaBlaBla

    I will add to that movement!

  • thanks for your comment.

    Firstly the layout displays fine on my monitor, i can see everything i am surposed to see. Obviously not every monitor is the same so you will get some variation in color.

    Secondly i chose the ipad just as a space filler because i was unsure of what else to use. Yes i do no apple is over used but everyone still uses them.

  • WOW!! I haven’t been able to stumble across a tutorial that is this detailed and not a video in a long while, great job!! Do you have others?

  • Thanks also for your reply, sorry it may have sounded a little harsch, but it is more of a general remark I had 🙂 certainly nothing personal 🙂 It’s just annoying to see that iPad pop-up on pretty much every website you visit these days 🙂

    The design itself is nice, but I’ve tried it here now on an HP Elitebook 8540w (with FullHD dreamcolor screen) and a Samsung p2370 monitor, both still seem dark, but it’s better than what i saw yesterday on a cheaper HP dv2 1130eb 🙂

    congratz on the tutorial again! Gotta love that twitter birdy 😉

  • I just want to leave a comment about the Apple iPad. This is, in fact, a tutorial. You can change the outcome based on your own preferences. To me, what’s more important than the use of the iPad is the method for preparing it. You can replace that with your own product shots.

    I didn’t see anything in this tutorial that implies that the use of the iPad made the tutorial better, or that a designer needs to use an Apple product to be better. You may have read into it more than needed, or you’re using this innocent tutorial as a platform to propagate your own opinions/hate against a product. Let’s keep comments on topic.

    By the way, this comment was typed on a custom-built Windows PC, and no, I don’t own an iPad.

  • I have to agree with musback, it is indeed a little too dark. Maybe adding some tables would help the readability. All in all, great outcome. Looks clean and professional. Thanks for sharing!

  • At least, the main text text color could have been a bit brighter cos readability is important in a site. But, yeah.. the overall tut is great..

  • This can be a template in blogger (blogspot.com) platform?

  • Great tutorial Richard!

    I love the layout and subtle design elements. I do think a lighter color pallet would help this layout to be more engaging. Either was a very solid share, thanks!

    On a side note, glad to see you got Photoshop Plus up and running, congrats!

  • @Curtis, thanks for your comment, much appreciated.

  • Amazing how easy you made it look. ^^
    Great tutorial !

  • this is really cool
    thanks for the tutorial

  • Ashwani

    very nice way of teaching

  • I love it! Really nice work. I put a link to this tutorial on my site.
    Keep it up!

  • I tried this one & got result something like that but learned a lot from this must say, well explained step by step. Thanks for this !! 🙂

  • Mark

    Hi your text syle is really crisp, what style do you have the text set too? regualr and smooth? or? also what font did you use for the body content?

  • shea

    looks nice, but how do i get it functional?? is there a tutorial on that topic?

  • I’m noot that much of a internet reader to be honest but
    your sites really nice, keep it up! I’ll go
    ahead and bookmark your websire to come back down the road.
    Alll the best

  • I’m noot that much of a internet reader to be honest but
    your sites really nice, keep it up! I’ll go
    ahead and bookmark your websire to come back down the road.
    Alll the best