Creating a Dark Stylish Blog Layout in Photoshop

AD

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

Free-Photoshop-tutorial

Setting the Ground

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

Photoshop-Tutorial-of-web-blog-layout

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

Creating magazine blog layout

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.

Layout-Tutorial-of-photoshop

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

Web-tutorial-of-photoshop

How about some Drop Shadow.

Elegant-Design-of-Photoshop

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.

Free-tutorial-of-entertainment-layout

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

Free-Photoshop-Template-Tutorial

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! ūüôĀ

Free-tutorial-of-entertainment-layout

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.

Photoshop-free-tutorial-of-wordpress-layout

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.

Photoshop-Wordpress-Layout-Tutorial

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

Free-Design-of-Photohsop-Tutorial

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.

Elegant-Web-Blog-Layout-Tutorial

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.

Photoshop-Web-Blog-Layout-Tutorial

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

Entertainment-Layout-Tutorial

Result so far

Stylish-Web-Layout-Tutorial

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

Entertainment-Layout-Tutorial

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.

Photoshop-Tutorial-of-Entertainment-Blog

Result of content

After adding an image and some dummy text.

Stylish-Design-of-Entertainment-Blog

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.

Layout-Tutorial-of-Photoshop

Sidebar

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

Photoshop-Layout-Tutorial

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.

Stylish-Design-of-Entertainment-Blog

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.

Web-Layout-Tutorial-in-Photoshop

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

Stylish-Design-of-Entertainment-Blog

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.

Photoshop-Tutorial-of-Web-Layout-Blog

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.

Free-Photoshop-Tutorial-of-Web-Layout

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

Tutorial-Photoshop-Layout-Design

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

Tutorial-Photoshop-Layout-Design

Footer

Again we create a Rounded Rectangle.

Tutorial-Photoshop-Layout-Design

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

Free-Tutorial-Photoshop-Layout-Design

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

Free-Tutorial-of-Web-Layout

Final Result

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

Free-Photoshop-tutorial

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved