Complete Guide to Creating a Blog Website Layout

Create a great website design in Photoshop! This tutorial will show you tips and tricks for creating your own blog layout. In addition to basic website template designing, you’ll learn some basics about perspective drawing, design theory, and website slicing. A PSD and sliced HTML template is included.

Preview of Final Results

---

Download the PSD and HTML template

Strong Website Template.zip | 23.34 MB
Download 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

I'm planning to use some hand-drawn elements on my design. It's kind of architectural drawings where perspective is pretty important aspect. So what perspective really is? It gives the flat image 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, let's try to imagine a wall. Flat wall like this one. Notice the two green, parallel lines:

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.

And now it looks much better, right? Point your view on the lines. They aren't parallel now, but theoretically 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 other examples of parallel lines that actually aren't parallel from OURS point of view.

---

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.

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 that determines our point of view.

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

Now we can rotate our imaginary eyes in one axis so we will get two-point perspective. But still all vertical lines are parallel. The horizon line determines the level of our eyes. Don't fully connect the horizon line with a real horizon. We can look at the sky or even be in outer space and look on some planet. So the horizon line isn't perceptively determined, but our eyes are pointed in some direction. Ok, let's take a look at two-point perspective:

Here every object have it's joint points. But it is not said that there's only two joint points on the scene. Every object makes two parallel lines and their joint point position depend on it's rotation in relation to other objects. For now I suppose you will know and understand how the three-point perspective stands.

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 truly subject for advanced painters. Let's stick to the first two we learned about.

---

Step 3 - Sketching

I'm kind of old-school guy and before I will do anything in Photoshop I always try to make some sketches on paper. Try for yourself even if you are not pro drawers. Actually it doesn't matter- you just want to make a plan. It's like an escape from prison. Sorry for example, but if something had 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. It's not about details- we will take care of them in design process. It's about an idea. By the way- I'm not a big fan of grid systems. They came and now most of web layouts look the same. For me designing is not about placing boxes around that sticks to the lines. It's about composition, user experience when he see the website first time, usability and (the aspect killed by grid systems) originality. I'm not saying they are bad, they're just overused. So, next time when you will try to design some piece of web layout- craft a sketch.

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

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 (1024x768) / avoid horizontal scrollbars when they are unnecessary
• Consider the good contrast between colors of fonts and background
• Make user-friendly designs, where visitor don't 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 stuff that distract visitor)
• Stick to the standards (more or less, but try to- your design will be more intuitional, for example 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 document

First of all we have to think about sizes. It is important to place guides easy way without a lot of math stuff. We will start with 980px wfide document to make it fit on 1024px screens. We will also consider borders of design- in this case I took 20px each side. At last leave 20px for text margins 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. The screens are made of pixels and this is the only measurement. It is the other case if you would like 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 like 3000px. 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 in 100% (which is equal to 900px in this case).

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

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 the document size with Image > Canvas Size by 20px (so it will be 10px each side) for center guides; 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:

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

---

Step 6 - First pixels

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

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

Now we will gray it up a bit. Firstly we need to desaturate it completely for we don't want any color. Just go to the Image > Adjustment > Desaturation. Later on lower the opacity of that layer to about 20%.

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 and unprofessional. Well, we will choose the fastest path for now. Find some color that is far from center, like here:

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

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 guides so later I will just move them using move tool. Don't care that our paper texture didn't covered the whole document. On top we will have a dark header that will cover the background, so as you can see it doesn't 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:

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

---

Step 7 - header

We will start designing from single-blog-post page. So our header shouldn't be too large. I've putted my guide 340px horizontally from top- you can do the same as well. I've made a new group for layers and 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, but really, just a bit. Make it uniform and don't go higher than 1%.

Colors on header and below are really differ, but for better contrast we can add 1px line below header 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).

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

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 layers. I won't quote this every time we need a new layer so just have it in mind that more layers you have- the bigger flexibility you gain. So before we will go further just repeat few times in your head: "new layer, new layer...". Alright, CTRL+Click on the header shape's thumbnail in layer's window so you will get the selection (The reason to make it is just saving memory from unneeded data). Then press D so your colors will switch to black and white.

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

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

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 near the center of image.

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

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

Here's my final result. I player with opacity (10-20%) and color balance a bit. I've made it really soft.

Also I've 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 (low opacity, like 20-30% and different sizes) doodle around on the header.

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.

Choose the brush tool and in active brush set you can find your newly created brush- select it.

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

Try to get something like this

Then CTRL+Click on the layer's 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 on your keyboard so you should end up with something like this.

And here is how it looks on the header:

I've 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 fill it with gradient (color - transparency). I used #876887.

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 layer's blending mode to Color dodge or Screen.

Now pick the gradient tool (same color and same gradient settings as above), but this time instead of linear, select radial gradient. Make a gradient as arrow below shows and change its blending mode to Vivid Light.

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. Then change this layer's 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- it's just not round. Then make this layer 65% opacity and change its blending mode to Overlay. Thanks to this small details we will add some randomness to the lights on the header so we will hide the simplicity of gradients.

---

Step 9 - Stripes&Circles

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

I shouldn't say that on this level, but above all I will: remember about new layers. Every stripe on separate layer. Alright, fill the selection with white color and change it's blending mode to Overlay and opacity to 10%.

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.

Color #191813, Multiply, 16%.

Color white, Overlay, 100%.

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

Color white, Overlay, 5%.

Color #7f7f7f, Luminosity, 4%.

Color #191813, Multiply, 7%.

Color white, Overlay, 22%.

The perceptive one can see that I just flip horizontally previously made stripes and lower down their opacity, but actually to get better effect it is good to create every stripe separately. Alright then, let's 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 blending mode set to Overlay.

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 options where you will add 1px inside stroke with color #ffc4ea. Here how it should looks like.

---

---

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 doesn't affect the whole document- just header. Click the semi-black icon in bottom part of layer's window (so you will create adjustment layer) and choose color balance.

Then choose the settings as below:

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

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

I'm giving you hard-typed values for color corrections. You can of course (and it is even better) play with your own settings. Thanks to this you will learn how they work. Here is the end of layers that are clipped to the header.

---

Step 11 - Final header touch

Find our base shape layer (that really, really big white rectangle) and duplicate it, then move this layer above all the layer in header (don't clip it as a clipping mask).

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

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

Grab the Type tool and with Paranoid font (see resources) type your title. Instead of it you can place your logo here. I've added few effects to my title, but actually everything bases on two layers (first: white text, opacity 13%, normal; second: white text, opacity 100%, overlay). See the PSD file for reference.
Pick the color #170b15 and create a rectangle shape between selected guides. Height doesn't matter for we can easily modify it with Edit > Transform > Scale. Then lower down opacity to 40%.

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

---

Step 12 - RSS ribbon

Alright, here we can leave the header for now. Later on we will just add the search form to it. But let's focus on the ribbon for now. Web design is all about details; as I always repeat: big house 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 it will affect all clipping layers; decide what effect do you want to get).

Follow the instructions to make a shadow underneath the shape.

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

I've also added some really slight visible shadows with soft brush using the same technique of cutting.

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 the colors will look a bit burned.

Now with some light color like #ffae01 add a bit of highlight to the center of ribbon (radial gradient 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 mode's to multiply. I have found my icon in mono icons set (see resources).

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

After that right click on the layer in layer's window and choose Copy Layer Styles, then right click on the text layer and choose Paste Layer Style so you immediately copy your layers settings to another layer.

At last we will add some stitches. We could make it with custom brush, but it is nonsense here for it is pretty small shape. So we will make it manually. Pick this color: #6e0504. We are going to make a small base stitch that will be copied later. With line tool make a line with weight of 1px that is about 50px long. Zoom in to about 800% so the work will be easier. Right click on a line and choose Rasterize layer so we will be able to make raster modifications. Then make a 2px wide selection with marquee tool and hit DELETE, then move the selection right (5-6px) and again hit DELETE, repeat this few times until you will get the following:

Now change this layer's blending mode to Luminosity and lower down the opacity to about 30%. Additionally you can make a 3px high selection above the stitches and fill it with white gradient, then change this newly created gradient's layer to 20-30% in opacity and blending mode to Overlay.

Now copy both layer's 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.

Step 13 - footer

Let's head to make some footer, it's pretty easy step. As I said I've added architectural sketch previously.

We will make three separate columns here. Firstly let's distribute the column titles. Also add to them some white shadow as a layer style- we will reproduce it with CSS styles. Color of font is #757471. Previously I've made some calculations, but here in a layout (which is actually a sketch) we don't have to be perfect (as far as we are doing design for ourselves). All the mathematic 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 think I don't have to show you how to type text. You can add guides to help you arrange everything straight.

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

---

Step 14 - funky border

Well, this part is also pretty easy. We will do only 6 layers here. Pick brush tool with white color, 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.

Then move it to the upper border.

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.

---

Step 15 - blog post / sidebar

With type tool add the blog post title, meta information's and content. Remember to leave some space for comments counter. Also follow the tips on the image (red color). I used advent pro and Arial fonts.

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/

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

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:

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:

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.

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

---

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.

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.

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.

---

Step 17 - add-ons

Below the title I've added small separator and comments counter. All is hand-drowned as before (except the digit 3 of course).

On the bottom I made a shadow of the base shape. We won't do it as we did before, I will show you more advanced and clean technique. I will make an separate example on other document so it will be clear what we are doing. Start with a very dark rectangle. Make a shape but don't rasterize it for now. Grab line tool and make 3 vertical lines: one on the beginning of shape, one somewhere in the middle and one on the end (red color).

Select all three lines in layer's window (with CTRL or SHIFT), and then pick Move tool and choose distribute horizontal centers option

Notice what happened or you just placed your line too perfectly? Well, the middle line is exactly in the center (between two lines). Now select the shape by clicking on its vector mask thumbnail

It's hard to see but the shape should be outlined for now. Pick the Add Anchor Point Tool from your tools palette (it's under the Pen Tool) and make a point on shape exactly where our red line is. You can zoom in for better accuracy.

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 will get two steering lines, then just place them vertically and horizontally, SHIFT would be helpful here):

And you should end up with the following shape:

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

CTRL+Click on this gradient's thumbnail so you will get its selection, now you can hide or delete this layer; select shadow's layer in layers window (while you still have an active selection) and hit DELETE. you should end up with the following effect.

You can also use Blur tool a little in the center of shadow (more reddish color- more blur):

You can eventually lower down shadow's opacity a bit as I did above and it''s done.

Step 18 - blog/ main page

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

See how clearly my layers window looks. Alright then, we will start now from pagination mock-up. I've already created a group for it. Below is finished pagination. That was a minute of creating. Just type the text and make some background for active page (1 in this example) with the same technique as we did before, you can additionally see the process of making the separator from the content.

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.

I will use few layers from single blog post to make a post preview.

Now we will make some post thumbnail's container. To make an exact size of some element, we can count everything and do it with guides, or we can make a new document with given dimension, 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 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.

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.

Add this to your html code (in body tag):

<div id="wrap_header"><div id="header"></div></div>

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.

/*----- HEADER -----*/ #wrap_header{ width:100%; margin:0 auto; height:340px; background: url(graf/top.jpg) top center no-repeat; } #header { width:980px;height:340px; margin:0 auto;position:relative; }

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

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.

And this is how it looks for now

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.

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

Update your html, place it inside div with id header

<a href="/index.html"><img src="/graf/logo.PNG" alt="Logo" class="logo" /></a>

And place this to your CSS:

#header .logo { position: absolute;left:80px;top:70px;display:block; }

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

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.

Hide search icon and sample text and again: select, copy merged, new document, save as search.PNG.

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.

Alright then, add this to your html:

<form action="#" id="searchform" method="get"><fieldset><input type="text" id="searchinput" name="s" value="What the person is looking for" onblur="if(this.value.length == 0) this.value='What the person is looking for';" onclick="if(this.value == 'What the person is looking for') this.value='';" /><input type="submit" class="searchbutton" value="search" /></fieldset></form>

And this to your CSS:

Now we only need a background under ours navigation. It's big semi-transparent rectangle, but for a background we will cut out just a small piece of it. Once again, copy this layer to a new document and select just small rectangle (even 1 by 1 pixels could be). Then save it as a nav.PNG. I've made it bigger for you to see.

The whole div should be 940 pixels in width following our design. We can make fixed height but if we will want to change the text we will also have to change that div. Here's html for our navigation:

And complete CSS for that piece of code:

And we're done with header.

---

Step 22 - a bit of JavaScript / contact form

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

write something to me right <a href="/" class="rockandroll">here.</a>

As you can see we just added a class to achieve onlick action. Then in the header section below jquery implementation add this piece of JavaScript code:

%MINIFYHTML0bb1e5b249c0eceb07d2c766ffb0260814%

For those who don't know what it means I am just describing: When the document is ready hide a div with id contactform and if someone clicks link with class rockandroll then slide contactform div. In the brackets is speed of sliding. Here's html, add this and we can head to tests:

<div id="contactform"><div id="contact"><p style="background:red;">This is the text<br />that will be altered<br />with our contact form<br />but we will do that later and this is<br />just for testing.</p></div></div>

We will craft contact form now, that was just check if this work. It actually does. the same way we can make 'about me' box but I will go easy way and will just send visitor to the footer. I have prepared some simple background on the side. Check by yourselves how everything looks in source files. I have included there mock-up of contact form (it is not working and don't sends any e-mails).

---

Step 23 - the content

I have changed my mind and disabled that big white layer which was our base. Think it looks better, but you can cut it te way you want with or without this layer. If you would like to use my finished template with white background then it's a matter of one image to change.

Alright, firstly we need a paper background. Hide unneeded layers. Cut out a big rectangle and do the same mirror trick as we made with very first header background. Name it bg2.jpg. Now update your css 'html' declaration, all should looks like this:

Hide all unneded layers again and select a big rectangle from the shape (and borders) that have been left. Save the copy as a new document and name it content.png.

Then add html and css as follow:

<div id="wrap_content"><div id="content"></div></div>

Seems to look great. From now on you should know how to cut out needed images from psd so you could later use them in html. Try to move on by yourself in cutting before you will check my sources. They could be a bit messy, but I hope you'll fully understand everything with a change and try method. Remember, html won't eat you. If you will mess something up you always have CTRL+Z and back-ups in your altirery.

---

---

Final Results