Photoshop & Web Design Basic FAQ

As this site has become more popular, I've received an ever-increasing number of questions about Adobe Photoshop and about web design in general.

Any answers requiring use of a web editor have been given in FrontPage format.

 

1 – How do I get my website from Photoshop onto the internet?

Photoshop only creates the graphical part of your web page. If you want to get it onto the internet, you'll need to save your image, and use a web editor (like FrontPage) to put it on the web. Click File > Save for Web. This leads into the next question.

 

 

2 – Should I choose gif or jpeg, and what quality?

Gifs are usually only best for images where there are large flat areas of a single colour, such as a diagram. Gifs can have transparent areas in them, and can be animated, which a jpeg can't. Gifs are also limited to 256 colours.

Jpegs are preferable to gifs for almost any image that isn't a diagram. Jpegs compress the data very well, meaning that your picture files will be smaller. This compression creates inaccuracies though, but these inaccuracies are not usually noticeable. In Photoshop, always set your picture quality to 60. This gives almost no visible quality loss, and it halves the file size. Don't be tempted to try to reduce the quality. It's very hard to judge.

 

3 – What screen size should I design my site for?

It's still the case that the majority of people use 800x600 resolution. The number of people using 640x480 resolution has dropped so low now that they're not worth worrying about. Those people will be very used to using their horizontal scroll bar, so they won't be too irked by your site being too big for their screen.

Make your images no more than 779 pixels wide. This allows space for the scroll bar and borders.

 

4 – How do I make my image fill the whole width of the screen?

To do this, I use something that I call a "sliver". Your main image takes up part of the area, and the sliver fills in the rest.

To make a sliver, just take a one-pixel vertical slice of your image, and save it separately. If your image is a photo, or other complex image, you may have to take a wider slice, and edit it to make the ends match up.

Make a table, of width 100%. Put your main image in the table, and set your sliver as the background image for the table. It will then repeat itself as many times as is needed to fill up the table, regardless of the width of the screen.

 

5 – How do I make a mouseover / rollover image?

The best way to do this is to save two separate images. One is the "normal" state of the image, and the other is the "mouseover" state of the image.

If you're using FrontPage, insert your image, and then click Format > Dynamic HTML Effects. Then follow the little instructions on the bar that appears.

 

6 – Which version of Photoshop should I get?

I have only worked with the most recent versions of Adobe Photoshop. These are Photoshop 5.0 / 5.5, Photoshop 6.0, and Photoshop 7.0.

Photoshop 5.0 / 5.5 has most of the basic features you need. There are, however, some features, such as the Slice Tool, expanded Blending Options (including texturing), the Shape Tool, and others, that don't exist in this version.

I'd recommend upgrading if you can.

Photoshop 6.0 has all the features I just described as being missing from Photoshop 5.0 / 5.5.

This is the optimal version of Photoshop to get if your budget is limited. It does everything you need it to do.

Photoshop 7.0 has everything you need, just like its predecessor. It also has all kinds of things you don't need, unless you're heavily into photo manipulation. It looks a bit nicer, and I like how the Options bar has been added to the top of the screen, but that's about it.

Don't pay the extra money for this version if you can get 6.0 cheaper. Stick with Photoshop 6.0, and wait for Adobe Photoshop 8.0 to come out before upgrading.

 

7 – How do I blend images' edges into each other?

This is a fairly easy question to answer. In Photoshop, have your images as separate layers, and put them roughly where you want them to be.

Select the Eraser Tool. Set the brush (at top left) to a blurry (non-solid) brush.

Wherever your images overlap, apply the Eraser. This will partly erase the layer, making it semi-transparent at the edges, before disappearing.

 

8 – Help! My tables are misbehaving!

This problem is often caused by something that I describe as "table mania", where every possible object is put into its own cell or table, and they end up fighting and distorting each other.

Here are a few tips I can provide, to alleviate this problem.

1. As much as possible, try to create new tables instead of splitting existing tables. The cells in a table are all connected, so if something happens to one of them, the others will tend to change to accommodate that change.

2. Try setting an exact width (in pixels) for each cell and table. Remove all relative widths (percentages or undefined widths).

3. Contrary to common perception, you can put text next to a picture without using a table. (In FrontPage) right-click your image, and set its Alignment / Wrapping Style to Left. Also, put 5 pixels of Spacing in, to keep the text from touching the picture.

4. Use far less tables. Most websites can be arranged the following way – Put in one table, of 100% width. Your header image goes in here. Put another table underneath that table. Split the table into two cells – one for your menu buttons (they don't need separate cells), and the other for your text. Set the width of the table and of both the cells exactly. I recommend about 450 pixels width for the text cell. You don't want this to be the whole width of the screen. It's easy to lose track of where you are when lines are 100 words long.