Banner Head

APS Level 4 Home Page - Introduction and Software
APS Level 4 University Regulations and Style Guide
APS Level 4 Using Images and Colour
APS Level 4 Before You Start Your Website
APS Level 4 Setting up the KompoZer Program
APS Level 4 Page Layout

Previous Year Level 4 Student Web Pages
Department of Animal and Plant Sciences Level 4 Pages


APS level 4  2010 - 11  Using Images


Images and Colour

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

It is important to make sure that the images you include on your webssite are of a suitable size to display correctly on screen. The unit of dimensional measurement for images is the 'pixel' (pixel is derived from  two words 'picture and element' the pixel unit is generally abbreviated to 'px' ) There are nominally 72 pixels per linear inch ( 29 px 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 KompoZer allows you to 'dynamically' re-size images, this method will not work with images placed within page layout tables. You should re-size your images using a photo editing program e.g. Adobe Photoshop. 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 load and display more quickly. This is especially important for any of your viewers who may have only a slow modem connection to the Internet.

Generally speaking, most images and especially those from digital cameras, will need to be reduced in size before use on a website.

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 about 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 = 144 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)

A simple way to re-size any image to the size you require for your web page is to make use of a website that offers that facility. Here is a link to such a web site. You simply upload your image to be resized, specify the size you and the resolution (72 px per inch) you require and the re-sized image may then be downloaded to your work area. 

http://www.shrinkpictures.com/


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

crest with dimensions

 

Bee with px size

 

Moth with px size

 

Trilobite with px size

 

Woodland title with px size

 

Combining Images

To add visual interest to small images 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 the computers in D211.

You can also use Windows Picture Editor -a component 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 website. 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 website will help to you to create a more consistent looking website. Attractive websites 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.

Have a look at some commercial websites and try to assess which colour combinations work well and look most attractive to your eye.

Here is a good example of the use of harmonious colours on a website

Professor Andrew Fleming The GIPS Web site

Colour Scheme Generators or Colour Scheme 'Wizards'

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

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 KompoZer.

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 on-line 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://colorschemedesigner.com/

 

Well Styled Colour generator


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