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-015[5]

Below the content I added separator, the comments title with counter and designed some simple comment view. This part I'm leaving to you for it is all about distributing images and text with basic background. However we will code my example later in html/CSS/

step-015b[5]

On the very bottom is the adding comment form. All elements there are hand-drawn.

step-015c[5]

Creation of them is as simple as the border we have made before. Just use some round brush with dark color, make a shape or line and then scale it down. For example look on the button:

step-015d[5]

I suppose this part won't make you problems as you already know the technique. Try to reproduce all of the elements as I did. You can use the image or PSD as a reference. Then make a sidebar like below:

step-015e[5]

Notice the elements hovered with arrow. Yes- they were created big and then scaled down. As you can see I've simulated the CSS :hover effect as well.

step-015f[5]

It will looks better if for every sidebar title you will create different shape

step-015g[5]

Step 16 - search form

Pick some light color like #e4e2e4. Then choose Rounded Rectangle Tool and set some small radius, like 3-4 pixels. Make a shape on header, stick it to the guide, then lower it's opacity to about 85%. Place it on the level of your logo.

step-016[5]

Then create a shadow as we made for a RSS ribbon. Here's little tricky. You should get rid of shadow that is underneath the shape for it is transparent. To do that simply CTRL+Click on main shape layer (while you having shadow's layer selected [blue background]) and you will have a selection, then hit DELETE and there should be nothing under the shape.

step-016b[5]

Then add the alter text and search icon. The color of text is #666666. It is important to choose your colors wisely and to plan them good, so later in CSS we will don't have to experiment with styles. You can copy the layer styles to the search icon from the RSS icon; just change them a bit so they will looks good on that gray background. The creation of search icon is awesomely easy- just make a circle with a hole and the rectangle under it, now rotate everything by 45 degrees and voila.

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

90% Off Cyberpunk Preset Bundle
Sponsored

Make your artwork look like they're from an alternate universe. These Cyberpunk presets work with Photoshop (via the Camera Raw filter) and Lightroom. Download all 788 presets for 90% off.

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