Complete Guide to Creating a Blog Website Layout

Complete Guide to Creating a Blog Website Layout
step-020d[5]
Additionally I will highlight: this is the way that we will cut every single image for our design, the process is to select (with fixed values, with guides, or just freely selected) element/area, copy or copy merged and then paste to the new document. If eventually it will be produced other way- I will say that. Hide all the layers on header that are not needed to ours background, which are: logo, about/navigation and search form. Then we know that ours header is 1600x340, do the fixed selection (or use your guide to help you select that area), copy merged, new document and save it as a top.jpg.
step-020e[5]
Add this to your html code (in body tag):

And update your CSS, as you can see in blank CSS there are commented areas, use them so you will not get confused when you will have a lot of id names and classes.

Test it. If you have big enough screen (or can make smaller view in your browser) then you will see that my header doesn't really fit
step-020f[5]
There are two options now to fix it. We can select pretty wide range from left side (which fits perfectly to the background), copy it, flip horizontally, move to the right side and with soft brush make it blend or, we can just with eraser tool (soft brush) make a deletion in that area so it will blend as well. Just consider that PNG could be bigger in size for it has 4 channels while jpg just 3. I did it in a first way.
step-020g[5]
And this is how it looks for now
step-020h[5]

Step 21 - positioning header elements

As far as I remember I used Overlay'ing in my logo thus I can't move it to the new document for it will Overlay transparency, not my background. The only way to achieve given effect is to copy exactly the area of logo (CTRL+SHIFT+Click on thumbnails if you have more than one layer), copy merged and then place it in html exactly where it was in Photoshop. It's not hard since we have Ruler tool.
step-021[5]
You should get the following image, save it as a logo.PNG
step-021b[5]
Update your html, place it inside div with id header

And place this to your CSS:

I used Ruler tool to measure the size from top of document and from left guide.
step-021c[5]
Actually I'm not perfect for I was measuring from a wrong point, but I'm pretty close and can just adjust mine values a bit to make it fit. For 69/78 seems to be perfect. Now we will place a search form. Duplicate the whole group to the new document, shadows were set to Normal blending mode se there is no problem.
step-021d[5]
Hide search icon and sample text and again: select, copy merged, new document, save as search.PNG.
step-021e[5]
Then make only icon visible and save it the same way as searchicon.PNG. Then let's go to the measurement and we will be able to craft some code.
step-021f[5]
Alright then, add this to your html:

And this to your CSS:

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