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

Pin It