Design a Dark, Contrasted Layout in Photoshop

by Alan - Templates, Tutorials

About the author

Alan is the original creator of this site and now a valued contributor. He is a college student studying finance - more specifically, corporate finance (not what you were expecting, right?) and he really loves long walks on the beach.


Visit Alan's Website | All Articles From This Author

In this tutorial we’ll show you how to create a dark, contrasted layout in Photoshop. This technique makes the top of the layout stand out while the bottom has a dark, professional feel. We’re going to show you how to design this layout step by step in this tutorial. Download the free PSD and see how we did it.

This Photoshop tutorial will show you step by step how to create a dark, contrasted layout. This is a pretty versatile template because it can be used for a corporate website or as a personal portfolio. Don’t forget to download the free PSD at the end of the post so you can see exactly how we did it!

Final Product:

futuro1

Step One:

Create a new Photoshop document, 1000×865 px. Use the Paint Bucket Tool (G) to fill your document with #050402 Name this layer “BG” as this is your background layer.

We’re not finished with the background layer yet. We’re going to do some brushing. Now, don’t get worried.. this is pretty easy brushing. Be sure to create plenty of new layers, each with different brushes so it will have a layered effect. Watch:
futurobglayers futurobg

We used a sort-of baby blue color (#8cc8df) and an almost beige color (#d9c788) as well as some white spots (#ffffff). We used a combination of these four brushes:
futurobrushes

Now, we’re going to change the Blending Mode for all of these brushed layers. For all colored layers, set the blending mode to Vivid Light. For all white layers, set the blending mode to Soft Light and set each layer’s Opacity to 30%. To make our lives a little easier, let’s group these brushed layers:
futurogroup futurobgblended

Woo! Now let’s duplicate our “bg brushing” group and flip it vertically, then horizontally. Edit > Transform > Flip Vertical. Then, Edit > Transform > Flip Horizontal. Change the Opacity of the duplicated brushing layers to 15%.
futurobgfinal

Step Two:

In this step we’re going to create the content boxes. This is where your content will be displayed. Select the Rounded Rectangle Tool (U) and use these settings:vcardroundedrectangle

Now create a new rectangle sized about 915×175 px. If you used the same settings, you’ll only see an outline of your new rectangle. To make it an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”. This will make a new selection based on the shape of your path and you’ll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!
vcardpaths

Select the Paint Bucket Tool (G). Using the color #1d1d1d, fill the new layer. Name this layer “slider bg”

Now, do the same exact thing as above but this time create a larger box, say… 915×405 px. Name this layer “content bg”. Apply a Stroke to these two boxes.
futurocbstroke futurostep2

Step Three:

Time to make the navigation bar, select your Rounded Rectangle Tool (U) again and create a new shape sized 165×45 px. Follow the same steps as above to convert this shape into a selection. Once you’ve converted it into a selection, make a new layer and fill the new layer with white #ffffff and set it’s Blending Mode to Soft Light. Place this layer underneath the “slider bg” layer. This is your navigation button, duplicate this shape for however many buttons you’d like. We have five in this tutorial. We’re going to add a slight Drop Shadow:
futuronav

Time for the navigation text.
futuronavtext
futuroinnerglow futurogradientoverlay futurostroke

Let’s create the logotype now. We used the font “Velocity” which is a free font from dafont.com. Use #ffffff for the color. Duplicate the text layer and Rasterize the duplicated text layer (Right Click > Rasterize Type). Set both text layers’ Blending Mode to Soft Light.
futurologotype
logotypeinnerglow logotypegradientoverlay logotypestroke

We added a slogan and a shape using the same layer styles, you don’t have to add either if you don’t want to.
futurologofinal

Step Four:

Let’s add some text and an image to our Slider area. We inserted the Wordpress logo and used the font “Calibri” to describe our project. If you don’t have Calibri (most Vista machines are shipped with it), Arial or Verdana are good substitutes.
futuroslider

A slider isn’t much without arrows to navigate. Select the Custom Shape Tool (U) and create a new shape similar to this:
futurosliderarrow

Don’t forget to make a new selection from the work path like we did earlier (see above). Create a new layer for this shape and fill it with #630c02. Apply these layer styles:
futurosliderarrow1 futurosliderarrow2 futurosliderarrow3

futurosliderfinal

Step Five:

Time to add some arbitrary text to the “content box” we created earlier. Again, we used the font “Calibri” but Arial or Verdana will work as substitutes.
For the heading, here’s the settings we used:
futuroheading
logotypeinnerglow logotypegradientoverlay1 futuroheaderstroke

We added some well-known logos to the bottom using the font “Famous Logos“. We also threw in some text for the footer, just basic copyright information and additional links. We’re done!

futuro1

Check out these other tutorials we’ve written:

Download!

15 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.