Complete Guide to Creating a Blog Website Layout

Then leave a bit of space, like 30px, and just type the text you want to appear there. Well, I think I don't have to show you how to type text. You can add guides to help you arrange everything straight.

We will have a bit of work later in design because of three columns, but here, on design process I kept it simple.

Step 14 - funky border

Well, this part is also pretty easy. We will do only 6 layers here. Pick brush tool with white color, 1px in size and make a doodle as mine below. Notice the beginning and end of doodle.

Then go to Edit > Transform > Scale and make it very, very thin so it will have about 3-4px.

Then move it to the upper border.

Repeat this step for all the edges, but on the header use white lines, while on paper texture- black. Here you have some close-ups.

Step 15 - blog post / sidebar

With type tool add the blog post title, meta information's and content. Remember to leave some space for comments counter. Also follow the tips on the image (red color). I used advent pro and Arial fonts.

Below the content I added separator, the comments title with counter and designed some simple comment view. This part I'm leaving to you for it is all about distributing images and text with basic background. However we will code my example later in html/CSS/

On the very bottom is the adding comment form. All elements there are hand-drawn.

Creation of them is as simple as the border we have made before. Just use some round brush with dark color, make a shape or line and then scale it down. For example look on the button:

I suppose this part won't make you problems as you already know the technique. Try to reproduce all of the elements as I did. You can use the image or PSD as a reference. Then make a sidebar like below:

Notice the elements hovered with arrow. Yes- they were created big and then scaled down. As you can see I've simulated the CSS :hover effect as well.

It will looks better if for every sidebar title you will create different shape

Step 16 - search form

Pick some light color like #e4e2e4. Then choose Rounded Rectangle Tool and set some small radius, like 3-4 pixels. Make a shape on header, stick it to the guide, then lower it's opacity to about 85%. Place it on the level of your logo.

Then create a shadow as we made for a RSS ribbon. Here's little tricky. You should get rid of shadow that is underneath the shape for it is transparent. To do that simply CTRL+Click on main shape layer (while you having shadow's layer selected [blue background]) and you will have a selection, then hit DELETE and there should be nothing under the shape.

Then add the alter text and search icon. The color of text is #666666. It is important to choose your colors wisely and to plan them good, so later in CSS we will don't have to experiment with styles. You can copy the layer styles to the search icon from the RSS icon; just change them a bit so they will looks good on that gray background. The creation of search icon is awesomely easy- just make a circle with a hole and the rectangle under it, now rotate everything by 45 degrees and voila.

Step 17 - add-ons

Below the title I've added small separator and comments counter. All is hand-drowned as before (except the digit 3 of course).

2 comments on “Complete Guide to Creating a Blog Website Layout”

android development in chennai says:

September 30, 2013 at 1:37 am

awesome post!
thanks for sharing..

Carl says:

May 15, 2013 at 2:23 am

Dzięki za tutka. Muszę przyznać że fajnie wygląda ale przy 8 latach doświadczenia wszystko można zrobić :)

BTW:

Czemu mnie nie dziwi że w komentarzach pojawia się flame ? ;d