Building a Website from Planning to Photoshop Mockup to HTML/CSS

Building a Website: From Planning, to Photoshop Mockup to HTML/CSS

Planning:
Notes
from
Client
Mee/ng

Wireframe
&
Site
Planning
Phase:
Explana/ons
of
Pages
&
their
Content

Mockup
Versions

First
Mockup
Second
Mockup

Mood
Board
created
aBer
another
client
mee/ng:

Building a Website from Planning to Photoshop Mockup to HTML/CSS

Start by creating a folder for your images:

It is important to keep your layers organized so when you are ready to slice your site you
can isolate each area. Here is just the blank content area and the background.

And here is the background, the <body> of our website:

Start with the bottom layer of your background, and work up.
Because the graph paper repeats the entire height and width of the background, we
can create a tile, and have this repeat.

Once you select the area you want
hit
Shift + Command + C
This copies the contents of all visible
layers into clipboard – that way if
your background is made up of more
than one layer, or if you aren’t on the
right layer in Photoshop, it doesn’t
matter.

PC: Control + Shift + C
Or Edit > Copy Merged in the
Photoshop toolbar

Then create a new Photoshop document, by default it will create a document that is
the exact size of the image that is now on your clipboard. Hit ok and then paste the
image onto the new document.

Then save your image by going to
File > Save for Web & Devices…

This image is very simple so GIF is the most appropriate
format to save this image as.

Be sure to save the file in
the folder you created for
your images and name it
something that is simple &
makes sense. Do not use
spaces in your filename. If
you must use spaces use
the underscore.
Example: grid_bkg.gif

I want to save the Post-Its as one image. I turn off the background layers so that I
have a transparent background. This is the perfect time to use Shift + Command +
C because these Post-It notes and the scribbling on them are all in separate layers.
Also Shift + Command + C will keep the transparent background.

By default, Photoshop will give the first layer a white background. Turn off the
layer’s visibility if you want to save your image with a transparent background.

Since I want to keep the background transparent, and I also want to keep the
dropshadows on the Post-Its to look smooth, PNG-24 is the best format to save this
image as.

Once you have all your images together, it’s time to start building the website.
When you open Komodo remember to use File > New > File from template…
and choose HTML. Remember to save your file to the directory you created for your website.

Site Directory

Remember to
keep your image
folder inside your
site directory!

Then create a style sheet (.css file)
by going to File > New > File
from template… and selecting CSS
from the templates area.

Don’t forget to link your
HTML page to the style
sheet!

First, I’m going to start with the very bottom of the background, the grid pattern. Notice that I
don’t have to specify background-repeat because by default the background image will repeat
x & y, starting from the top left corner (0,0).

The background can have multiple images. It works the opposite way you would imagine it
would – the first image listed is the topmost image, and the last image listed is the
bottommost.

body{
background-image: url('img/postits.png'), url('img/gridbkg.gif');
background-repeat: no-repeat, repeat;
}

body{
background-image: url('img/banner.png'), url('img/postits.png'), url('img/gridbkg.gif');
background-repeat: no-repeat, no-repeat, repeat;
background-position: 50% 10%, 50% 290px, 0 0;
}

body{
background-image: url('img/banner.png'), url('img/postits.png'), url('img/gridbkg.gif');

background-repeat: no-repeat, no-repeat, repeat;

background-position: 50% 10%, 50% 290px, 0 0;
}

Next I add a #content div to index.html and style my #content div in the CSS file.
Once I have my content div styled, I can then make adjustments to the background image
to make sure they are behaving correctly.

Added margin:auto; to ensure the
content div stays at the very top of the
page

But the design calls for a dropshadow on either side of the content
div… how do we solve this problem?

A CSS dropshadow isn’t
always cross-browser
compatible and doesn’t
have the nuance in
gradation and image has
so I’m going to create a
background image.

I’ll save the image for web as a PNG-24 to keep the transparency of the dropshadow.

#content{
width: 1014px;
background: url('img/contentbkg.png') repeat-y center;
height: 1000px;
margin: auto;
}

Breaking down the code:

#content{

width: 1014px;

The actual content area is 960px but to account for the border (20px each side = 40px)
and the dropshadow, the width is expanded to 1014px;


Here I am using the background property that is a shorthand property. Because I’m only
working with one background, I have my link to the image, repeat-y because the
background is only repeating vertically and center so that the background image is
centered within the div.

height: 1000px;

For now this height is an arbitrary height, it is just giving me an idea of how the
content div will behave once I fill it with content. Without this height, it would be
too small to give a sense of how the page will look. Usually you don’t put a height on
your content area because you want the content to fill the area and allow for the
flexibility of pages with a lot of content or pages that have little content.

margin: auto;

This ensures that the content div is in the center of the page.
}

Now
I’m
star/ng
to
put
all
the
pieces

into
the
website.
I
always
start
with
the

logo
aBer
I
ﬁnish
the
background.

Generally
you
want
to
start
from
the

boKom
up
and
from
the
top
down.
You

can
add
thing
as
you
want,
but
it
does

make
it
easier
to
keep
track
of
your

code
and
where
you
are
placing
things.

No/ce
I
added
the
“ALT”
for
the
image

so
that
screen
readers
would
read
“INI

Logo”
–
it
also
helps
for
search

op/miza/on
that
you
label
all
the

images
with
an
alt.

To
make
the
logo
into
a
link,
simply
nest
the
<img>
tag
in
a
<a>
tag.

<div id="logo">
<a href="index.html"><img src="img/ini_logo.png" alt="INI Logo" border="0"></a>
</div>

Images
that
have
a
link
around
them
will
some/mes
appear
with
a
default
blue
border

there
are
a
few
ways
to
ﬁx
this,
but
I
generally
use
border=“0”
in
my
img
tag.

To
make
the
logo
appear
like
it
is

in
the
mockup
–
with
it
seeming
to

be
up
past
the
edge
of
the
page,
I

use
posi%on:
absolute;

Remember,
in
order
for
it
to

posi/on
rela/ve
to
the
content

area,
you
must
add

posi%on:
rela%ve;
to
the
the

#content
div.

If
you
didn’t
add
posi/on:rela/ve;

to
the
content
div,
the
logo
would

posi/on
rela/ve
to
the
<body>

and
it
would
appear
to
“ﬂy
oﬀ”
the

content
area.

Using
nega/ve
values
in
your

posi/oning
helps
to
get
elements

past
the
boundary
of
the
div
its

within.

I
start
to
add
in
and
style
my
#nav
div
–
but
it
looks
like
a
mess!

How
do
I
ﬁx
this?

The
answer:
MATH

The
design
has
a
margin
of
20px
between
the
yellow
border
and
the
content
within
the
page.
So
we

need
to
put
in
some
padding
on
our
#content
div
–
but
that
eﬀects
the
width
of
our
content
div.

Time
to
pull
out
the
calculator…

#content{
width: 924px;
height: 1000px;
margin: auto;
position: relative;
padding-left: 45px;
padding-right: 45px;
}

To
account
for
the
dropshadow
+
the
border
on
the
background
image
of
the
content
div
we
need
a

padding
of
45px
to
create
the
illusion
of
a
20px
padding
in
the
content
area.

Then
to
account
for
the
90px
of
padding
we
need
to
take
subtract
90
from
the
1014px
width.

Resul/ng
in
a
new
width
of
924px.

To
get
the
font
that
I
used
for
the
naviga/on
I
used
hKp://www.fontsquirrel.com

To
style
the
naviga/on
I
used
similar
to
the
code
I
used
for
our
dropsite
tutorial.

#nav ul {
float: right;
margin-top: 8px;
padding-right: 20px;
}

#nav li.menu {
display: block;
float: left;
font-family: 'bignoodletitlingregular';
font-weight: 100;
font-size: 30px;
padding-bottom: 10px;
}

#nav li.menu a{
text-decoration: none;
padding-left: 30px;
}

#nav li.menu a:link, #nav li.menu a:visited{
color: #fff;
}

#nav li.menu a:active, #nav li.menu a:hover, #nav li.menu a:hover{
color: #E6D41B;
}

Building a Website from Planning to Photoshop Mockup to HTML/CSS

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Building a Website from Planning to Photoshop Mockup to HTML/CSS (20)

More from hstryk (15)

Recently uploaded (20)

Building a Website from Planning to Photoshop Mockup to HTML/CSS