Creating a Dark Stylish Blog Layout in Photoshop


If you remember, I made a collection of blog layouts for the inspiration of designers. Actually I needed a little inspiration myself because I wanted to create a blog layout tutorial. I think I have done a good job, let’s see what you think ūüôā

This is a blog design for a lifestyle or showbiz related blog. It also contains the features of a Magazine Layout. Don’t care about the text, I just copied a few lines from Tayyab’s article¬†How to Stay Prepared for Tomorrow. I don’t like Lorem Ipsum text so I just copy a para from here or there.

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.

Creating magazine blog layout


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 on Blending 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.



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



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!



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.


create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved