|
|
|
 |
| |
 |
|
 |
| |
|
|
|
Making a fansite is hard
work. You look around
the net and you see a
load of sites with more
content than you thought
was possible, and you
think to yourself, "how
on Earth am I ever going
to compete with that?"
Well, there are no easy
answers - it takes a
long time and a quality
product to be noticed,
especially in the
crowded Zelda community.
To succeed, you need to
know why you want a
fansite, what you want
to cover, and perhaps
most importantly, how
you're going to create
it. Well thankfully,
we're here to show you
the basics of getting a
fansite off the ground,
because once you've done
so, you're in for a
difficult, educational,
and rewarding ride.
|
What do you want from
your site?
|
|
It sounds obvious, but
the most important step
is always the first.
Before you do anything,
you need to know what
your Zelda site is going
to cover. You might want
to find a niche and
cover a certain aspect
of the Zelda series,
like the cartoon series,
translating Japanese
mangas, or a fan works
shrine. When you've had
a think, write a mission
statement. Whenever you
make any decision
concerning your site,
ask yourself, "does this
comply with my mission
statement?" This way,
your site will never
lose focus.
|
|
|
A site design serves two
purposes; it creates an
overall "feel" and tone
for your content, and it
also communicates your
core information to the
reader. The design is
the first thing a reader
will see, and more often
than not, if it looks
crap, the reader will
leave. Of course, if you
have a nice design and
no content to back it
up, a reader won't be
staying long, but a
quality design is
essential to communicate
quality content.
|
|
|
 This
example on the right is
of a site that will
cover the main Zelda
site. This way, a main
menu is always present,
each game or section has
a context-sensitive sub
menu, and the site is
nicely bookended by a
header and footer. If
your site is a fan works
site, you might think of
another way to organise
your site, perhaps to
give the content more
breathing room and to
strip down the
complexity of
navigation.
Your basic aim with a
layout is to bring
information to the
surface wherever
appropirate. If you have
a Background Reading
section, for instance,
that contains four
sections, you could
easily just put four
links in the middle of
the page. But we don't
know what each link is
really about
without clicking it.
Because we've got room
to play with, we can add
a small illustration and
a sentance describing
the page, and already
the visitor has a better
idea of what's behind
the link. If you have
any kind of gallery, use
thumbnail links rather
than text links to give
a visual preview for the
same effect.
As a final guideline,
you must remember that
you have a general
resolution limit of 750
pixels width, and an
ultimate resolution
limit of 990 pixels.
This is because many
users don't run their
browsers at full-screen,
and some users are still
using 800x600
resolution. Zelda
Elements has a lot of
information to display,
so I chose to design the
site with a width of 990
pixels to take advantage
of resolutions 1024x768
and above.
|
|
|
|
Pencil-and-paper
sketches are the best
way to rough out a new
design. They're quick,
simple and flexible. To
serve as an
illustration, here are
five pages of sketches I
used to create one Zelda
Elements design:
You can see that the
design starts as some
overall lines and
shapes, and then
progresses into smaller
details.
|
|
|
Of course, there's only
so much you can design
with a pencil. Some of
your ideas just won't
work on a computer.
Colours conflict more in
real life than they do
in your imagination. So,
it's time to get dirty
in an image-manipulation
program like Adobe
Photoshop.
When you're
happy with the
direction you
want to take
your design, you
should start
making some
attempts at
creating it. As
you can see, not
every design
starts or ends
well. You might
finish a design
and scrap
everything
because it
wasn't what you
wanted. By the
same measure,
you might finish
a design that
didn't just turn
out how you
intended, but
even better. The
most important
thing is to
learn from your
mistakes from
each revision.
|
|
 |
This example on
the right is the
second draft I
created for this
particular
Elements design.
It's fairly
different to the
finished design,
but then it's
also
fundamentally
the same.
Advancements and
changes came
from liberally
changing things,
no matter how
much effort or
time it took.
For instance, I
didn't like the
degree of bend
in the buttons,
so I recreated
that whole
section. I also
thought that
some of the
colours were too
stressful on the
eye, so I toned
them down and
changed some
labels to white.
|
|
 |
|
This design is
really close to
the finished
piece. Some
backgrounds (for
instance, those
behind the
footer and
header) were
last minute
additions, and I
hadn't locked
down the menu
colours. Colour
is really
important in a
design, because
it can create
balance (or
imbalance), make
some things
discreet, and
some other
things draw
attention to
themselves. Each
colour has a
value based on
its context
within the
overall design -
while I wanted
the submenu to
differentiate
itself from the
main menu by
using another
colour, it only
served to
unbalance the
design because
the overall
palette was so
wide and
vibrant.
|
|
 |
Remember, your design is there to reflect your
content. If you're creating a fan works site, there's no reason to use official
artwork in your design - use quality fan art! For Zelda Elements, I've tried to
create designs that reflect the tone of the series. The illustrated design was
made for the cartoon-era of Zelda games, while the present design was created to
accommodate the split nature of the realistic and cartoony Links.
|
|
|
Once you've
created a design
that you want to
put in a web
page, it's time
to flatten the
layers and save
the components
separately,
using either
Slices, Crop or
Marquee
selections. For
instance, you
might want to
save the header
and game buttons
separately to
allow yourself
more flexibility
when it comes to
updating the
games list.
|
|
 |
Now you're ready
to put all the
images into a
web page and
create your
final design.
Unless you know
HTML, you'll
need a program
like FrontPage
or Dreamweaver
to set the
tables in the
appropriate way.
In this example
screenshot, the
game buttons and
menu links are
missing, and
that's because
I'm using an
essential
technique for
people who don't
use PHP to code
their site.
It's called SSI,
and you need to
replace code
with a string
like this:
<!--#include
file="menus/example.txt"-->
This code would
replace itself
with the
contents of
example.txt in
the "menus"
folder when a
browser accesses
it. So, rather
than changing
hundreds of
pages every time
you need to
change your
menu, you can
just change
example.txt. |
|
 |
|
|
|
|
|
|
 |
|
 |
|
|
|
|
|
|
