to Create a Website Layout in Photoshop by FFFreak
Hi, I'm FFFreak and in this Tutorial I'll be demonstrating how to create
your very own website layout using Adobe Photoshop CS Version 8 in five
simple stages. You can probably use a similar or previous version to do
the same job, but all the tools and shortcuts will be from Photoshop Version
For the next stage, coding the layout, please see How to Code your Layout.
Adobe Photoshop CS Version 8 (or something very similar),
A vague idea of what layout you want to create,
A rough colour scheme,
Some experience in Photoshop*.
*Although I'll be explaining as many features and shortcuts as I can,
it'll be easier if you can already use Photoshop.
Designing and coding a layout is a tough job, and difficult to explain
in just one tutorial without knowing the reader's skill level, so I'll
try and start with the basics.
First, make sure you have a fairly recent version of Photoshop open to
get to work? I use Adobe Photoshop CS, but the previous versions should
have the same ability.
Start with a good old blank 800 x 600 canvas, I use the smaller resolution
because not all of my visitors have 1024 x 768 monitors.
I'll usually have made a sketch for the layout already with my ideas on
it. It's then a job of placing all the lines on a new layer.
I use Photoshop's grid (Ctrl + ') to make sure everything's symmetrical,
which is very important, you don't want a wonky layout. :P
So on a new layer I use the line tool with the colour on black to draw
all of the basic outlines. Most layout's have a rectangle banner at the
top, a box the the navigation on the left or right or both, but both requires
more coding, so just stick with one, another box for the content on the
space left or right of your nav. depending on where you put it, and then
something for the footer, the footer doesn't have to be very imaginative,
but avoid just cutting everything off abruptly: finish it cleanly.
Tip: For perfect straight lines every time, hold Shift while you
draw the line.
Advanced Tip: For smooth and curvy lines, use the Pen Tool to plot
the points of the curve and create a path, then use the Convert Point
Tool to click and drag each point to smooth out the path.
Then right click and select stroke path. Note that the stroke will be
done with the Brush Tool, so make sure the brush tool is at 100 opacity
and the desired size.
Tick Stimulate Pressure too, although it's probably not needed.
Then right click again and select Delete path.
You'll then be left with your smooth line.
However, it's not always going to be smooth, it takes a little practice
to get the path as smooth as possible, so give it a few tries first. And
make sure to keep the points of the path quite far apart so that you can
smooth it out a bit more with the Convert Point tool.
So, you'll now have your basic outline for the layout. Now it's time
for colour. A basic idea for the colours should already be decided, but
regardless-- it's the next stage.
You'll probably need a few different shades of the same colour, so create
a new file or layer and just bucket tool your desired colours inside.
Try to choose colours that are quite similar, put too much contrast in
there and the visitor will be blinded, too little and your visitor won't
be able to see where the content starts and where it begins.
Also note the colours of your text, remember that you'll have the same
colours text for the content and the navigation, so don't have a black
nav. and a white content area whatever you do!
You may also want to have your text change colour when you hover over
it, so grab two fairly similar colours for your text and put them to one
side in your colour palette.
But most of all, your colours must work together! Don't choose colours
that clash and hurt your eyes! If you need some help with colours, then
there's a fantastic website that will help you find out what colours will
suit your purpose best and how to use them effectively.
And finally, dark text always looks better on light backgrounds than light
text on dark backgrounds!
Now you have your colours you need to decide where to put them. You might
want to go for a light layout with dark text or a dark layout with light
text and banner.
I prefer dark backgrounds with lighter content areas, a bright banner
and dark text, however this is all up to you.
When you have your colours it's time to block in. Grab the rectangle tool
and start filling in the boxes for your navigation and content, you can
also choose the rounded rectangle tool for smooth corners. Of course,
you may need the line and circle tools, it all depends on your design.
Just remember to keep the very background of your layout and the navigation
and content area, (where you'll be writing text in the coding stage) a
SOLID colour! Start experimenting with gradients and patterns for backgrounds
your first try and you'll get something wrong-- keep it simple and bold.
And stick with solid colour as often as possible.
Tip: Instead of creating a coloured square and adding a border
with the line tool, right click on the box layer and select Blending Options.
Then choose Stroke and pick the size and colour, the box will now have
a perfect border!
After you have all of your chosen colours and boxes down, it's time for
a little text. Put your copyright on the footer, remember the "Alt
+ 0169" Alt code for the © symbol.
Then place quick link text at the top near the banner, for example; Home;
Contact; Forum; Gallery etc..
Or you may want quick links for the different sections of your website,
such as Final Fantasy; Kingdom Hearts; Drakengard; Dragonquest etc...
Tip: When doing text, font and typography means everything. Font
can really make or break your text, for unimportant text that you don't
want to stand out too much, choose basic, default fonts, like Arial,
Verdana or Tahoma, or even the odd pixel font, (these work best at 8 px)
you'll be surprised how effective simple fonts can be.
For text you want to get noticed, pick something nice and swirly, or bold
and disentegrating. But whatever you do, make sure it is easy to read,
the last thing you want is a logo or slogan that no-one can understand!
So in this case, going back to your basic fonts is also good for text
you want to be noticed-- because it's easy to read.
Tip: Text looks pretty plain when it's a solid colour, so right
click on your text layer and choose Blending Options. You can then add
a Stroke, a Colour Gradient and a Drop Shadow to liven it up.
You may also want text somewhere else, like to declare where the content
starts or where it ends, as some layout designer's like to do.
You could also have an area of your layout reserved for an advertisement
of your site's latest feature, or a newsticker, shoutbox etc..
So, you have your basic layout design, the colours, the shapes, the text,
but what's missing? Yep-- the banner!
This I like to save for towards the end, so that I know how big I need
to make it, what colour's I'll need and how I can intergrate it with the
layout. Some layout's have banner's in a regular rectangle box, with perhaps
a border, while others may have cut-out characters leaping out from behind
the frame. Experiment and come up with some new and interesting ideas
that you're happy with: instead of square banners, try circular; instead
of straight try curvy.
Now, the banner is usually very graphical, and will be the icing on the
cake for your layout. You want it to be noticed the most, so it should
be lively, light and bright.
Unfortunately I won't be covering how to create banners here, however
I may make a tutorial for doing so in the near future.
For now, here's a few pointers. Keep it pretty simple, don't put too many
stocks or images in it. Try out some abstract backgrounds by distorting
your original stock and images. Use Photoshop Brushes to add texture,
depth and interest. Make use of colour adjustment layers and blending
It's the centre-point of your layout, make it worth looking at!
Not everyone will want a very graphical banner though, and some aren't
even able to do so, so don't feel pressured to make it one. Just keep
it simple. :)
Remember to make it roughly the same colour scheme as your layout though,
'cause you don't really want a dark red banner with a bright blue layout
now do you?
After the banner is completed, add text: the name of your website. Make
it bold and quite noticeable. But blend it in, using the same colours
for your layout, so that it's doesn't stick out like a sore thumb, that
would be going overboard.
Ok, that's it, your layout should be just about finished now! Add the
finishing touches you want and make sure the banner fits ok and you're
good to go!
Ok, now you have your finished layout, but there's a problem, how do you
code it and upload it online? To proceed, your layout will need to be
cut into pieces. You can do this quite simply in Photoshop. Copy your
layout as a merged image by going to Edit>>Select All and then Edit>>Copy
Merged or 'Ctrl + A' to select your canvas and 'Shift + Ctrl + C' to copy
merged. Then create a new file and paste the layout inside.
Choose the square Marquee tool from the menu, (make sure Feather is set
to '0') and select a piece of your layout. Cut it by pressing 'Ctrl +
X' or going to Edit>>Cut. Paste the piece into a new canvas and
save as 'layout_01.jpg' or whatever is easier for you.
When saving images for the internet, always go to File>>Save for
Web to use Photoshop's best optimising feature. Choose to save as a JPEG
and adjust the quality so that you're happy with the difference between
the .PSD and the new .JPG. Between 40-55 quality should be what you're
Repeat the process over the whole layout until it's cut into manageable
images and saved sepaerately.
The tricky part here is of course which parts are you supposed to cut?
It really can depend on the design, but you'll want to keep rollovers,
and content and navigation areas in mind, i.e. the area where you want
text will have to be cut out as a separate image. In addition, it's good
to keep your images fairly big, so instead of having hundreds of tiny
images loading, you only have 3-7 larger pictures that should load faster
The most important detail of cutting your layout up is deciding whether
you are going to have a navigation and content area that will stay static,
i.e if the text/images inside become too long or large, a scrollbar will
appear on the inside to allow you to scroll around teh whole area, OR
if your navigation and content will 'stretch' along with your text and/or
images, so if the page is longer, there will be a 'repeating' line that
stretches down the page to fill the extra space.
To do this, cut a horizontal strip across your page, making sure that
it crosses the navigation and content area and that there are no irregularities
along the edges that would look messy repeated over and over.
It would probably look something like this if you were using solid blocks
Once your layout is cut, you should have one image for the banner, one
for the footer, one for the repeat, and a couple of others if you have
some more complex designs or rollovers.
You can now move on to coding! Unfortunately this tutorial only covers
the layout itself, but perhaps at some point in the future I will make
another to explain as much of the coding part as I can.
Thanks for reading, hope you found my tutorial helpful!
Written by FFFreak.