How to Create a Dark and Sleek Blog Design in Photoshop

Sep 7 2009 by Jan Cavan | 30 Comments

How to Create a Dark and Sleek Blog Design in Photoshop

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.

Final Result

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.

Set Up the Main Photoshop Document

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.

Making the Metallic/Carbon Fiber Photoshop Pattern

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.

Making the Metallic/Carbon Fiber Photoshop Pattern

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.

Making the Metallic/Carbon Fiber Photoshop Pattern

5 Move Circle1 one pixel down and change this layer’s Opacity to 15%.

Making the Metallic/Carbon Fiber Photoshop Pattern

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.

Making the Metallic/Carbon Fiber Photoshop Pattern

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.

Applying the Pattern to the Background Layer

8 Let us darken our Pattern layer by choosing Image > Adjustments > Brightness/Contrast with the following settings.

Applying the Pattern to the Background Layer

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.

Applying the Pattern to the Background Layer

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%.

Building the Layout's Header

Building the Layout's Header

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.

Building the Layout's Header

We should now have something like this.

Building the Layout's Header

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.

Building the Layout's Header

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.

Building the Layout's 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.

Building the Layout's Header

We should now have something like this.

Building the Layout's Header

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).

Creating an Odometer design element

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

Creating an Odometer design element

We should now have something like this.

Creating an Odometer design element

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.

Creating an Odometer design element

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).

Creating an Odometer design element

Creating an Odometer design element

19 Fill this selection with the color #FFFFFF and change this layer’s Opacity to 21%.

Creating an Odometer design element

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.

Creating an Odometer design element

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.

Creating an Odometer design element

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.

Creating an Odometer design element

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.

Applying the Checkered Flag Pattern to the Design

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.

Applying the Checkered Flag Pattern to the Design

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.

Applying the Checkered Flag Pattern to the Design

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.

Creating the Sidebar Area

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.

Making the Primary Blog Navigation

It should now look like this.

Making the Primary Blog Navigation

28 Duplicate this layer three times and add the text for the navigation using the Horizontal Type Tool (T).

Making the Primary Blog Navigation

29 Repeat 14, 21, 23 and 23, but this time, to smaller rectangles the size of our sidebar.

Making the Primary Blog Navigation

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.

Making the Footer

31 Add some text to our footer. Here I’ve added the Copyright and XHTML/CSS W3C Validators link.

Making the Footer

Finished!

We now have a dark and sleek blog design, congratulations! If you followed along, you should have something like the following figure.

Final Result

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.

Related Content

About the Author

Jan Cavan is a Designer, Front End Developer and Illustrator, whose work has been featured in various online publications, books and magazines worldwide. She runs Dawghouse Design Studio, which is also a design blog providing tutorials, freebies and inspiration for the design community. Connect with her on TwitterFacebook, and Dribbble.

30 Comments

Giles Van Gruisen

September 7th, 2009

Great tutorial! (And great looking design!) I’ll be sure to use some of these techniques in the future!

Roberto

September 7th, 2009

Very nice. Thanks.

Kat

September 7th, 2009

Lens Flare!? Not into the lens flare. I can appreciate the layer styles.

arramuse

September 7th, 2009

great article.. sure…

I’ve been Dugg it !

Tolis

September 8th, 2009

Great tutorial but it will be difficult to slice it and code it into html/css (having IE6 in mind)

quasar

September 8th, 2009

Great tutorial!Thanks for that

ADIL Younes

September 8th, 2009

Good Job…nice Tutorial

Robomaster

September 8th, 2009

Very nice tutorial! I’m a bit confused, though – why would you want to create a JPEG of your blog design, instead of a CSS or HTML?

Angela

September 8th, 2009

Thanks Jan! Nice tutorial.

Nadir

September 8th, 2009

Awesome work. Thanks Jan

Carl Smart

September 8th, 2009

Really like this tutorial, the end result is great.

Kaplang

September 8th, 2009

this is really cool :) I am just redesigning my blog and trying to achieve a grunge style :)

James

September 8th, 2009

Thank you for the instruction..

MyLifeTi

September 8th, 2009

great designs as usual. i hope i can try this soon. need to get a new laptop and start learning photoshop skills.

Greg

September 8th, 2009

Should be relatively easy to slice, actually. Reason being for certain parts you’d need to use a few larger images rather than 1px wide/tall repeated elements.

“large” images actually aren’t so bad. If you dig into many people’s source you’ll see that several use large images. Esp ones with the header style made popular by WebDesignerWall etc.

Good work, Jan!

Ashely Adams

September 9th, 2009

Very nice tutorial Jan, and you have some great looking design too. I do appreciate the layer styles, but it was quite difficult for me to code it into html.

Craig Wann

September 9th, 2009

@Robomaster

It is good practice to use photoshop (or like program) to layout your design before you start coding. This gives you a good foundation to start coding from. Also, it allows you to submit the site design for approval before you code. This lets you make easy changes to the layout in Photoshop without having to spend hours editing code later on.

Jan

September 10th, 2009

Thanks everyone!

cypherbox

September 11th, 2009

I love your tutorial Jan. Keep up the good work.

Crusher

September 19th, 2009

Thank you the nice tutorial. I like the gradient you have used in the neat and clean blog design. I’m planning to use this type of theme for a artist’s blog.

Oguli Victor Michael

September 19th, 2009

One of the best easy to follow photoshop tutorial to follow ever, thank you.

Lance

September 22nd, 2009

Great style, nice and slick

Chaitany.GK

November 18th, 2009

I will try to make a blogger theme out of this :).

hyro

December 30th, 2009

nice work…. i like it… ^_^

Davide Scalzo

February 1st, 2010

I really like this tutorial!!! thank you for sharing it!

Coldiron

February 26th, 2010

Nice to see a fellow designer with love for the gtfour.

riyas

January 22nd, 2011

Nice work…thanks :)

Patrick Owen

May 29th, 2011

Nice tutorial, thanks

Leave a Comment

Subscribe to the comments on this article.