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.
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
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.
The University crest is 180 pixels wide
This image is 200 pixels wide
This image is 300 pixels wide by 200 pixels high
This image is 500 pixels wide by 350 pixels high
This image is 600 pixels wide by 100 pixels high
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'.
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
Colour Scheme Generators or Colour Scheme 'Wizards'
There are also many 'colour scheme generators' available on the Internet. Here are some examples:
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.
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.
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:
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 DropperMW Snap
Download MW Snap