Complete Guide to Creating a Blog Website Layout

Complete Guide to Creating a Blog Website Layout
Complete Guide to Creating a Blog Website Layout

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:

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

Luminar: AI Photo Editing
Sponsored

Luminar AI lets you turn your ideas into reality with powerful, intelligent AI. Download the photo editor and see how you can completely transform your photos in a few clicks.

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