| The look of a web
site is one of the most crucial elements in the life of a site. We will take into account
that most of the planning has already been done and that all links and pages have already
been textualy settled. This tutorial will help to make a visual representation of the
planning you have already done. |
 Here are some of the things you will need for this process:
an understanding of Photoshop 5, a rough sketch of your proposed design that includes all
elements, and an open mind. |
| First we will
start looking the rough sketch of the design you have created. This might not be a
Picasso, but it should be more of a guide of all the elements that the final page should
entitle. Ask yourself some questions about this sketch, "does it market my company
effectively?", "does it have any visual metaphors?", "what colors will
be used?". |
| Let’s open Photoshop and start
taking this idea and realizing it. I almost always start a new document with the page
dimensions of 600 pixels wide by 400 pixels high. This size, by the way, is the page size
a 640x480 monitor can see at one time through any browser – so it’s smart to
stick to this size for the homepage. |
 What is the logo or name of the company?
For this example we’ll use one of Rêve’s partner companies, Terra Host. We know
a lot of information from the name alone. It has to do with the world and hosting it. If
you were to call TerraHost and ask what their line of business was they would tell you,
"we do hosting for web sites all over the globe!" So you get better
visualization of some possible images of what will be on the page. |
| The globe is already a sort of metaphor for
host. Let’s see what we come up with combining a little bit of playing with the globe
and the logotype. Already we start to see some possibility for the rest of the elements (fig
3). There is a problem though with the colors, they don’t match too well. What I
tend to do is look at complimentary colors for the answer. Let’s change the globes
overall tone to blue by using the Hue and Saturation menu, click colorize and nudge the
controls to make the globe all blue in Hue. (fig.4) |
|
 (fig
3)
 (fig.4) |
|
| Let’s break up the space a bit and make a
bar behind the globe. I’ll make this the complementary color of blue (fig.5),
which is orange. Already this better than most web sites I have seen but it’s missing
some very critical information – the links. Let’s include the links and format
them so they follow a curve similar to that of a side of the globe. |
|
 (fig.5)
(fig.6)
|
|
| What we are doing is creating a visual
language. This language is representative of this site alone, and comprises all the
information you need to complete the rest of the site (fig.7). For instance, it
would be a shame not to use the orange as a navigation bar in future pages. And you know
from the Logotype that the character font you should use is something that isn’t too
ornate and might be a Helvetica or Times for the body text. |
|
(fig.7) |
|
| I hope this
little tutorial has helped you create a more visually intrigueing site. If you would like
more information or would like to submit a tutorial call Rêve Media toll-free at 877-432-2237 |
