Complete Guide to Creating a Blog Website Layout

Complete Guide to Creating a Blog Website Layout
step-011j[5]

Step 12 - RSS ribbon

Alright, here we can leave the header for now. Later on we will just add the search form to it. But let's focus on the ribbon for now. Web design is all about details; as I always repeat: big house is build of small bricks. Make orange rectangle like one below and add a bit of noise to it (I actually used some noisy texture and apply it in blending options (overlay, 14% opacity) so it will affect all clipping layers; decide what effect do you want to get).
step-012[5]
Follow the instructions to make a shadow underneath the shape.
step-012b[5]
Add the shadows of paper so it looks like cut. It is easier than you think. You can make them stronger by repeating this step.
step-012c[5]
I've also added some really slight visible shadows with soft brush using the same technique of cutting.
step-012d[5]
Now all the inner elements of ribbon we will add as a clipping layer masks. Add few shadows (with gradient or soft brush) on both sides of shape. Set one with overlay blending mode so the colors will look a bit burned.
step-012e[5]
Now with some light color like #ffae01 add a bit of highlight to the center of ribbon (radial gradient would be the fastest way to do that) so it will get a 3D look.
step-012f[5]
Add the text and RSS icon (text color: #232323), change their blending mode's to multiply. I have found my icon in mono icons set (see resources).
step-012g[5]
Right click on icon and choose Blending options, then apply settings below:
step-012h[5]
step-012i[5]
step-012j[5]
After that right click on the layer in layer's window and choose Copy Layer Styles, then right click on the text layer and choose Paste Layer Style so you immediately copy your layers settings to another layer.
step-012k[5]
At last we will add some stitches. We could make it with custom brush, but it is nonsense here for it is pretty small shape. So we will make it manually. Pick this color: #6e0504. We are going to make a small base stitch that will be copied later. With line tool make a line with weight of 1px that is about 50px long. Zoom in to about 800% so the work will be easier. Right click on a line and choose Rasterize layer so we will be able to make raster modifications. Then make a 2px wide selection with marquee tool and hit DELETE, then move the selection right (5-6px) and again hit DELETE, repeat this few times until you will get the following:
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.

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13

Download Free Presets
Sponsored

Download Lightroom presets and LUTs, absolutely free. Use the presets to add creativity and style to your photos.

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.

cross