Web Design

[rubble]

Hi,

This is the kind of question I should probably ask in a graphic design forum or something, but I just don't know any, and the community here is so helpful and all.

Can anyone just point me in the right direction on how to make a simple web page using Photoshop and Frontpage.
How big does the image have to be in Photoshop?
How do I specify sizes for different parts of the page in Frontpage?

Thanks!

[Jin]

Hi,

I don't know anything about FrontPage so I can't help you there.

As to image sizes, you're dealing with two things:

Image dimensions in pixels

File size

Your image should first be saved in the software's native format or whatever format you want that will keep the image intact in case you want to work on it later. Also make sure the format is not a "lossy" format, such as JPG. (JPG is a lossy format meaning that each time the image is saved, it loses color information and the visual quality is degraded).

Photoshop's PSD format, Painter's RIFF format, or Illustrator's AI format will keep the image intact for future work.

TIFF format will flatten the image (Layers will be gone) but it is not a lossy format, so the image's visual quality will be kept intact.

File formats that are useable on the Web are JPG, GIF, and PNG though I'm not sure PNG files will work in all browsers yet.

The usual formats used for the WEb are JPG and GIF.

GIF format is used for transparent GIF's so the background is transparent when displayed above another background. GIF format is also good for images with flat areas of color and/or linework.

JPG is better for images with color transitions such as paintings or gradients, for instance.

When deciding what image dimensions to use, consider that not everyone has a large monitor and if your image dimensions are too large to display entirely on the screen, the viewer will have to use scroll bars to see the rest. This is annoying to say the least, and a lot of people won't bother to stick around and look at your image.

When deciding on the file size, consider that the larger the file is the longer it will take to display and, again, because a lot of people don't have fast connections like DSL, they may not want to stick around long enough to see the full image display on the screen.

My own recommendation would be to limit your image dimensions to no larger than about 800 x 600 pixels (proportioned to the screen) and, if you want to also show a larger version, add a link and let people know the dimensions and file size of the larger version so they can decide beforehand whether to spend the time looking at it.

I'd also recommend keeping the file size limit to 100 kb or less, at least for the 800 x 600 pixel limit version so the image will load reasonably quickly.

If your images will be smaller in dimension, try to keep the file size down to 50 kb if possible.

These are just rough guidelines and you'll need to decide what works best for you, but do remember that it's good to consider the people who'll be viewing your images and make it as pleasant an experience for them as possible.

If you want to show some parts of your image at full size, take a small section or two of your full size image and also display those. That way, you can show your brushstrokes and other details of the artwork without needing to use huge dimensions and equally huge file sizes.

Since the screen can't display much more than 72 pixels per inch (72 ppi), after your image is saved in the software's native format such as Photoshop's PSD, Painter's RIFF, Illustrator's AI, or saved as a TIFF file, the version used for the Web should be saved at 72 ppi (pixels per inch).

If you have Photoshop, use File > Save for Web and choose the smallest file size possible that does not degrade the image's visual quality noticeably.

Good luck! :)

[rubble]

Thanks a lot for the good advice.
That pretty much did the trick!