Designing website as a graphic - any hints?

[Nik981]

A couple of months ago I learned that many web designers lay out an entire web page in an image editing program first , then slice it up, insert in tables, etc.

My understanding of how to do this is quite limited but I am getting a few website jobs and think I really need to learn and get an handle on this. Can any one offer a few tips, hints or references?

Some of my initial questions would be:

- is there a standard size to make the overall graphic (pixel width and heigth)?

- do you insert individual slices as a foreground or background objects, or a combination of both?

- do you make rollovers right in the graphics program using layers?

- how do you add text? Do you allow for the text area (using white space) in the image, then slice it, delete it and add text in Normal view of FrontPage?

If there are other basic questions I should have asked but failed to do so, please address them if possible. thanks in advance for any tips,

gail

btw, I use Photoshop.

 

[mssssee2]

I have done this before,

You can use something like Photoshop, Illustrator or Fireworks to achieve that, I would not suggest In Design or any corel programs.

-There is no standar size but I would recomend resolutions as 800X600 400X600 or something like that. then it should be aligned to center so it wont confuse anyone opening it on fullscreen.
- I personally use A combination of both by flattening it.
- You can make it either with layers or with slices. I use FIreworks for this operation.
- I would use layers (div tags).

I hope you found those tips useful.

 

[CrazeD]

Most web designers make a fixed width of no more than 800PX wide, and however high it needs to be. This is so anyone with a screen resolution of 800x600 can still see the whole thing, without scrolling. There are ways to make it adjust to people's screen size though.

You can do a combination of both.

There are several ways to make rollovers. An easy way is to make two images, one for the regular and one for the rollover, then use Javascript or CSS or something to get the rollover effect.

For text, it can get tricky. If you make a "box" for text, you have to ensure it it will stretch without distorting. It has to be repeatable. Then you can just leave it blank and code some text into it later.

There are tons of tutorials for this, Google one, you'll probably learn a lot.

 

[jay_bo]

i do all my designs in photoshop and currently working in one now, when i slice my webpage image i save it for the web, which automatically gives me a html with the images in it and i open it up in dreamweaver and alter it to the way i want .... pm me for help this is a great way of building a template like keeping all the pages the same look and layout and just change the bottom of the page, you will see what i mean when my next website is up and running

 

[CrazeD]

I usually just slice the images and code it myself, so I can code it the way I want. The way Photoshop does it is handy, but very basic.