Complete Guide to Creating a Blog Website Layout

Complete Guide to Creating a Blog Website Layout
Complete Guide to Creating a Blog Website Layout
step-012l[5]
step-012m[5]
step-012n[5]

Now change this layer's blending mode to Luminosity and lower down the opacity to about 30%. Additionally you can make a 3px high selection above the stitches and fill it with white gradient, then change this newly created gradient's layer to 20-30% in opacity and blending mode to Overlay.

step-012o[5]
step-012p[5]

Now copy both layer's and place them one by another. See the result:

step-012q[5]

The same way I made those small ribbons on left and right side of layout, I just cut their shapes a bit and added different shadow. And this time I also added my sketches to the design.

step-012r[5]

Step 13 - footer

Let's head to make some footer, it's pretty easy step. As I said I've added architectural sketch previously.

step-013[5]

We will make three separate columns here. Firstly let's distribute the column titles. Also add to them some white shadow as a layer style- we will reproduce it with CSS styles. Color of font is #757471. Previously I've made some calculations, but here in a layout (which is actually a sketch) we don't have to be perfect (as far as we are doing design for ourselves). All the mathematic will be in CSS later.

step-013b[5]

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.

step-013c[5]

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.

step-014[5]

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

step-014b[5]

Then move it to the upper border.

step-014c[5]

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-014d[5]
step-014e[5]
step-014f[5]
step-014g[5]

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.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

cross