Complete Guide to Creating a Blog Website Layout

Add new horizontal guide and move it (with move tool) so it will be on top line of text (it should stick up when it will be close).

Then, as you picked rectangular marquee tool and set up you fixed size just click on the crosscut of guides so you will get the perfectly aligned selection.

Fill it with some gray color (on new layer). Then duplicate this layer. Go to Edit > Transform > Scale and in width and height type 210px (yes, we don't have to type these values in percent), our anchor point is in center of transformation by default, so the copy layer will be centered after transformation as well.

CTRL+Click on our copy so you will get a selection. Then open up any image (just for test) and select it and copy. Back to our document and go to Edit > Paste Into. See? We just pasted an image within a mask of our shape.

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

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

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.

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

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.

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

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

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.

Here is finished entry.

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.

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.

Now make some test to see if it is seamless. Edit your CSS and update your body element with

body {background: url(graf/bgtop.jpg) top left repeat-x}

preview your html in browser:

As you can see it's not really perfect. But we will do old (and pretty cheap, but actually working) trick to make in seamless. Duplicate your cut layer (we are working on lots of files so don't get confused) and go to Edit > Transform > Flip horizontal. Then use Eraser tool with soft brush on one edge of copied layer and save this file (actually overwrite) as bgtop.jpg again. You won't see a big difference here, but refresh your browser and check by yourself that it looks better. It's not perfect for we should make it wider and add more random lights and noises, but it eventually fit our expectations and also surely will blend with header image so we wouldn't make transparent PNG (which would be heavy for sure considering alpha opacity) but lightweight jpg. The width of 40 pixels is a minimum to make a noise repetition invisible. Occasionally 30 pixels would work, but 40px is a safe value here.

2 comments on “Complete Guide to Creating a Blog Website Layout”

android development in chennai says:

September 30, 2013 at 1:37 am

awesome post!
thanks for sharing..

Carl says:

May 15, 2013 at 2:23 am

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