Menu

How to Create a Dark and Sleek Blog Design in Photoshop

Advertisement

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.

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.

This was published on Sep 7, 2009

30 Comments

Giles Van Gruisen Sep 07 2009

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

Roberto Sep 07 2009

Very nice. Thanks.

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

arramuse Sep 07 2009

great article.. sure…

I’ve been Dugg it !

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

Great tutorial!Thanks for that

ADIL Younes Sep 08 2009

Good Job…nice Tutorial

nice tut…

Robomaster Sep 08 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?

Thanks Jan! Nice tutorial.

Awesome work. Thanks Jan

Carl Smart Sep 08 2009

Really like this tutorial, the end result is great.

Kaplang Sep 08 2009

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

Thank you for the instruction..

MyLifeTi Sep 08 2009

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

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 Sep 09 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 Sep 09 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.

Thanks everyone!

cypherbox Sep 11 2009

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

Crusher Sep 19 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 Sep 19 2009

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

Great style, nice and slick

saurabh shah Oct 01 2009

cool design !

Chaitany.GK Nov 18 2009

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

nice work…. i like it… ^_^

Davide Scalzo Feb 01 2010

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

Coldiron Feb 26 2010

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

Nice work…thanks :)

Patrick Owen May 29 2011

Nice tutorial, thanks

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners