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-018k[5]

Add some button (same technique: make big, leave small) for 'continue reading'.

step-018l[5]
step-018m[5]

I've also added the border around the image area.

step-018n[5]

We will highlight new posts with blue ribbon on the edge, just a small touch. I just duplicated orange ribbon, modified it a bit so it won't look like a copy and changed the color.

step-018q[5]

Now just duplicate your set to create better overall view on mock-up.

step-018o[5]

Step 19 - portfolio layout

It's actually last step in design part. This time we will create works showcase. Hide all layers connected to the sidebar, pagination, posts and RSS feed icon so we will have blank content base once again.

step-019[5]

Make a rectangular selection with fixed size (820x300px) and fill it with any color- it will be our base. Add some caption.

step-019b[5]

Copy and move that small ribbon while we were creating an RSS bar, we will use it for some kind of tags.

step-019c[5]

I just merged whole group except shadow. Then create a selection and make an adjustment layer to change the color (could be hue/saturation). I just made few sets and named it with popular (i suppose) shortcuts.

step-019d[5]

Here is finished entry.

step-019e[5]
step-019f[5]

Off we go to the cutting part.


Step 20 - template

To continue this tutorial you should at least have some basics about html and CSS. Before you will start doing anything download my blank template. You will find there all needed folders ([fonts] with web-fonts and [graf] for images), basic html, blank CSS (with reset-CSS built in) and in-html link to jquery JavaScript library. At first we will create a main page blog view. Then single-post view should be a matter of few minutes. Let's start from background. It's not pretty complex, yet can produce troubles for some. Actually there are two repetitive backgrounds: dark, starry on header that will repeat in x axis and light paper that will be centered and repeated in y axis. Let's copy one piece of header that will be in fixed size 40x340 pixels.

step-020[5]

Go to the Edit > Copy Merged and then to File > New (size of the copied element will be filled automatically), then paste our copied shot from clipboard and save it as a bgtop.jpg in a [graf] folder.

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