complete guide to creating a blog website layout

8/11/2019 Complete Guide to Creating a Blog Website Layout

1/130

Complete Guide to Creating a Blog Website Layout

by Maciej Kwas on November 10, 2011Home Photoshop Tutorials Layouts

Create a great website design in Photoshop! This tutorial will show you tips and tricks forcreating your own blog layout. In addition to basic website te mplate designing, youll learn some basics about perspective drawing, design theory, and website slicing. A PSD and sliced HTMLtemplate is included.

Preview of Final Results
http://www.photoshoptutorials.ws/author/maciej-kwas/http://www.photoshoptutorials.ws/author/maciej-kwas/http://www.photoshoptutorials.ws/author/maciej-kwas/http://www.photoshoptutorials.ws/http://www.photoshoptutorials.ws/category/photoshop-tutorials/http://www.photoshoptutorials.ws/category/photoshop-tutorials/http://www.photoshoptutorials.ws/category/photoshop-tutorials/layouts/http://www.photoshoptutorials.ws/category/photoshop-tutorials/layouts/http://www.photoshoptutorials.ws/category/photoshop-tutorials/layouts/http://www.photoshoptutorials.ws/category/photoshop-tutorials/layouts/http://www.photoshoptutorials.ws/category/photoshop-tutorials/http://www.photoshoptutorials.ws/http://www.photoshoptutorials.ws/author/maciej-kwas/


2/130


3/130

Download the PSD and HTML template

Strong Website Template.zip | 23.34 MBDownload from Website

Complete Guide to Creating a Blog Website Layout

Details

Program: Adobe Photoshop CS4 Difficulty: Hard Completion Time: 4 hours

Resources

paper texture batboy advent pro font index-graphics paranoid font Loki design

mono icons tutorial9 social icons hand drowned The-Force blank html template

Step 1 Before we start/Perspective explained

Im planning to use some hand -drawn elements on my design. Its kind of architectural drawingswhere perspective is pretty important aspect. So what perspective really is? It gives the flatimage an illusion of third dimension. Makes graphic dynamic. Learning the basics of perspective

will give you a great starter to manage a depth of field. Firstly, lets try to imagine a wall. Flatwall like this one. Notice the two green, parallel lines:
http://photoshoptutorials.ws/downloads/psd/Strona%20Website%20Template.ziphttp://photoshoptutorials.ws/downloads/psd/Strona%20Website%20Template.ziphttp://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_3.jpghttp://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_3.jpghttp://inde-graphics.deviantart.com/art/advent-font-57338302?http://inde-graphics.deviantart.com/art/advent-font-57338302?http://www.dafont.com/paranoid.fonthttp://www.dafont.com/paranoid.fonthttp://www.tutorial9.net/downloads/108-mono-icons-huge-set-of-minimal-icons/http://www.tutorial9.net/downloads/108-mono-icons-huge-set-of-minimal-icons/http://theg-force.deviantart.com/art/Social-Icons-hand-drawned-109467069http://theg-force.deviantart.com/art/Social-Icons-hand-drawned-109467069http://photoshoptutorials.ws/images/stories/ddb09352d992_2F5/blank.ziphttp://photoshoptutorials.ws/images/stories/ddb09352d992_2F5/blank.ziphttp://photoshoptutorials.ws/images/stories/ddb09352d992_2F5/blank.ziphttp://theg-force.deviantart.com/art/Social-Icons-hand-drawned-109467069http://www.tutorial9.net/downloads/108-mono-icons-huge-set-of-minimal-icons/http://www.dafont.com/paranoid.fonthttp://inde-graphics.deviantart.com/art/advent-font-57338302?http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_3.jpghttp://photoshoptutorials.ws/downloads/psd/Strona%20Website%20Template.zip


4/130

Lines are parallel- I repeat for this is really important. Now we will try to duplicate a wall and try

to make a corner.

What? Why? It is still flat. Well, I think we have to make some additional transformation.


5/130

And now it looks much better, right? Point your view on the lines. They arent parallel now, buttheoretically in one of dimensions of this image they are. They are parallel AND got their joint

point EXIST in the infinity. It smells quite complicated at first, but just think about it for a while.The underestimation of this subject is really important. To help you I will present some otherexamples of parallel lines that actually arent parallel from OURS point of view.


6/130


7/130

Step 2 A bit of theory

I hope that you have fully understood that lines system. Actually, there are two types of perspective. Linear where the objects are smaller relatively to distance and one based on depth perception where objects that are really close are blurred and those far, far away are hazy.


8/130

The connection of them is essential. Ok, now we will break a perspective into single parameters.First important thing, a horizon line. It is not always visible on the viewport but it should always

be present in the scene to make a proper perspective. The horizon line is first thing thatdetermines our point of view.


9/130

The second parameter is a joint point. It is my personal naming system so it could differ fromwhat you have red in some drawing books or so. Anyway , its not important, understanding the perspective plays here a main role. So if we will take a joint point under consideration Thevery basic and easiest one is one-point perspective. And yes- it has only one point that is placedon the horizon line. Just imagine that you are in a huge cube and you are facing directly one ofthe inner walls. Vertical lines are parallel.


10/130


11/130

Now we can rotate our imaginary eyes in one axis so we will get two-point perspective. But stillall vertical lines are parallel. The horizon line determines the level of our eyes. Dont fullyconnect the horizon line with a real horizon. We can look at the sky or even be in outer space andlook on some planet. So the horizon line isnt perceptively determined, but our eyes are pointedin some direction. Ok, lets take a look at two -point perspective:


12/130

Here every object have its joint points. But it is not said that theres only two joint points on thescene. Every object makes two parallel lines and their joint point position depend on its rotationin relation to other objects. For now I suppose you will know and understand how the three-point

perspective stands.


13/130

There are more complicated structures like five-point (so called hemispherical) or even six-point perspective (when we draw a 360 degree view) which is super hard to achieve and this is trulysubject for advanced painters. Lets stick to the first two we learned about.

Step 3 Sketching

Im kind of old -school guy and before I will do anything in Photoshop I always try to make somesketches on paper. Try for yourself even if you are not pro drawers. Actually it doesnt matter -you just want to make a plan. It s like an escape from prison. Sorry for example, but if somethinghad to be perfect, you had to have a solid plan where you considered a lot of options and choose

best. Fly thru the colors in your head. Imagine how things could look like. Its not about d etails-we will take care of them in design process. Its about an idea. By the way - Im not a big fan ofgrid systems. They came and now most of web layouts look the same. For me designing is notabout placing boxes around that sticks to the lines. Its a bout composition, user experience when

he see the website first time, usability and (the aspect killed by grid systems) originality. Im notsaying they are bad, theyre just overused. So, next time when you will try to design some pieceof web layout- craft a sketch.


14/130

Also, as I said, we will need some architectural sketches. If you dont feel strong in that aspect oryou just dont have a scanner - find some sketches around the internet. Surely theres tons ofthem. Or, you can use your knowledge about the perspective and try to craft your very ownsketch. It is a lot of fun, believe me, and the final results can be pretty impressive. You can find alot of detailed movies about step-by-step architectural sketches around the internet. Just followone or two and then draw something by your own. Oh, start from simple shapes as I describedabove. Make some spheres and cubes. Combine them later into more complex objects. Have funhere.


15/130

Step 4 A bit of design theory

Before you will draw a very first pixel of your design you have to remember about few things:

Your design should be elastic in size (in case of content changes) Your design should be adapted to 15 screens (1024768) / avoid horizontal scrollbars

when they are unnecessary Consider the good contrast between colors of fonts and background Make user- friendly designs, where visitor dont have to spend five minutes to find a

search form Avoid using aggressive colors, visitor should feel comfortable while reading content List all elements that must appear in design and arrange them Give your best for every of your designs Have in mind that after design process you (or someone else) will probably have to cut

your layout Architectural tip design comes from usability (avoid tons of messy unnecessary stuffthat distract visitor)

Stick to the standards (more or less, but try to- your design will be more intuitional, forexample logo on the left top position)

Create some kind of route for your visitor to make him feel like on tour in museum; the path should be clear

What comes with above- make a clear navigation Think about the aims of website Think about advertising on website but do not make it too excessive Consider the type of content on webpage

Minimize the number of type-faces Think about future html elements like h1, p, a Think about future CSS styles and JavaScript effects Avoid splash screen pages. They could be beautiful but in most of cases they are useless Feel like an inventor Think about the viewer

These are just my personal opinions, but often exist as a good manners of web design.

Step 5 Creating a new documentFirst of all we have to think about sizes. It is important to place guides easy way without a lot ofmath stuff. We will start with 980px wfide document to make it fit on 1024px screens. We willalso consider borders of design- in this case I took 20px each side. At last leave 20px for textmargins each side. So, go to File>New and create a new document as shown below. Remember:It does not matter what you will type into resolution input. You can type 500 as well as 0,02. Thescreens are made of pixels and this is the only measurement. It is the other case if you would like


16/130

to make your website printable, but in most of cases it is unnecessary to make printable designs-instead it is common to make CSS styles specially for print. The height should be something like3000px. It is fair enough to make a design preview. Later on we can easily modify this value.

Go to the View > New guide twice time and add one guide vertically in position 0px, and one in100% (which is equal to 900px in this case).


17/130

Those were a guides for text margins. Now we will add them to document size and also add theinner guides for border. Head to the Image > Canvas Size and type the following:


18/130

And again add guides the same way as above: on 0px and 100%. Our design is now 940px wide.We will also add the center guides for border and outer guides as well. So now extend thedocument size with Image > Canvas Size by 20px (so it will be 10px each side) for centerguides; add them the same way:0px and 100% and then again extend the size by 20px and again

add same borders so you will get something like this:


19/130

At last go once again to Image > Canvas size and extend our working area to something like1600px, so we could make big background:


20/130

Step 6 First pixels

There arent a lot of layers in our design (yes, theres just one) yet. But we can end up withsomething like 300 layers or so. How to embrace them all? Just Grouping. It is great habit togroup layers. It is easier than you think, just select layer you want to group by clicking on themin layers window with CTRL or SHIFT (to select multiple layers) and then hit CTRL+G. Youcan later on change groups name by double clicking on it. You can also create empty groupswithout layers, just check the bottom icons in layers window.


21/130

Ok, so for now create group and name it bg, we will place all the layers there that are related toour background. First of all, lets fill our background with some color, let it be some light graylike #c9c7c2. All right, now place our paper texture (find in resources on beginning of tutorial)into the document. Its pretty sm all, but we will lower its opacity a lot so we can scale it upwithout any additional effort. Just go to Edit > Transform > Scale and stretch it till our texturewill fit the document size. It will be about 343%.


22/130

Now we will gray it up a bit. Firstly we need to desaturate it completely for we dont want anycolor. Just go to the Image > Adjustment > Desaturation. Later on lower the opacity of that layerto about 20%.


23/130

Now we have to take care about texture boundaries. Our background will repeat only in y axis,so if someone will have a screen width bigger than 1600px it will just look awful andunprofessional. Well, we will choose the fastest path for now. Find some color that is far fromcenter, like here:


24/130

And then add linear gradients of this color (color -> transparency) on each side. It is important toset the opacity to 100% and to start inside the boundaries of document.


25/130

Pick the #efefef color, which is pretty white-alike. Then add another guide in View > Add guide, but this time- horizontal on the distance of 20px. I also added some additional horizontal guidesso later I will just move them using move tool. Dont care that our paper texture didnt coveredthe whole document. On top we will have a dark header that will cover the background, so asyou can see it doesnt matter. Now choose the Rectangle tool and make a big shape from this

corner:

To somewhere here on bottom so our whitey shape will be 960px wide:


26/130

To this moment we should end up with something like that below which is our base for laterdesign:


27/130

Step 7 header

We will start designing from single-blog- post page. So our header shouldnt be too large. Ive putted my guide 340px horizontally from top- you can do the same as well. Ive made a newgroup for layers an d named it top. With rectangle tool make a shape to the top from our guide.The color I used is #12101b. Then add some noise to it with Filter > Noise > Add noise, butreally, just a bit. Make it uniform and dont go higher than 1%.


28/130


29/130

Colors on header and below are really differ, but for better contrast we can add 1px line belowheader shape. Pick Single Row Marquee Tool and select the line just below the shape. Then fill it

with pure white color (Press SHIFT + F5 to open fill window).


30/130

Now all the layers will be in a clipping mask of headers shape layer. To do a clipping maskmove the cursor between layers in layers window. Hold alt, and when cursor will change, left -click. Heres a screen from my oldest tutorial. You will notice an arrow next to the thumbnail oflayer so you will know it is clipped.


31/130

Now I will show you simple space trick that I developed some time ago by mistake, yet I like it pretty much. Oh, remember to create everything on new la yers. I wont quote this every time weneed a new layer so just have it in mind that more layers you have- the bigger flexibility yougain. So before we will go further just repeat few times in your head: new layer, new layer.

Alright, CTRL+Click on the header shapes thumbnail in layers window so you will get theselection (The reason to make it is just saving memory from unneeded data). Then press D soyour colors will switch to black and white.

Now go to Filter > Render > Clouds. I used this filter several times (CTRL+F) until I get theeffect I needed but here I will show just a steps of one random example.


32/130

Go to Select > Color range and choose some bright color from our clouds as a sample color.


33/130

Hit OK and then DELETE on your keyboard so you will get rid of all highlights from clouds.Then just hit CTRL+I to invert the colors.

Then with Eraser tool (soft brush) erase clouds near the boundaries and leave just one cloud nearthe center of image.

Now with the eraser tool (hard brush this time, pretty small) make a holes in brighten parts ofcloud.


34/130

And all you have to do now is just changing the layers blending mode from normal to colordodge. You can also go to Image > Adjust > Color balance and add some blue/cyan to pop up theclouds (which are our simple nebulas now).

Heres my final result. I player with opacity (10 -20%) and color balance a bit. Ive made it reallysoft.


35/130

Also Ive added purple smudges here and there with soft brush. Almost invisible.

Step 8 Flashlights

Firstly I want to make a header more purple. I used this color #523157. With hard brush (lowopacity, like 20-30% and different sizes) doodle around on the header.


36/130

Then go to Filter > Blur > Gaussian Blur and use pretty high radius like 100px so everything will be smooth .

Now create a custom brush (hard brush with 1-5px diameter) like this below and go to Edit >Define brush preset.
http://www.photoshoptutorials.ws/photoshop-tutorials/photo-effects/smooth/http://www.photoshoptutorials.ws/photoshop-tutorials/photo-effects/smooth/http://www.photoshoptutorials.ws/photoshop-tutorials/photo-effects/smooth/http://www.photoshoptutorials.ws/photoshop-tutorials/photo-effects/smooth/


37/130


38/130

Open up the brush panel and use the settings as below. Then paint around the header.


39/130


40/130


41/130

Try to get something like this

Then CTRL+Click on the layers thumbnail, so you will get the selection. Go to the Select >Modify > Contract and contract by 1px. Hit OK, go to Select > Inverse and then hit DELETE onyour keyboard so you should end up with something like this.


42/130

And here is how it looks on the header:


43/130

Ive added two hovering lights on top of the header.

How to create them? Just pick a polygonal lasso tool and make a selection like this below and fillit with gradient (color transparency). I used #876887.


44/130

Hit CTRL+D to deselect. Then go to filter > Blur > Gaussian Blur and pick the radius like 20-

24px to get effect below. Also change layers blending mode to Color dodge or Screen.

Now pick the gradient tool (same color and same gradient settings as above), but this timeinstead of linear, select radial gradient. Make a gradient as arrow below shows and change its

blending mode to Vivid Light.


45/130

Pick soft brush (pretty big diameter, like 200 or 300px, 75% opacity), select some blue color like#1b31a6 and paint on the bottom part of header. T hen change this layers opacity to 30% -40%and blending mode to Pin Light.

Add some lines with semi-soft brush. I actually used my custom brush, but it is mostly the same-its just not round. Then make this layer 65% opacity and change its blending mode to Overlay.


46/130

Thanks to this small details we will add some randomness to the lights on the header so we willhide the simplicity of gradients.

Step 9 Stripes&Circles

There arent a lot of philosophy in here. Firstly, pick the Polygonal lasso tool, hold SHIFT andmake a diagonal line from top to bottom. We are holding SHIFT so the line is inclined with exactangel of 45 degrees. Hold SHIFT until you will create a shape like this:


47/130

I shouldnt say that on this level, but above all I will: remember about new layers. Every stripeon separate la yer. Alright, fill the selection with white color and change its blending mode toOverlay and opacity to 10%.


48/130

For next stripes I will just write down the color, blending mode and opacity. Here it is Gray color(like #7f7f7f), Luminosity, 12%. As you can see this stripe partially covers the one created

before.


49/130

Color #191813, Multiply, 16%.

Color white, Overlay, 100%.


50/130

The whole layout looks like this for now, now we will continue with stripes aimed in the reversedirection.


Color #7f7f7f, Luminosity, 4%.


51/130

Color #191813, Multiply, 7%.



52/130

The perceptive one can see that I just flip horizontally previously made stripes and lower downtheir opacity, but actually to get better effect it is good to create every stripe separately. Alrightthen, lets head to the circles. Pick the Ellipse tool and with SHIFT (so we will get perfect circle)make a shape like this. You can additionally hold ALT so instead of the corner, your shape will

be sized from the center. Use white color and lower down the opacity to 15% with blendingmode set to Overlay.


53/130

Duplicate this layer few times and scale some up, some down. Set opacity to 8% with Normal blending mode. Also set fill to 0%. Then right click on the layer and go to Blending optionswhere you will add 1px inside stroke with color #ffc4ea. Here how it should looks like.


54/130

Step 10 Color corrections

Now we will make some hardcore corrections. We will add a more vivid to the header.Everything is in clipping mask, so it doesnt affect the whole document - just header. Click thesemi- black icon in bottom part of layers window (so you will create adjustment layer) and

choose color balance.

Then choose the settings as below:


55/130

Create a new adjustment layer, but this time instead of color balance choose Exposure and justchange the Gamma to 0,81. Add another Exposure layer, but this time change Exposure to +0,44and Gamma to 0,94.

In the end add another adjustment layer of Brightness/Contrast and apply these settings:


56/130


57/130

Right click on this layer and choose Blending options, then apply these settings:


58/130


59/130


60/130


61/130


62/130

With Rectangle tool make a black shape on the header from upper guide to the top and change itsopacity to 60% and blending mode to soft light.


63/130


64/130

Now with advent pro add some text describing you and plot into it navigational links. Normaltext is Light1 with color #a95570, while links are Bold1 with #e4b127. The whole text has alittle shadow that will be reproduced with CSS text-shadow declaration (1px distance from topand 1px size which will be alternated with text-shadow: #000000 1px 0 1px; but it is content forcoding part).

Step 12 RSS ribbonAlright, here we can leave the header for now. Later on we will just add the search form to it.But lets focus on the ribbon for now. Web design is all about details; as I always repeat: bighouse is build of small bricks. Make orange rectangle like one below and add a bit of noise to it(I actually used some noisy texture and apply it in blending options (overlay, 14% opacity) so itwill affect all clipping layers; decide what effect do you want to get).


65/130


66/130

Add the shadows of paper so it looks like cut. It is easier than you think. You can make themstronger by repeating this step.


67/130

Ive also added some really slight visible shadows with soft brush using the same technique ofcutting.


68/130

Now all the inner elements of ribbon we will add as a clipping layer masks. Add few shadows(with gradient or soft brush) on both sides of shape. Set one with overlay blending mode so thecolors will look a bit burned.

Now with some light color like #ffae01 add a bit of highlight to the center of ribbon (radialgradient would be the fastest way to do that) so it will get a 3D look.

Add the text and RSS icon (text color: #232323), change their blending modes to multiply. Ihave found my icon in mono icons set (see resources).

Right click on icon and choose Blending options, then apply settings below:


69/130


70/130


71/130


72/130


73/130


74/130


75/130

Now copy both layers and place them one by another. See the result:

The same way I made those small ribbons on left and right side of layout, I just cut their shapes a bit and added different shadow. And this time I also added my sketches to the design.


76/130

Step 13 footer

Lets head to make some footer, its pretty easy step. As I said Ive added architectural s ketch previously.


77/130

We will make three separate columns here. Firstly lets distribute the colum n titles. Also add tothem some white shadow as a layer style- we will reproduce it with CSS styles. Color of font is#757471. Previously Ive made some calculations, but here in a layout (which is actually asketch) we dont have to be perfect (as far as we are doing design for ourselves). All themathematic will be in CSS later.

Then leave a bit of space, like 30px, and just type the text you want to appear there. Well, I thinkI dont have to show you how to type text. You can add guides to help you arrange everything

straight.


78/130

We will have a bit of work later in design because of three columns, but here, on design process Ikept it simple.

Step 14 funky border

Well, this part is also pretty easy. We will do only 6 layers here. Pick brush tool with whitecolor, 1px in size and make a doodle as mine below. Notice the beginning and end of doodle.

Then go to Edit > Transform > Scale and make it very, very thin so it will have about 3-4px.


79/130

Then move it to the upper border.


80/130

Repeat this step for all the edges, but on the header use white lines, while on paper texture- black. Here you have some close-ups.


81/130


82/130


83/130


84/130


85/130

Below the content I added separator, the comments title with counter and designed some simplecomment view. This part Im 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/


86/130

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


87/130

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

I suppose this part wont make you problems as you already know the technique. Try toreproduce all of the elements as I did. You can use the image or PSD as a reference. Then make asidebar like below:


88/130


89/130

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


90/130

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 shap e on header, stick it to the guide, then lower its opacity toabout 85%. Place it on the level of your logo.

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


91/130


92/130


93/130


94/130


95/130

Then choose Direct Selection Tool and move this point few pixels down.

And with Convert point tool do something like this below (Click and drag the point so you willget two steering lines, then just place them vertically and horizontally, SHIFT would be helpfulhere):


96/130

And you should end up with the following shape:

I hope you havent deleted red lines Move our shadow under the base shape. Then rasterizeshadow and create a new layer. Pick gradient tool and choose Reflected gradient from gradienttypes. Then on new layer make a gradient like this below, any color, start from red line:


97/130


98/130


99/130

Step 18 blog/ main page

It seems like we have done our design. Now we will prepare layouts for blogs main page andworks show off. Start with the first one. Hide your unnecessary layers (in my case it was just twogroups) so you will have a blank content area.


100/130


101/130

Scale it down, then duplicate this layer and move 1 pixel down.

Now we want to whiten it. The fastest way I know- hit CTRL+U (or go to Image > Adjust >Hue/Saturation) and move Lightness bar max to the white.


102/130


103/130

Now we will make some post thumbnails container. To make an exact size of some element, wecan count everything and do it with guides, or we can make a new document with givendimension, fill it with some color and then move the layer to our document, or (and this is the

best way) we can use rectangular marquee tool and set the size of selection to fixed.

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

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


104/130

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


105/130


106/130

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


107/130

Ive 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 duplicatedorange ribbon, modified it a bit so it wont look like a copy and changed the color.


108/130


109/130


110/130


111/130

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


112/130


113/130


114/130

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


115/130


116/130


117/130


118/130


119/130


120/130

You should get the following image, save it as a logo.PNG

Update your html, place it inside div with id header

And place this to your CSS:

#header .logo { position: absolu

I used Ruler tool to measure the size from top of document and from left guide.


121/130


122/130


123/130

Alright then, add this to your html:


124/130


125/130

Step 22 a bit of JavaScript / contact form

We will make our contact form as a rollover div. Thats why I included jquery in template. Wewill use it so the animation will be a matter of few lines of code. First of all, lets change a linkof contact in navigation, make it like this:

w rite something to me right


126/130


127/130


128/130


129/130


130/130

complete guide to creating a blog website layout

Documents