; Artwork and Imaging Software Creating images for use on the web
Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Artwork and Imaging Software Creating images for use on the web


  • pg 1
									Artwork and Imaging Software

Creating images for use on the

This document will help you to produce
images that can be used on web pages.

Other activities in this section are:

   • Creating and Using Digital Images
   • Digital Cameras
Section 13                                           Artwork and Imaging Software

Creating images for use on the web

The aim of this article is to give an overview of the entire process involved in
creating images for use on the web. Images play an important role in making
websites more appealing to the user. The BBC news website
(www.bbc.co.uk/news) is an example of how images can be used to make it more
interesting to the user. This may seem obvious, but it’s surprising how many
websites fail to use images often enough, and just use words instead. Can you
imagine if some TV programmes didn’t bother to show pictures and just used
spoken words?

Generally, images used on the web need to be of a lower resolution than those used
in printed documents. This is due to the time involved in downloading images over
the Internet. Files used on the web are generally either JPEG or GIF files. The
differences between these two types of file formats will be explored later in the

Image sources
Any image that you can produce on your PC can be used on your website. Images
can be obtained from a number of sources. These include:

Digital cameras
Digital cameras are used in the same way as normal cameras but instead of using
films that require developing they produce pictures in a digital format that can be
transferred directly to a computer. Digital cameras come with software required to
import the images, and often to do basic image manipulation, such as the Kodak
software shown below.

ITQ Resource Pack                                                          Page 498
Section 13                                          Artwork and Imaging Software

Scanners are used to capture printed pictures in to a computer. Almost all scanners
are now flat bed and tend to appear similar to the one shown below.

ITQ Resource Pack                                                        Page 499
Section 13                                           Artwork and Imaging Software

Pictures can be downloaded from the web, and then used in your own websites.
Usually this is just a case of right-clicking the image you want to download and then
choosing the appropriate option, as shown below

Creating new pictures using graphics packages
If you are creative, you can generate pictures yourself using computer software such
as drawing packages or CAD (Computer Aided Design) packages.

Camera phones
Some mobile phones now contain digital cameras. An image from these phones
can be usually be transferred to a computer, and then used on the web.

Video capture
Using a mixture of hardware and software, still images can be captured on to your
computer from video. These pictures tend to be lower resolution, and therefore
ideal for use on the web but usually not as good for printing.

However you choose to obtain your images, you still need to ensure that you have
permission from the holder of the copyright before you use them, unless of course
you are the copyright holder.

It cannot be assumed that because an image is on the web you are free to copy it
and use as you wish. Usual copyright laws still apply.

ITQ Resource Pack                                                           Page 500
Section 13                                           Artwork and Imaging Software

Using a graphics package such as Macromedia Fireworks to adjust the
Once you have created the image you will usually want to tidy it up or manipulate it
before using it. You will also want to ensure the file size is kept to a minimum and
that the file is saved to a suitable format.

These tasks can be done with graphics packages such as Adobe Photoshop or
Macromedia Fireworks. Here we will show how some basic tasks can be carried
out using Fireworks MX.

The picture of a scanner that you saw earlier was taken using a digital camera.
When you use a camera, you naturally take some photos horizontally and some
vertically, depending what shape of object you are taking a picture of.

When you use a normal camera, this is not a problem because you can simply
rotate the photo when you look at it. Similarly, when using digital photographs you
need to know how to rotate them.

ITQ Resource Pack                                                          Page 501
Section 13                                            Artwork and Imaging Software

In Fireworks to rotate a picture you simply go to the dropdown menu
Modify/Transform, as shown below.

Now that you have the photo the right way around, you may want to crop the picture.
Basically, this means that choose the part of the picture that you want to retain, and
everything else gets removed. This is an easy way to get rid of anything
surrounding the image that you want the user of the web page to be looking at.

In Fireworks, the crop tool is on the left hand side of the screen under “Tools” and is
below the white arrow.

First you need to click the crop tool and then you need to draw a square around the
area of the photo you would like to retain, the square will appear as a dotted line, as
shown below.

ITQ Resource Pack                                                            Page 502
Section 13                                            Artwork and Imaging Software

Once you have drawn the square, simply hit the return key on your keyboard and
the image will be cropped.

Note however, that cropping too closely is not necessarily the best option. It does
require judgment to be used and sometimes it may take a couple of attempts to get
it right. Remember that if you’re not happy with you first attempt you can simply go
to Edit /Undo in the drop down menu or press Ctrl + Z to Undo.

Next you might like to adjust the brightness, contrast and colours of the picture.
These functions are similar to the controls on your television and basically enable
you to get the most out of your picture. However, if a picture is particularly bad you
may find it beyond the help of these functions.

In Fireworks, these functions are available under the Filters drop down menu. The
best way to learn about all the Filters is to try using them all on various images. You
will not need to use them all, all of the time, but it’s worth taking some time to
familiarise yourself with them all.

ITQ Resource Pack                                                            Page 503
Section 13                                            Artwork and Imaging Software

Filters/Adjust/Colour | Auto Levels is sometimes useful, but you may find its
effects too drastic in many instances.

The Brightness/Contrast controls enable you to achieve an image that can look
more drastic, or subtler.

For your web page, you will usually want to think about how your images will go
together. For example, if you are giving a picture a “soft focus” appearance, it will
contrast with pictures that look harsher. This may make some of the pictures look
out of place.

ITQ Resource Pack                                                            Page 504
Section 13                                            Artwork and Imaging Software

Also you should consider what the images are being used for. Photographs used
on a college or student websites obviously need to look interesting and, whereas a
technical diagram needs to be clear as opposed to artistic.

You should now size your image appropriately for the web page. Remember to
keep a copy of the original file though as once you’ve reduced the size of an image,
if you later need to use it larger you will loose quality if you increase the smaller
image instead of reducing the original.

Go to Modify/Canvas/Image size and ensure that Resample Image is selected so
that you will not lose parts of your image. Also ensure that Constrain Proportions is
selected if you do not want the image to be stretched. When this is selected, if you
change the width the height will change automatically, and vice versa, to ensure that
the image maintains its proportions.

Click OK to close the dialogue box and your image will be immediately resized. If
you are not happy with it, remember to Undo your changes or go back to your
original file.

When you are happy with your image, save it in the packages native file format (in
Fireworks this is .png files). This file will not be used on your web page, but is
higher resolution than a GIF or JPEG file, so you can go back to it later if you need
to amend the image.

ITQ Resource Pack                                                           Page 505
Section 13                                             Artwork and Imaging Software

Go to File/Export Preview to get an idea of the quality of the image when saved in
different formats.

The best way to learn about these options is to try them out. Above the preview you
can see how large the file will be with the current settings. This will update
automatically as you change the settings. When you are happy with the settings,
click Export… and choose a suitable place to save the file.

When you save as JPEG and when you save as GIF
Images used on the web are almost always either JPEG files (with the file extension
.jpg) or GIF files (with the file extension .gif).

JPEGs are generally used where the image has more colours, such as a

GIFs are used for images that are less complicated, such as logos or navigational

If you choose the wrong file type it will have an adverse effect on the quality of the
image and the download time.

File sizes
Generally on the web it is desirable to keep file sizes low. This is because many
web users are still using modems and ordinary telephone lines, which mean that
web access is very slow.

There is no hard and fast rule on the maximum file size that should be used, and the
speed of download will be affected by other factors such as the server used, the
load on the server (i.e. how busy it is), the amount of images on the web page the
code used to create the web page.
ITQ Resource Pack                                                             Page 506
Section 13                                                  Artwork and Imaging Software

However, it is generally expected that images be kept below 40KB. On Windows
operating systems you can tell how large an image file is by right clicking it and
choosing properties, as shown below.

How to display an image within a web page
Web pages are made up of HTML (Hyper Text Mark-up Language). This can be
edited using directly using a text editor such as Notepad, or you can use a web
development package such as Microsoft FrontPage or Macromedia Dreamweaver.

A tutorial on using HTML is beyond the scope of this tutorial, however, this is the
code that is used to display an image:

        <img src="/images/logo.gif" alt="company logo" width="204"
        height="27" align="top">

To explain the code further I’ll break it in to sections:

<img src="/images/logo.gif"
Display the image called “logo.gif”, which is in the folder “images”.
alt="company logo"
This “alt tag” is used to display text if the user has chosen not to display images in
their Internet browser. It will also often be displayed when a user holds the mouse
cursor over the image.

width="204" height="27"

ITQ Resource Pack                                                             Page 507
Section 13                                           Artwork and Imaging Software

The image can be displayed at any width and height. Generally files should be
displayed at the correct size, and should not be stretched or shrunk using the height
and width options. If you need to display the image at different sizes, it will look
much better if you create a copy of your image at its required size using your
graphics package (such as Macromedia Fireworks).

The image can be aligned in relation to the text around it in a number of ways:
    • top
    • baseline
    • middle
    • bottom
    • texttop
    • absmiddle – absolute middle
    • absbottom – absolute bottom
    • left
    • right

ITQ Resource Pack                                                          Page 508

To top