Jump to navigation

Tutorial – Web Design Workshop

David O’Brien

Photographs

A big advantage that the web has over print publishing is that it does not cost extra to have your photographs in full color. Also with printed photographs, the viewer relies on light reflecting off the photo where a web-based photo has light from the monitor bringing the light and the photograph to the eyes of the viewer. With proper use of graphic programs like Photoshop, you can really make photographs look spectacular on your website.

Size Issues

It is a good idea to not make any image you use on a site larger than 400 pixels wide or high. The most common monitor size uses a resolution of 800 pixels by 600 pixels. If you limit your photos to this size then there should not be too many problems with the image taking up too much space or not being able to be seen by a user.

Large Photo
This photo is 400 pixels wide which is plenty big enough

Tilted Images

Tilting an image on a web-page can add visual excitement and allow some breathing room for the text that is next to the image.

Titled Picture Example
An example of using a tilted image

As you can see from this example, the image looks much more exciting and the text is more readable when the image is tilted. Although this technique is very useful, it is important not to tilt every image on your website, as that would make the site look somewhat unprofessional and take away the excitement that the tilted effect offers.

Cropping

Often times a photograph will have extra space around its subject that is not needed. By taking away the wasted space, you not only make the photograph stand out more and enhance the subject, you also save space on the web page and save memory and load times.

Cropping Picture Example
An example of cropping an image to make it look better on screen

Image Enhancements

Image editing programs like Adobe Photoshop offer endless amounts of effects and features that you can use to really spice up your photographs. Some of the most useful tools available are:

Brightening and Darkening

If a photograph seems to dark or bright, you can adjust the brightness and contrast

Untouched Photo
A dark photo that could be brighter
Brightened Photo
The same photo as above brightened in Photoshop

Drop Shadows

Adds dimension to the photograph which can really make a webpage beautiful to look at. This does add a little bit to the image size but usually it is not a problem.

Dropshadow Example
An example of using a dropshadow

Artistic Filters

There are many different filters that can make your photographs look like anything from a watercolor painting to a stained glass window.

Artistic Filters Example
Examples of various artistic filters available in programs like Photoshop