| APS 6020 Home Page | Before you start | University Regulations | Setting up KompozerUsing ImagesPage Layout | APS Home page |

Support for APS RTP 6020 - Using Images


About Images and Colour

The inclusion of carefully chosen, well exposed, sharp photographs and diagrams help to make your web site more interesting and more visually attractive.

It is important to make sure that images you wish to use on your web site are of a suitable size to display correctly on screen. The unit of dimensional measurement for images is the 'pixel' (pixel is derived from the two words 'picture and element' and the unit is generally abbreviated to 'px' ) There are 72 pixels per linear inch ( 29 per cm) for image files displayed on computer screens.

Before images can be used on your web pages they should be re-sized to the size you require them to display on screen.

Although Nvu allows you to 'dynamically' re-size images, this method will not work with images placed within layout tables. You should re-size your images in a in a photo editing program. Also, re-sizing your images to the actual required screen display size is good practice because doing this will also reduce the image file size. Smaller image files allow your page to display more quickly. This is especially important for any of your viewers who may have only a slow modem connection to the Internet.

Most images will need to be reduced in size.

It is also possible to increase the size of an image, but the clarity and resolution of the image will be reduced if you enlarge the image more than 20%.

Image size and resolution

Your images need to be saved with a resolution of 72 pixels per linear inch. This is the standard resolution for images to be displayed on web pages. The actual displayed image size on screen may vary a little depending upon the resolution settings of your viewers monitor.

Calculate the screen image image size is as follows:

For an image to appear 2 inches long by 1.5 inches high, on a web page, it needs to have pixel dimensions of:

Length 2 inches x 72 pixels per inch = 140 px

Height 1.5 inches x 72 pixels per inch= 108 px

(If you prefer to work in cm then the resolution is 29 pixels per cm)


Here are some example images with their pixel dimensions to give you an idea of how large they appear on screen.

crest with dimensions           The University crest is 180 pixels wide

 

Bee with px size        This image is 200 pixels wide

 

Moth with px size       This image is 300 pixels wide by 200 pixels high

 

Trilobite with px size  



This image is 500 pixels wide by 350 pixels high









 

Woodland title with px sizeThis image is 600 pixels wide by 100 pixels high

 



Combining Images

To make small images look more effective consider putting them together as a 'combination image'. An image editor such as Adobe Photoshop, Paint Shop Pro or The Gimp allow you to do this easily - here is an example of four small images set into a '35 mm film frame'.

Combination Image


 

Image Editing Programs

There are many image editing programs: Adobe Photoshop is probably the most sophisticated and the best known. This is available on the University managed network and on computers in D211.

You can also use Windows Picture Editor - part of Microsoft Office, for simple re-sizing of images.

If you wish to download a free image editing program, I suggest Google Picassa, This program is very easy to use and has an attractive interface.

The Gimp - a very well specified image editor also available as a free download.

Irfanview is another good free image viewer and editor.


 

Web Site Colour Schemes

A carefully chosen colour scheme can greatly enhance the visual appearance your web site. If you have a good sense of colour harmony choose attractive and appropriate colours for the different elements of your web page. Using these same basic colours on every page of your web site will help to you to create a more consistent looking web site. Attractive web sites normally have three to six basic colours used for the different page elements. For example: the page title bar, page headers and footers, table elements, navigation buttons etc.

Look at some commercial web sites and try to assess which colour combinations look most attractive to your eye.

Here is a good example of the use of harmonious colours on a web site

Professor Andrew Fleming The GIPS Website

APS Graduate Student Websites

Colour Scheme Generators or Colour Scheme 'Wizards'

There are also many 'colour scheme generators' available on the Internet. Here are some examples:

Kuler

http://kuler.adobe.com/#create/fromacolor

The NAPCS-web-colour-generator

http://colors.napcsweb.com/colorschemer//


The Colour Wizard

The Colour Wizard is interactive and particularly easy to use. Here is the link to The Colour Wizard and a screen shot showing generated colours.

http://www.colorsontheweb.com/colorwizard.asp

Colour Wizard

This interactive web based application is very easy to use, just scroll down the page and adjust the colour sliders to see the The Colour Wizard generate schemes of complimentary colours based upon your slider settings. You need to copy the generated colour code values to enter into your web page 'code' within Nvu.

An alternative method is to simply capture the generated colour scheme using a tool such as 'MW Snap' - this is a really useful free image capture program - download it here: http://www.mirekw.com/winfreeware/mwsnap.html


Well Styled Colour Generator

Another similar and easy to use colour scheme generator is the 'wellstyled.com' colour scheme generator. This application allows you to generate basic colour 'themes' and then to further select pastel, light pastel, dark pastel, contrast or pale variants of the basic colours.

http://www.wellstyled.com/tools/colorscheme2/index-en.html#

 

Well Styled Colour generator


Web Colour Schemes

Colour Combinations This website allows you to choose from example colour schemes and is quite useful if you have an idea of what shades of colour you would like to use on your website


html Colour tables

A complete listing of standard html colours and their visual and code values can be seen here:

http://www.oultwood.com/programming/color.php

This is useful if you want to quickly look up the code value for any particular colour that you may want to use on your web pages.

Instant Eye Dropper

Download Instant Eye Dropper 

MW Snap

Download MW Snap


| Return to APS 6020 Main Page |