In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in December of 2010.
About the Author
Julian Chaniolleau, also known as Devilcantburn, is a freelance graphic and web designer. He's also an author at ThemeForest, with templates like 96Display or Stereoline, you can also find more of his work at devilcantburn.com.
This design is a great example of Julian's unique style: dark, yet sophisticated enough to be used for a business site. You can check out more of Julian's design at his ThemeForest profile, DevilCantBurn.
Let's dive right in!
Step 1: Setting the Document
Begin by creating a new document in Photoshop that is 1200px x 1600px. Be sure your resolution is set to 72 pixels/inch and your background is set to white. We need to unlock the background layer so we can add some layer styles, right click the background and select “Layer from Background”. You can then rename the layer back to background..
Fill the background with the color #101010.
Now create the following guides (Menu > View > New guide...) :
- 120px vertical
- 600px vertical
- 1080px vertical
Now you have the borders and middle of the interface's area.
Step 2: Organize Your Groups...
Organization is really important to my own workflow - so the next step is to start creating our Layer Groups. Starting organized is important for one main reason: most big website projects end with hundreds of layers, so if you don't start with organization in mind, it'll be easy to get lost if you don't take the time to group elements into "folders" and keep everything named properly.
In the Layers panel, click on the icon to create a new folder, double-click on the name of the folder to edit the name. Do the same for all the folders.
The main layer folders that we want are :
- Header
- Slider
- Main
- Footer
Step 3: Create the Header
Select the "header" folder in Layers panel. Then, select the rectangle tool from the Vector Shapes area of the toolbar:
Draw a rectangle. Rename it like "Top bar bg". Do Ctrl+T or Cmd+T (Mac) and set the proprieties to be 1200px wide by 10px tall:
Now let's add some subtle styling; Double click on the colored thumbnail in the layers panel to set the color to #252525. Double-click on the layer to set the FX-layer like this:
This subtle "inner shadow" will add a border effect to the bottom of this rectangle - this is important to separate it from the rest of the header design.
Step 4: Create the Menu
Create a new folder named "Top Menu" in the HEADER group.
Draw a new rectangle. Rename it like "Top Menu bg". Do Ctrl+T or Apple+T and set the proprieties like the "Top bar bg" but with 90px height and 10px in Y axis. So this rectangle will be just under the "Top nar bg" layer in the Layers panel.
Create the item menu text as you need. I use the font, "Droid Serif", to create the menu, but you can use anything that you'd like. Position it at 20px from the right guide line.
I put 4 "spaces" (hit the spacebar 4x) between each item and the font-size is 18px.
Step 5: Place the Logo
Create a new folder named "Top Logo" in the HEADER group over all groups. Select it and go to Menu > Files > Import. In the resources folder i have included a sample of logo named "logo_zombie.psd". Choose it and position it at 130px of the left and 5px of the top.
You can add a new FX style on this logo as you need.
Step 6: Create the Slider
Select the SLIDER group and create a rectangle like the step 3 and set the proprieties with 400px height and 100px in Y axis.
Rename it something like "Gradient" and double-click on the colored thumbnail in the layers panel to set the color to #77b400. Double-click on the layer to set the FX-layer like this:
Gradient Black (#00000) with opacity at 100% to Black with opactity at 0
Now, you should get a design like this :
This strategy of adding a "shadow gradient" instead of using fixed colors is important because it will allow us to easily change the colors later on by adjusting the base-rectangle color.
Next, Create a new folder named "slider_block". Create a rectangle (with the Vector Tools (U) as always) in this group named "Transparency".
Position it with those values : Double-click on the layer in layer's panel to open the FX-Layer options. and set it like this :
Duplicate the "Transparency" layer, remove the FX-layer options and name it "picture area".
Set the background opactity to 100% and resize it with this values to create the multi-layer effect:
Step 7: Create the Slider Control Elements
Create a new document 100px x 100px. Select the Custom Vector Shape (U) from the tools bar and click-right on the document to open the list of custom vector shapes. To create the arrow, I'll start with a default arrow shape, and then we'll customize it:
Create the shape with about a 50px width. Name the layer "Arrow slider". Transform the shape as you need... with the white arrow tool (A) , you can adjust the vector paths to make your own arrow...
Put a FX-Layer on the layer with this settings :
Remove the background of this document and save the document as : ArrowSlider.psd in the PSD folder.
Place this arrow in the "slider_block" group. To do that, Menu > File > Import...
Choose the ArrowSlider.psd and place it at the position you want next to the slider.
Duplicate the arrow layer (Ctrl+J or Cmd+J) to create the left arrow and position it.
Use Menu > Edit > Transform > Rotate on horizontal axis to rotate the arrow in the proper direction.
Step 8: Highlight the Slider
Hide the "slider_block" group.
Create a new blank layer, and use the Circle selection tool (M) to create a circle about 200px.
Fill it in with white color.
Release your selection, and then use Filter > Gaussian Blur and set it at 50px.
Set the layer fusion on "overlay" and move it at the top of the slider.
Duplicate this layer 2 times and position the layers at the bottom the slider area at left and right...
Step 9: Enhance the Slider
Duplicate the "gradient" layer and rename it "dark bar". Reduce the height to 20px and position it at the bottom ot the "gradient" layer.
Change the color of the layer to Black instead of the gradient color and set the layer background opacity at 60%.
Double-click to open the FX-layer options and create a dropshadow and innershadow like this:
Move the layer at 1px down.
Now you got a nice highlighted line between the slider and the black background.
Step 10: Make the Slider Float!
Open the background.jpg file from the resources folder (from the downloaded files) and go to Menu > Edit > Define pattern.... Then close the file.
Now select the background layer and double-click on it to open the FX-layer options and click on Patterns tab. Here select your new background, just created.
Now get the selection of the Transparency layer (Ctrl + click or Cmd + click on the layer).
Create a new layer named "Shadow" and place it under the "Transparency" layer.
Fill it in black and add a Gaussian Blur on.
Menu > Filters > Blurs > Gaussian Blur... and make it with 20px lenght.
Now transform it to make it like a dropshadow....
Once again, use Menu > Filters > Blurs > Gaussian Blur... but now with 5px length.
Now transform it again to resize it to match the transparency layer....
Keep selected the "Shadow" layer and take the "Transparency" layer's selection (Ctrl+click or Cmd+click on the layer in layers panel).
Now, invert the selection Ctrl+i or Cmd+i and click on the icon to create an opacity mask on the "Shadow" layer. The shadow is now hidden behind the transparency area.
Step 11: Enhance the Logo
Just before we move on to the main part, we are going to enhance the logo to make it more dynamic.
Create a new blank layer under the logo layer and name it "shadow logo". Get the selection of the logo layer and fill the "shadow logo" layer in black.
Add a Gaussian Blur on with 1,5px lenght.
Transform it. Ctrl + T or Cmd + T to transform it, move the referer point totally at left and move the right
handle to the bottom for 20px...
Now you got a nice depth shadow effect. You can also add more effect on the logo itself if you want!
Step 12: Define the Columns
Now we're going to add some additional guides to create the 4 columns that the rest of the content has been designed with...
Create the following guides (Menu > View > New guide...) :
- 355px vertical
- 375px vertical
- 590px vertical
- 610px vertical
- 825px vertical
- 845px vertical
We have now 4 columns of 215px each and 20px between them.
Step 13: Slogan Block
Import the geek_zombie.png from the resources folder and position it at the middle of the first column.
Create a big line of text for the slogan with the text of your choice. I used the font "Droid Serif" at the size of 30px and line-height at 42pt. You can adjust the typography as you wish though ;)
Draw a rectangle under the slogan with 7px of height.
On the black rectangle create the FX-Layer options like this :
You have now a nice bevel (pressed) bar.
Select the 3 layers (Zombie + Slogan + black bar) and do Ctrl + G or Cmd + G to group them. Rename the group "Slogan". Note how we're staying organized through the entire process!
Step 14: First Column Block
Take the Text tool and create a title. I'm using 30pt type again - notice how this is the same as the slogan, to help keep the typography similar. This helps to ensure a consistent, professional look across the whole design.
Define a zone of text at around 128px of the title and put some small "filler" text inside it. I'm using 13pt Arial, but you can use what you'd like.
Duplicate the black bar we have created for the slogan in the step before and put it under the text at 20px of the bottom of the text.
Resize it to make it fill the first column.
Create a picture area with the Vector Shape tool (U). 215 x 88px.
Duplicate it, rename it as "Tranparency_1col" and stretch it in height to get a block of 215 x 108px.
Press Ctrl+, or Cmd+, to move the layer down in the Layer panel.
Select the "Transparency" layer and copy the FX-Layer style to put it on the layer just duplicated ("Tranparency_1col").
Now you can put you image over the picture area. Right-click on the image and select "Create clipping mask".
Step 15: Create the Other Columns
You can now duplicate the first column (layer group), and then move it to the second column. Change the content (image/text) as needed.
Do the same for the columns 3 and 4...
Step 16: The Footer
Go to Menu > Image > Canvas size and edit the size of the canvas like this :
Draw a rectangle. Rename it like "Footer bg". Do Ctrl+T or Cmd+T (Mac) and set the proprieties to :
Double click on the colored thumbnail in the layers panel to set the color to #101010. Double-click on the layer to set the FX-layer like this :
Select and duplicate the layers "dark bar" and "Gradient" from the Slider group.
Group the layers and place them under the "footer bg" in the Layers panel.
Move them to the bottom of the document.
Resize them to create the style you want.
In my example, I made the Gradient layer 35px tall and the "Dark bar" layer 8px tall...
Put the logo at the bottom right at 20px of guide right.
Duplicate the top menu items to put them in the footer over the "footer bg" layer.
Create a copyright line in Arial, 11pt, black color.
Duplicate the "footer bg" and resize it in height at 10px.
Move it just over the "footer bg". That create a nice bevel effect for the bottom menu.
Done! Create Your Own Custom Versions!
Conclusion
Thanks for following along! I hope you're able to use some of the tricks and techniques in this tutorial in some of your own projects. If you remember anything, I hope it's that staying organized is crucial to creating a well-designed site. These same layer-sets can be used to create the HTML/CSS framework when you begin coding. Thanks again!
