Designing my website in Adobe Photoshop

I created the background template that

will be used on each web page using
Adobe Photoshop, the background is a
series of simple shapes that have had
effects applied to them to make them
more aesthetically pleasing.

To make sure that aspects of the

background didn’t move while inputting
other objects, I selected all the layers and
linked them by right clicking and selecting
link layers. I chose this option instead of
flattening the image because once the
image is flattened it merges the layers and
cannot be undone, linked images can
easily be unlinked if further editing needs
to be done.
The next step was to insert the images
that would appear on each page, each
image is on a different layer to that it can
be individually manipulated.

Once all the images on the page were

inserted the text for each page was
inserted using the same method, each
paragraph of text is a separate layer to
make it is easy to align paragraphs. The
font style I used for each page was Arial
sized 14pt, the font colour is white and
was not changed so that the website had
good design continuity.

Once all the aspects of the web page had

been constructed I needed to turn the
static objects into working buttons and
tabs, I achieved this by using the slice tool

to create sliced areas around objects

so they can be manipulated individually
and have commands assigned to them.
To turn a slice into a button or link I
selected the slice tool and right clicked on
the sliced area I wanted to edit, in the
 slice option bar I selected edit slice
options which brings up the option box
shown on the screen shot. To designate
where the user is taken when they click
on the link I simply entered the page URL
in the URL Field, the other boxes can be
named to label specific links or buttons.

Once I gave all the tabs and links commands I needed to export the page so that I could be open in a
browser or Dreamweaver, to do this I selected File > Save for web and devices (Alt+Shift+Ctrl+S) which
brings up the window shown on the screen shot. This window allows you to export the PSD file you have
created as a JPEG, GIF, PNG or a WBMP, this file can is then exported as an .html file that can be read by
a web browser or web design programmes like Dreamweaver.

Once the .html file has be created it can

be opened in Dreamweaver to embed
objects and make further design changes,
I previewed my site on a web browser by
clicking the button which also debugs
any problems that have been
encountered.
All the html files that I created have to be
placed into one folder once they are
created, any images I used for the
website had to be placed in the same
folder in an images so that the web
browser can find the images through
root folders.

When I want to publish my site I will use

https://order.1and1.co.uk to buy a
domain name and hosting.