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-011h[5]
step-011i[5]

Now with advent pro add some text describing you and plot into it navigational links. Normal text is Light1 with color #a95570, while links are Bold1 with #e4b127. The whole text has a little shadow that will be reproduced with CSS text-shadow declaration (1px distance from top and 1px size which will be alternated with text-shadow: #000000 1px 0 1px; but it is content for coding part).

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:

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

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. Required fields are marked *

cross