Make skin look perfect in one-click with these AI-powered Photoshop actions.
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.
2 comments on “Complete Guide to Creating a Blog Website Layout”
awesome post!
thanks for sharing..
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