Design a Website In Photoshop

Design a Website In Photoshop


There are a number of different ways to create Websites.
While some may choose to hand draw a concept and then start coding
HTML, others may want to take a more graphical approach to the design
and layout.

This graphical approach is what I'm here to show you.

So today, I'll explain the design process I go through when a new
customer hires me. Being very visual, I find it easier to start with an
image when I design a Website, and these are the basic steps I follow:

1. First, using Photoshop, create an image that mimics the general layout you'd like to use for your site.
   
2. Once you're happy with the image you'll need to "slice" it
   up for use in your Website template. In this process, it helps to have
   a working knowledge of HTML. You must know how tables work, so that you
   can slice your image in a way that will work with tables.
   
3. Then it's time to create an HTML document that's comprised
   of those slices. This will become the template you'll use to create all
   the pages of your Website.
   

To make it easier to follow along with the directions, here's a downloadable Photoshop image that is yours to use, alter or demolish as you choose! GA_googleFillSlot("Articles_6_300x250");

Note: if you publish this image, all I ask for is a link back to my site

Let's get started!

Interface Image Creation





Interface Design

This is the most critical part of the whole design process. The
design of your interface is very important for usability. You've
probably heard it a thousand times, but the old saying is true: if your
visitors can't find all your content, or they're confused by your
layout, they really are only one click away from leaving your site.

Planning Ahead

With any new design, you must plan ahead. This will enable you to
adapt to any changes that arise quickly and easily. For example,
imagine you wanted to add another section to your Website. Does the
navigation of your site allow for this, or will it entail a complete
redesign? If you're in the latter category, expect to waste time and
money -- resources that can easily be saved if you design your site
layout well the first time.

It's important to imagine where you'd like to be in the future.
Websites are like any other business: you must change with the times.

Layout

We're going to start with an image that is 740x460 pixels in size.
In this space, we need to include the header, navigation and content
areas.

Below, you can see a layout image that I created in Photoshop. The
dark blue bars at the top and bottom of the page represent where our
navigation will be -- this kind of layout is very effective if, for
example, you have a lot of content and you like fast loading pages.

After you've created your image in Photoshop, it's time to prepare
each section so you can use them in an HTML document. Let's slice it up!

Slicing Your Image





Although you can use any graphics software to create your image, I
recommend Photoshop. Packaged with this program is ImageReady, which
you can use to save images for the Web, create gif animations, and
slice up Photoshop images.

Now, "slicing" means that we'll take your original page layout
image, and make smaller individual images out of it, which you can then
insert into an HTML table.

You could just use the large image as a page on your Website, and
make image maps over the areas that you want to be links. The problem
with this solution is that it will take forever to download -- your
users won't be impressed!

As you'll see in this example, when you slice up a large image, you
have the ability to optimize each section individually to make the
total file size smaller. Also, as in this example, some slices are
duplicated, so you need to only use one of them, which will in turn
make the total file size even smaller. The example image I created for
this is only 26.1k. What this means to you is that this page will only
take 9 seconds for a person on a 28.8k modem to download. Are you
starting to see the benefits?

Here we have our image in Photoshop, prepared for slicing:



As you can see, blue lines cross the image. These are guidelines
that Photoshop allows you to simply drag out of the ruler area -- they
mark where we are going to slice the image



http://articles.sitepoint.com/article/design-website-photoshop

thanx a lot