Complete Guide to Creating a Blog Website Layout

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.

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

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 13 – footer

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

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.

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.

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