Sunteți pe pagina 1din 130

Complete Guide to Creating a Blog Website Layout

by Maciej Kwas on November 10, 2011


Home Photoshop Tutorials Layouts
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, youll 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
Im planning to use some hand-drawn elements on my design. Its 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, lets 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 arent 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 arent 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, its 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. Dont 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 isnt perceptively determined, but our eyes are pointed
in some direction. Ok, lets take a look at two-point perspective:

Here every object have its joint points. But it is not said that theres only two joint points on the
scene. Every object makes two parallel lines and their joint point position depend on its 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. 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 some
sketches on paper. Try for yourself even if you are not pro drawers. Actually it doesnt matter-
you just want to make a plan. Its 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. Its not about details-
we will take care of them in design process. Its about an idea. By the way- Im 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. Its about composition, user experience when
he see the website first time, usability and (the aspect killed by grid systems) originality. Im not
saying they are bad, theyre 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 dont feel strong in that aspect or
you just dont have a scanner- find some sketches around the internet. Surely theres 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 (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 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 arent a lot of layers in our design (yes, theres 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 layers window with CTRL or SHIFT (to select multiple layers) and then hit CTRL+G. You
can later on change groups 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, lets 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. Its 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 dont 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. Dont care that our paper texture didnt covered
the whole document. On top we will have a dark header that will cover the background, so as
you 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:

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 shouldnt be too large. Ive
putted my guide 340px horizontally from top- you can do the same as well. Ive 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 dont 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 headers shape layer. To do a clipping mask
move 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 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 wont 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 shapes thumbnail in layers 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 layers 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).

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

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 (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 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 on
your keyboard so you should end up with something like this.

And here is how it looks on the header:

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 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 layers 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 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.
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 arent 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 shouldnt 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 its 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, 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 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 doesnt affect the whole document- just header. Click the
semi-black icon in bottom part of layers 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:

Im 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 (dont 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. Ive 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 doesnt
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 lets 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.

Ive 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 modes 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 layers 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 layers 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 gradients layer to 20-30% in opacity and blending mode to
Overlay.


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.


Step 13 footer
Lets head to make some footer, its pretty easy step. As I said Ive added architectural sketch
previously.

We will make three separate columns here. Firstly lets 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 Ive made some calculations, but here in a layout (which is actually a
sketch) we dont 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 dont 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 informations 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 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/

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 wont 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 Ive 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 its opacity to
about 85%. Place it on the level of your logo.

Then create a shadow as we made for a RSS ribbon. Heres 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 shadows 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 dont 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 Ive 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 wont 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 dont
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 layers 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

Its hard to see but the shape should be outlined for now. Pick the Add Anchor Point Tool from
your tools palette (its 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 havent 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 gradients thumbnail so you will get its selection, now you can hide or
delete this layer; select shadows 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 shadows opacity a bit as I did above and its done.

Step 18 blog/ main page
It seems like we have done our design. Now we will prepare layouts for blogs 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. Ive 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 thumbnails 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 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 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.


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 duplicated
orange ribbon, modified it a bit so it wont 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
Its 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. Lets start from background. Its 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. Lets copy one piece of header that will be in fixed size 40340 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/bgto

preview your html in browser:

As you can see its 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 dont 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 wont see
a big difference here, but refresh your browser and check by yourself that it looks better. Its 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 wouldnt 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 1600340, 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=

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%; m
url(graf/top.jpg) top center no-re

Test it. If you have big enough screen (or can make smaller view in your browser) then you will
see that my header doesnt 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 Overlaying in my logo thus I cant 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. Its 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

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.

Actually Im not perfect for I was measuring from a wrong point, but Im 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 lets go to the
measurement and we will be able to craft some code.

Alright then, add this to your html:
<form
action="#" id="searchform" met
type="text" id="searchinput" nam
for" onblur="if(this.value.length

And this to your CSS:
#header
#searchform { position: absolut
274px;height: 46px;background
no-repeat;border:0px

Now we only need a background under ours navigation. Its 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. Ive 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. Heres html for our
navigation:
<div
id="nav"><h1>I am a Polish des
currently living in Lublin. I study
Technology.<br/> My adventure

And complete CSS for that piece of code:
#header
#nav { position:absolute;top:17
url(graf/nav.PNG) repeat; } #hea
Arial, sans-serif;letter-spacing:

And were done with header.

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. We
will use it so the animation will be a matter of few lines of code. First of all, lets change a link
of contact in navigation, make it like this:
write something to me right <a h

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:
%MINIFYHTMLc16d9b875c35e3

For those who dont 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. Heres html, add this and we can head to
tests:
<div
id="contactform"><div id="cont
style="background:red;">This is
altered<br/>with our contact for

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 dont 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 its 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:
html {font: 11px Arial, Helvetica,

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=

#wrap_content{
width:100%; margin:0 auto; } #
margin:0 auto;position:relative;b
center repeat-y; }


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 youll fully understand everything with a change
and try method. Remember, html wont eat you. If you will mess something up you always have
CTRL+Z and back-ups in your altirery.

Final Results


Download the PSD and HTML template

Read more at http://www.photoshoptutorials.ws/photoshop-tutorials/layouts/complete-guide-to-
creating-a-blog-website-layout/#LJZWIZy40EzfMYcL.99

S-ar putea să vă placă și