In this web design tutorial, we’ll show you how to make an impressive dark-themed layout that you can use for blog designs. The design will feature "racecar enthusiast" elements such as carbon fiber and checkered flag textures and odometers.
Final Result
Below, you can see what we will be constructing together. Click on the image to see the full-scale version
of the design.
If you follow along this tutorial, we’d love to see how your version ended up. Join the Six Revisions User Group
on Flickr and upload your own work after finishing this tutorial.
Set Up the Main Photoshop Document
1 First, create a new canvas in Photoshop, File > New (Ctrl + N), with dimensions of 1200px x 1150px.
Making the Metallic/Carbon Fiber Photoshop Pattern
2 Let us create the metallic pattern with etched holes ("carbon fiber") by creating another Photoshop document (Ctrl + N) with dimensions of in 10px x 10px. Fill the first layer of the new Photoshop document with the color #3A3A3A by choosing Edit > Fill (Shift + F5). Zoom in on the canvas with the Zoom Tool (Z) to see your work easier.
3 Create a new layer (Shift + Ctrl + N) and name it Circle1. On the center, using the Elliptical Marquee Tool (M), make a circle selection, and then fill it with the color #000000. Hold down the Shift key to make a perfect circle.
4 Duplicate the Circle1 layer and name it Circle2. Go back to Circle1 and add these layer styles by double-clicking on the layer’s thumbnail or clicking on the Add layer styles icon at the bottom of the Layers Panel.
5 Move Circle1 one pixel down and change this layer’s Opacity to 15%.
6 Merge the Circle1 and Circle2 layers (Ctrl + E). Duplicate the merged layer three times and spread it to all four corners of the canvas. Make sure that only half of the circle is showing. Refer to the image below to help you understand how to do this. Let us then define this as a Photoshop Pattern by choosing Edit > Define Pattern. Name it Circles and press OK.
Applying the Pattern to the Background Layer
7 Let us go back to our main Photoshop document, the one with the 1200px x 1150px canvas. First, create a marquee selection around the entire canvas, Select > All (Ctrl + A). Fill the first layer with the Pattern we just created by choosing Edit > Fill. In the Fill dialog box, under the Use dropdown, choose Pattern. In the Custom Pattern dropdown, look for the pattern we created named Circles and then press OK.
8 Let us darken our Pattern layer by choosing Image > Adjustments > Brightness/Contrast with the following settings.
9 Create a new layer. Then use the Brush Tool (B) with a rounded feathered brush tip (the Soft Mechanical brush tip or something similar will do just fine) to brush on the top and bottom areas with a light gray color like #EBEBEB. Change the Blending Mode of this layer to Soft Light.
Building the Layout’s Header
10 We are now going to create our header. Using the Rounded Rectangle Tool (U) with its radius set to 10px and draw a rectangle on the center of our canvas. Make sure the Shape Layer is selected in the Layers Panel, and then change the layer opacity to 57%.
11 Add a Lens Flare effect on our rectangle by choosing Filter > Render > Lens Flare. Use the settings as shown in the subsequent figure. A popup warning window will show up saying "This shape layer must be rasterized before proceeding. It will no longer have a vector mask. Rasterize the shape?" Just click OK. Change the Blending Mode of this layer to Luminosity.
We should now have something like this.
12 Add your logo and an image to our header. The logo that I used is just a fictional name for an automobile company. Feel free to add your own logo to the layout design.
13 On the bottom of our header, add another rectangle with the same settings as our first (Refer to the figure under Step 10). It should be around 60% of the width of our header.
14 Create a new layer above our new rectangle. Using the Rectangular Marquee Tool (M) to make a rectangular selection and then fill it with #000000 color using the Paint Bucket Tool (G). Add a Gradient Overlay layer style. The gradient color stops should be #8A8A8A on the left and #EDEDED on the right.
We should now have something like this.
Creating an Odometer design element
15 On top of the last layer we created, create another layer. We’ll create an orb shape. We are going to make this orb look like an odometer
. Use the Ellipse Tool (U) to draw a circle. Fill this circle with a #000000 background using the Paint Bucket Tool (G).
16 Add the following layer styles to our circle. Use these Color settings for each layer style.
- Inner Shadow: #000000
- Outer Glow: #000000
- Gradient Overlay: left color stop: #191919, right color stop: #878787
- Stroke (choose Gradient for Fill Type): left color stop: #1A1A1A, right color stop: #242424
We should now have something like this.
17 Add a shiny/reflective effect to our orb to make it look like it’s made of glass. Create a new layer on top of our orb. Using the Elliptical Marquee Tool (M), make a circular selection inside the stroke of our orb.
18 Once again, let us use the Elliptical Marquee Tool (M) to subtract a section from our selection. Make sure that the Subtract from selection option is chosen on the Options bar (or simply hold down the Alt key).
19 Fill this selection with the color #FFFFFF and change this layer’s Opacity to 21%.
20 Our orb will contain the blog post dates. Using the Horizontal Type Tool (T), choose any font you wish for our blog post date. Here I used Verdana with the color #C9C9C9.
Making the Checkered Flag Photoshop Pattern
21 Let us create another pattern. Create a new document in Photoshop with dimensions of 20px x 20px. Draw a checkered pattern (as shown below). Each little white and black square should be in 10px x 10px. After creating the Pattern, go to Edit > Define Pattern > (name it Checkered) and press OK.
Applying the Checkered Flag Pattern to the Design
22 Select the gradient rectangle we created previously by clicking on it’s layer while pressing the Ctrl (Win) or Option (Mac) key. Create a new layer above it and choose Edit > Fill. In the Use dropdown, select Pattern. In the Custom Pattern dropdown, look for the pattern named Checkered that we just created, choose it, and press OK.
23 Change the Checkered Pattern’s layer Opacity to 39%. Use the Eraser Tool (E) with a round feathered brush tip (Soft Mechanical should be fine, but experiment with other brush tips to get the effect you like) to erase off around 75% of the checkered flag fill from the left so that it looks like the gradient bar smoothly transitions into the checkered flag.
24 On the gradient bar, we add our blog post title and the number of comments. Also, add an excerpt of the blog post below it.
25 Duplicate the blog post layers three times. It would be great if you could change the texts being used to make it look like a real weblog as this is useful for client presentations.
Creating the Sidebar Area
26 Now, let us create our second column. In blogs, this is commonly called the sidebar. We repeat Step 13 of this tutorial, but this time, we create a smaller rectangle.
Making the Primary Blog Navigation
27 We are now going to create the navigation. Create a rectangle that is the same width as our sidebar. This involves simply repeating Step 14 of this tutorial, but this time to a smaller rectangle. Add a Gradient Overlay layer style to the navigation’s layer. The gradient color stops should be #1F1F1F on the left and #4C4C4C on the right.
It should now look like this.
28 Duplicate this layer three times and add the text for the navigation using the Horizontal Type Tool (T).
29 Repeat 14, 21, 23 and 23, but this time, to smaller rectangles the size of our sidebar.
Making the Footer
30 Let us create another rectangle with rounded corners using the Rounded Rectangle Tool (U). This is going to be the container of our footer. Use the same settings for this rectangle as in Step 10.
31 Add some text to our footer. Here I’ve added the Copyright and XHTML/CSS W3C Validators link.
Finished!
We now have a dark and sleek blog design, congratulations! If you followed along, you should have something like the following figure.
Show your work
If you followed along this tutorial, make sure to show off your work by joining the Six Revisions User Group
on Flickr and adding your own finished product.
Download the Photoshop file
If you’d like to check your work, feel free to download the PSD file used in this tutorial.
- dark-sleek-blog-design.zip
(ZIP, 2.1MB)
Related Content
- Create a Dark and Sleek Web Layout Using Photoshop
- How to Design a Space Futuristic Gallery Layout in Photoshop
- How to Create a Clean Blog Design with Photoshop
- Related categories: Tutorials
and Web Design
About the Author
Jan Cavan is a web/graphic designer. She is also a blogger and the owner of Dawghouse Design Studio
, her personal site. If you would like to connect with her, Follow her on Twitter
.
