1. Discuss the difference
between bitmap and vector graphics. Describe five different graphic elements
you might use in a project, for example, the background, buttons, icons, or
text. Would you use a vector tool or a bitmap tool for each element? Why?
The difference
between vector and raster graphics is that raster graphics are composed of
pixels, while vector graphics are composed of paths. A raster graphic, such as
a gif or jpeg, is an array of pixels of various colours, which together form an
image. A vector graphic, such as an .esp. file or Adobe Illustrator, File, is
composed of paths, or lines, that are either straight or curved. The data file
for a vector image contains the points where the paths start and end, how much
the paths curve, and the colours that either border or fill the paths. Because
vector graphics are not made of pixels, the images can be scaled to be very
large without losing quality. Raster graphics, on the other hand, become "blocky," since each pixel increases in size as the
image is made larger. This is why logos and other designs are typically created
in vector format -- the quality will look the same on a business card as it
will on a billboard.
Bitmap versus vector graphics
Digital images can
usually be divided into two distinct categories. They are either bitmap
files or vector graphics. If
you work in prepress, you need a good understanding on the advantages and
disadvantages of both types of data. These pages try to explain the
differences.
- As
a general rule digital pictures and scanned images are bitmap files. These
are sometime also called raster images.
- Drawings
made in applications like Adobe Illustrator or Corel Draw are saved as
vector graphics.
Technically both data
formats are completely different. The end result however can look virtually
identical in either format. As a general rule bitmaps are typically used to
depict lifelike images whereas vector graphics are more often used for abstract
images such as logos. There are however numerous exceptions to this rule. It is
often impossible to determine whether an image is a bitmap or a vector file
just by looking at it.
- Vexel
art, for instance, are bitmap images that have been manipulated to look as
if they are vector data. The technique is used to create
attention-grabbing realistic images that have an artificial and sharpened
look to them.
- Talented
artists like Yukio Miyamoto can
draw photorealistic images using vectors.
Photorealistic
vector art from Yukio Miyamoto
You can convert a bitmap
image into a vector file. A vector image can be transformed into a bitmap.
There are even file formats that can combine both types of data into a single
file.
Bitmap images
Bitmap images are exactly
what their name says they are: a collection of bits that form an image. The
image consists of a matrix of individual dots (or pixels) that all have their
own colour (described using bits, the smallest possible units of information
for a computer).
Let’s take a look at a
typical bitmap image to demonstrate the principle:
Example of a bitmap image
To the left you see an
image and to the right a 250 percent enlargement of the top of one of the
mountains. As you can see the image consists of hundreds of rows and columns of
small elements that all have their own color. One such element is called a
pixel – short for picture element. The human eye is not capable of seeing each
individual pixel so we perceive a picture with smooth gradations.
The number of pixels you
need to get a realistic looking image depends on the way the image will be
used. One of the next pages goes into more detail on this.
Types
of bitmap images
Bitmap images can contain
any number of colours but there are four main categories:
- Line-art.
These are images that only contain two colours, usually black and white.
Sometimes these images are referred to as bitmaps because a computer has
to use only 1 bit (on=black, off=white) to define each pixel.
Example of a linear image
- Greyscale images, which contain various shades
of gray as well as pure black and white. Typically 256 shades of gray
(8-bit) are used even though the human visual system needs only 100 tints
to perceive an image as life-like.
Example of a grayscale image
- Multitones: such images contain shades of two
or more colours. The most popular multitone images are duotones, which
usually consist of black and a second spot colour (often a Pantone colour).
The example below contains black and Pantone Warm Red.
Example of a duotone image
- Full
color images. The color information can be described using a number of
color spaces: RGB, CMYK or Lab for instance.
Example of a colour
image
Characteristics
of bitmap data
Bitmap data can take up a
lot of room. A CMYK A4-size picture that is optimized for medium quality
printing (150 lpi) takes up 40 MB. Compression can reduce the size of the file.
The image with the
enlargement showed one of the main disadvantages of bitmap images: once they
are enlarged too much, they look unnatural and blocky. Reducing their sizes
also has an impact on image quality as images lose a bit of sharpness.
Bitmaps are fairly simple
to output, as long as you’re RIP or printer has sufficient memory.
Applications
that can handle bitmap data
There are hundreds of
applications on the market that can be used to create or modify bitmap data. In
prepress, one application – Adobe Photoshop – completely dominates the market.
This doesn’t mean that cheaper alternatives like Corel Photo-Paint should be
disregarded.
File
formats that are used for bitmap data
Bitmap data can be saved
in a wide variety of file formats. Among these are:
- BMP:
an outdated and limited file format that is not suitable for use in
prepress.
- EPS:
a flexible file format that can contain both bitmap and vector data. It is
gradually being replaced by PDF.
- GIF:
mainly used for internet graphics
- JPEG:
or rather the JFIF file format, which is mainly used for internet graphics
- PDF:
versatile file format that can contain just about any type of data
including complete pages, it is not yet widely used to exchange just
images
- PICT:
file format that can contain both bitmap and vector data but that is
mainly used on Macintosh computers and is not very suitable for prepress.
- PSD:
the native file format of Adobe Photoshop (which can also contain vector
data such as clipping paths)
- TIFF:
a popular and versatile bitmap file format
Vector graphics
Vector graphics are
images that are completely described using mathematical definitions. The image
below shows the principle. To the left you see the image itself and to the
right you see the actual lines that make up the drawing.
Example of a vector image
Each
individual line is made up of either a vast collection of points with lines
interconnecting all of them or just a few control points that are connected
using so called Bézier curves. It is this latter method that generates the best
results and that is used by most drawing programs.
“To the right is an example of using Bézier curves”
This drawing demonstrates
the two principles. To the left a circle is formed by connecting a number of
points using straight lines. To the right, you see the same circle that is now
drawn using 4 points (nodes) only.
Characteristics
of vector drawings
Vector drawings are
usually pretty small files because they only contain data about the Bézier
curves that form the drawing. The EPS file format that is often used to store
vector drawings includes a bitmap preview image along the Bézier data. The file
size of this preview image is usually larger than the actual Bézier data
themselves.
Vector drawings can
usually be scaled without any loss in quality. This makes them ideal for
company logos, maps or other objects that have to be resized frequently. Please
note that not all vector drawings can be scaled as much as you like:
- Drawings
containing trapping information can only be scaled up to 20 percent larger
or smaller.
- Thin
lines may disappear if a vector drawing is reduced too much.
- Small
errors in a drawing may become visible as soon as it is enlarged too much.
It is fairly easy to
create a vector based drawing that is very difficult to output. Especially the
use of tiles (small objects that are repeated dozens or hundreds of times) and
Corel Draw lens effects can lead to very complex files.
Applications
that can handle vector data
There are hundreds of
applications on the market that can be used to create or modify vector data. In
prepress, Adobe Illustrator and Corel Draw are the most popular programs.
File
formats that are used for vector data
Bitmap data can be saved
in a wide variety of file formats. Oddly enought the most relevant formats for
the printing industry are also capable of storing bitmap information:
- EPS:
the most popular file format to exchange vector drawings even though PDF
is quickly gaining ground.
- PDF:
versatile file format that can contain just about any type of data
including complete pages.
- PSD:
the native file format of Adobe Photoshop.
- AI:
the native file format of Adobe Illustrator.
How to convert bitmap
data to vector data and back
It is sometimes necessary
to transform images from bitmap data to vector data or back. Some possible uses
include:
- If
you scan or photograph a logo, it is a bitmap image. If it is going to be
used often in a layout it is more practical to have that logo as a vector
drawing. That reduces its file size and you can change the image size
without worrying about any loss in quality.
- Vector
drawings often have to be converted to bitmaps if they will be used on a
web page.
- Vector
drawings are sometimes too complicated for a RIP to be output on film or
plate. Converting them to a bitmap simplifies the file.
Luckily it is fairly easy
to convert images from one mode to the other:
- From
bitmap data to vector graphics: the process to convert a bitmap image to
vector data is called outlining or vectorizing. Some drawing applications
such as Adobe Illustrator and Corel Draw have this option built in. There
are also separate programs available to vectorize bitmap images. For
simple jobs the easiest solution is to put the bitmap image on the
background of the canvas of a drawing application and manually draw over
it.
- From
vector graphics to bitmap data:
- Many drawing applications can store vector
data as bitmap files as well (usually this option is hidden in the Export
menu option).
- You can always view a vector file on screen,
then take a screen capture and save this screen capture as a bitmap
image.
- Photoshop can open some vector file formats
and rasterize the file so that it becomes a bitmap file. A pop-up menu
allows you to define the resolution and colour mode of the bitmap data.
Comparison of bitmap and vector graphics
Bitmap graphics
|
Vector graphics
|
|
What are they made up of?
|
Pixels of different colours
|
Objects
|
What can be edited?
|
Individual pixels
|
Individual objects
|
What is the file size?
|
Large, as the computer stores details of every pixel
|
Small, as the computer stores details of objects, which do not
require much memory
|
What happens when they are resized?
|
They lose quality
|
They do not lose quality
|
How real do they look?
|
Real
|
Not real (many of them look like cartoon images)
|
Native formats that the software can read
|
.bmp
|
.svg
|
Common file formats
|
.bmp, .dib, jpeg, gif, tiff, .png
|
.cgm, .svg, .odg, .eps, .xml
|
Bitmap or vector graphic?
When deciding whether an image should be a bitmap or vector
graphic, you should ask yourself the following questions:
·
Does the image need to be resized?
·
Does the image need to be drawn to scale?
·
Do you need the image to look real?
·
Do you have any restrictions on the file size?
Note that it is possible for an image to use a combination of
vector and bitmap elements.
Bitmap formats are used to store bitmap data. Files
of this type are particularly well-suited for the storage of real-world images
such as photographs and video images.
Vector
format files are particularly useful for storing line-based elements, such as
lines and polygons, or those that can be decomposed into simple geometric
objects, such as text. Vector files contain mathematical descriptions of image
elements, rather than pixel values. A rendering application uses these
mathematical descriptions of graphical shapes (e.g., lines, curves, and
splines) to construct a final image.
In
general, vector files are structurally simpler than most bitmap files and are
typically organized as data streams.
AutoCAD
DXF and Microsoft SYLK are examples of commonly used vector formats. Describes the construction of vector
files in some detail
2. You are a designer given the task of
creating a web site for a new division of your company. Start by defining the
characteristics of the customers of the company and the kind of image the
company wishes to present to its customers. Then specify a colour palette to be
used for the design of the site. Defend your colour choices by discussing the
associations people have with the colours and how they relate to your customers
and the company’s image.
the company which I should design a website for that
is a fast food company .It has a broad range of customer from children
teenagers to adults .In our research we
find out some general points which can attract people from any parts of this spectrum .1thpoint is that the
website should be enough energetic and
excitement to draw visitors and increase their passion to discover menu’s items
and other information they need to know and make them inpatient to try the
dishes .Beside when people feel exiting and impatient their eating speed will
goes up and they may to try more dishes .2th point is that we
should select the colour which make the customer feel enjoyment and good time
.Therefore , our restaurant or our web site will be a place that customer like
to hang out with .Besides this colour should distract customer to think about
the bad aspects of fast food and make them optimistic to our meals to feel
enjoyment when having them .3th point is organic
products which make most of customers concerns about .we should select the colours which convey
this message that the ingredients that make our meals are selected from the
best , organic, and healthy ones .4th point is about how we can show to customers that our
company is very environmental friendly and responsible about community society
and nature .Moreover ,it can makes more positive atmosphere for our website and
restaurant .
1thpoint: Red if you want to attract someone’s
attention, you should use this colour. Red is energetic colour. It associates
with movement and excitement. People, surrounded by this colour have their
heart beating a little faster. It excites people. Red clothes give more
attention from other people. This colour symbolizes life. Also red colour is
associated with passion, sex, speed and danger.
2th point:
Yellow this is a happy colour which associates with laugh,
joy and good times. People surrounded by this colour feel optimistic, because
brains release more serotonin which makes feel better. It accelerates
metabolism and triggers creative thoughts.
3th point: Orange This colour associates with good times, happy and
active days, warm and organic products. Also it is associated with ambitions.
It is very good colour to use on websites about
food, extreme activities and websites for children.
4th point: Green
it associates with growing, nature and money. This colour is
very calming and provides positive emotions. Also it associates with jealousy,
luck, generosity and fertility. Traditionally it symbolizes peace, harmony,
support and balanced energy.
Colour
|
Associations
|
Warm Colours
|
fire, warmth, passion, energy, impulsiveness, happiness,
coziness, comfort, attention getting, inviting, harmonious
|
Cool Colours
|
water, calm, trust, professionalism, sadness, melancholy,
professional, harmonious, detached
|
Red
|
fire, blood, intense, energy, war, danger, strength, power,
determination, action, confidence, courage, vitality, passion, desire, love,
increases metabolism, respiration, and blood pressure, high visibility
|
Yellow
|
sun, joy, happiness, wisdom, intellectual energy, stimulates
mental activity, generates muscle energy, warming, cheerful, pleasant, can
become dingy
|
Blue
|
sky, sea, slows metabolism, breathing, and heart rate,
masculine, trust, loyalty, wisdom, intelligence, expertise, confidence,
stability, depth, calming, suppresses appetite
|
Orange
|
energy, happiness, healthy food (citrus), joy, sunshine, the
tropics, enthusiasm, happiness, fascination, creativity, determination,
attraction, success, encouragement, stimulation, strength, increases
appetite, fall, harvest
|
Green
|
growth, hope, freshness, fertility, financial wealth, healing,
stability, endurance, harmony, safety, life, well being, lack of experience
|
Purple
|
stability, energy, wealth, extravagance, royalty, power,
nobility, luxury, ambition, wisdom, dignity, independence, creativity,
mystery, magic, feminine, artificial
|
White
|
light, goodness, innocence, purity, virginity, positive
connotations, clean, safe
|
Black
|
power, elegance, formality, death, evil, mystery, strength,
authority, elegant, fear, unknown
|
Gray
|
sorrow, detachment, isolation, responsibility, conservative,
non-invasive, security, maturity, dependability, willingness to comply
|
Brown
|
earth, material things, order, convention, stability, solid,
wholesome
|
