Creating a Dark Stylish Blog Layout in Photoshop

FINAL RESULT

Setting the Ground

A blank document, size of your choice, resolution 72. We do this every time 

We fill with background color #363535 and add some noise in background.

Logo

As usual, I’m just gonna make a platform for the logo. You’ll have the logo when you create a web design. Select Pen Tool and draw a shape, then go to Paths Panel and Right Click on the path and select Make Selection.

Add some Gradient in logo. Just a minor one, we wouldn’t want to overdo it.

How about some Drop Shadow.

And a slight stroke. Remember that we are adding all this using Layer styles. You can right click on any layer and click onBlending Options to open Layer Styles.

Now I needed a little text, I just added the obvious name. Added  a little Inner Shadow, and this is what I got.

Navigation Bar

I didn’t do much with menu because if we make navigation flashy, it’d snatch the spotlight from logo. Write the navigation bar options and choose the Rounded Rectangular Tool to draw the Search Area. I think you should add a rollover effect on the navigation bar, this is something I forgot. Sorry! 

Final Result of Header

Since this is a blog layout, the header should not be big in height so that the latest content can get as much space as possible.

Featured Area

I love Taylor Swift, her half-smile just kills me  so I chose her picture to use as the featured topic.
This White Box width is 960px. and this is our featured area.

I use this technique a lot, I drew another the shape with Rounded Rectangular Tool over the old one.

I created another Rounded Rectangle and filled an image of my favorite girl using our old friend Clipping Mask. To create a clipping mask, you just right click on a layer and click Create Clipping Mask.

Lets create a separator,  Rounded Rectangular toolonce again make a vertical shape. Fill with gray color and in second shape draw the Triangle using Custom Shape Tool.

I added some text, I don’t have to describe this step, right?

Result so far

Then come towards the Post area and choose the Rounded Rectangular tool.

Now I’m making a stylish icon the Date Mark. Choose the Ellipse Tool and draw the Shape. Opacity of this shape is 60%. Right click on the selected layer and add a little stroke.

Result of content

After adding an image and some dummy text.

We forgot “Read More” button, didn’t we? Choose the Rounded Rectangular tool and draw the Read More button shape and fill with color and 1px stroke.

Sidebar

Lets move towards the sidebar area. Choose the Rounded Rectangular tool and draw the shape.

I’m making a tabbed widget, if you dont know what that is, just carry on reading. Choose the Pen Tool and draw the shape and fill with color.

Here’s the final Close-up view of the the sidebar. The shape we drew in the previous step, that new has three tabs. And below it, we have the final preview of our sidebar.

Let’s have a look what we have accomplished so far. Result so Far

Slider

Usually this kind of sliders are placed above content and sidebar, but I thought let’s make below it since we already have a featured area up there. Choose the Rounded Rectangular tool and draw the shape.

I have added an image of a poster of a film. I used the Clipping Mask technique here again.  Then I added another rounded rectangle at the bottom inner end of the box. This will contain relevant text.

If you don’t want this area to use as slider, rather an Important Links section, we’ll need titles for each link. I have added the title, “movies”.

I created 3 boxes, you can make less or more. Your choice!

Footer

Again we create a Rounded Rectangle.

Choose the Rounded Rectangular tool once again and draw a hovering shape. You can see the result below.

After adding some text and social media icons, we get a very beautiful Footer area

FINAL RESULT

Ahh….. Finally after following a long tutorial, we got ourselves a very beautiful blog design.