graded unit revision_001

8/4/2019 Graded Unit Revision_001

1/28

Graded Unit Revision -Graded Unit Revision -

PhotoshopPhotoshop


2/28

22

OverviewOverview

The topics we need to discuss:Categories of digital graphics.

The purpose of digital graphics in applications

Uses of different types of digital graphics

Attributes of graphicsFile formats

Compression

Software Applications


3/28

33

Categories of digital graphicsCategories of digital graphics

The topics we need to discuss:

Bitmap

Vector

Meta

Animated


4/28

44

Bitmaps (Raster graphics)Bitmaps (Raster graphics)

Made up from rectangular picture elements

called pixelsEach pixel contains a specified number of bits hence bitmap

A bitmap file has a large size because it savescolour information for each pixel

Color depth is the amount of colours per pixelThe greater the number of bits the better thequality but the larger the file size

If resolution is too low, they becomespixellated

Anti-aliasing is a technique for smoothing outthe sharp edges of a bitmap

Resolution is a measure of how finely a devicedisplays bitmapped graphics

Bitmaps going onto a website should have an


5/28

55


Bitmap graphics are

rectangular.

On a white backgoundthis image may notappear to be square buton a dark backgroundthat it is rectangularbecomes obvious


6/28

66


When over-enlarged

this image becomeshighly pixellated.

It has a severe caseof the jaggies.


7/28

77


Common bitmap file types include:

JPEG A compressed format used for photorealistic graphics with lots of color and detail

GIF A lossless file format designed for fast

transfer over modems that is better suited tosimple graphics

BMP - An uncompressed Windows formatcreated by IBM not to be confused with thebitmap format in general

PNG Developed to avoid paying to use GIFthe format

TIFF - A flexible format designed forexchanging files between applications andcomputer platforms


8/28

88


Calculate the size of a file as follows:

Size in KBs = (H * W * B)/(8 * 1024)

where H is the height, in pixels W the widthin pixels of the image , B is the number ofbit / pixel, 8 the number of bits in a byteand 1024 the number of bytes in a kilobyte.

Example H = 256, W = 256, B = 24.

Size in KB = (256 * 256 * 24) / (8 * 1024)

= 1572864 / 8192

= 192 KB

You tr H = 128 W = 128 B = 8


9/28

99

Vector graphicsVector graphics

Vector graphics are made up from co-ordinates, shapes, line and fill color data

Co-ordinates consist s of two values an x-coordinate and a y-coordinate e.g. (10, 5)

Lines can either be used on their own or inmultiples to create more complex graphics.

Fill color data is the color added to fill ashape

Paths are a series of lines and curves that goto make up a complex vector graphic

Paths can be opened or closed

Text can be anchored to a pathVector graphics are not resolutionindependent and can be scaled withoutloosing their quality

A vector graphic program uses algorithmsthat apply mathematical formulae to the co-


10/28

1010

Vector graphicsVector graphics

A Vector graphic program uses algorithmsthat apply mathematical formulae to the co-ordinates, shapes, line and color data in orderto generate an image

Vector file files are smaller than bitmap filesbecause they contain much less data

Curved paths within a vector graphic arecalled Bezier curves, which consist of anchorpoints that can be adjusted to change the

shape of the curveVector graphics need to be rasterised beforethey can be included in a Web page

Vector file formats include: Al (AdobeIllustrator), FH (Macromedia Freehand) and

CDR (Coral Draw).


11/28

1111

Path ShapingPath Shaping

Moving the controlhandles affects the shape

of the path


12/28

1212

Quadratic Bezier CurvesQuadratic Bezier Curves

Construct intermediate

points Q0 and Q1 such thatas t varies from 0 to 1:Point Q0 varies from P0 to P1

and describes a linear

Bzier curve.Point Q1 varies from P1 to P2

and describes a linearBzier curve.Point B(t) varies from Q0 to

Q1 and describes a quadratic

Bzier curve.


13/28

1313

Higher Order Bezier curvesHigher Order Bezier curves

Higher-order curves need

correspondingly moreintermediate points.

For fourth-order curves one

can construct intermediatepoints Q0, Q1, Q2 & Q3 that

describe linear Bziercurves, points R0, R1 & R2

that describe quadraticBzier curves, and points S0

& S1 that describe cubic

Bzier curves.


14/28

1414

Meta graphicsMeta graphics

Meta files are graphic files that are acombination of bitmap and vector graphics

EMF is an interchange format for exportingvector graphic data.

When Illustrator saves vector data to EMFformat it may rasterize some vector datawhen exporting artwork to EMF format

Windows meta file (WMF) contains functioncalls that vector graphic statements while

others identify raster graphic imagesCGM is supported by ANSI and is commonlyused in CAD and presentation graphicapplications.


15/28

1515

Animated graphicsAnimated graphics

Animated graphics are 'moving graphics' thatAnimated graphics are 'moving graphics' thatconsist of at least more than one graphic.consist of at least more than one graphic.

Vector graphics are mainly the basis ofVector graphics are mainly the basis of

animations.animations.

Effects generated by bitmaps can be addedEffects generated by bitmaps can be addedand bitmaps themselves can also beand bitmaps themselves can also be

animated.animated.

The illusion of movement is created byThe illusion of movement is created by

playing a series of graphics at a certainplaying a series of graphics at a certain

speed.speed.

The term applied to the playback setting isThe term applied to the playback setting is

known as frame rate. Measured in frames perknown as frame rate. Measured in frames per

second (fps)second (fps)

In computer based applications, the higherIn computer based applications, the higher


16/28

1616

Animated graphicsAnimated graphics

The accepted frame rates used today are:The accepted frame rates used today are:

12 - 24fps for animations used in multimedia12 - 24fps for animations used in multimedia

12fps for web based animations12fps for web based animations24fps for TV in UK24fps for TV in UK

30fps for TV in USA30fps for TV in USA

25fps for film25fps for film


17/28

1717

QuizQuiz

1. Define the term color depth

2. What is a Bezier curve

3. What type of graphic is represented by co-ordinates, shapes and fill data and whoseimage is generated by mathematical

equations4. Why do bitmap files have a large file size?

5. What is a WMF file made up from

6. What is pixellation otherwise known as thejaggies?

7. In vector graphics what is a path, what arethe two types of path?

8. What is a Meta file?

9. Give a definition of an animated graphic

10.What is the recommended frame rate for-


18/28

1818

CompressionCompression

The aim of compression is reduce file size butThe aim of compression is reduce file size butto maintain the quality of the original data.to maintain the quality of the original data.

Files are usually compressed so that theyFiles are usually compressed so that they

take up less space on storage media or lesstake up less space on storage media or less

bandwidth when they are transferred over abandwidth when they are transferred over a

network.network.

Compression is used for different types ofCompression is used for different types of

data, for example documents, sound, anddata, for example documents, sound, and

video.video.

When compression is applied to multimediaWhen compression is applied to multimediagraphics it is almost invariably applied tographics it is almost invariably applied to

bitmapped graphicsbitmapped graphics

There are tow types of compressionThere are tow types of compression

technique:technique:


19/28

1919

Lossless compressionLossless compression

Lossless compression algorithms reduce fileLossless compression algorithms reduce file

size with no loss in image quality.size with no loss in image quality.

This type of compression can be applied toThis type of compression can be applied to

any kind of computer data such asany kind of computer data such asspreadsheets, text documents, softwarespreadsheets, text documents, software

applications and graphics.applications and graphics.

To send a file as an e-mail attachment it is aTo send a file as an e-mail attachment it is a

sound idea to compress it using somethingsound idea to compress it using something

like winzip or winrar.like winzip or winrar.

The main disadvantage with losslessThe main disadvantage with lossless

compression is that it doesnt reduce the filecompression is that it doesnt reduce the file

size as much as lossy compression.size as much as lossy compression.


20/28

2020

Lossy compressionLossy compression

Lossy compression looks for 'redundant' pixelLossy compression looks for 'redundant' pixel

information and discards it permanently.information and discards it permanently.

When the file is decompressed the originalWhen the file is decompressed the original

data isn't retrieved.data isn't retrieved.

Lossy is only effective with media elementsLossy is only effective with media elementsthat can still 'work' without all their originalthat can still 'work' without all their original

data.data.

These includeThese include

Audio,Audio, Video,Video,

images and detailed graphics for screenimages and detailed graphics for screen

design (computers, TVs, projector screens).design (computers, TVs, projector screens).


21/28

2121

Compressed bitmap filesCompressed bitmap files

JPEG or JPG (Joint Photographic ExpertsJPEG or JPG (Joint Photographic Experts

Group) uses lossy compression. HighGroup) uses lossy compression. High

compression can be applied with little visiblecompression can be applied with little visible

loss of quality.loss of quality.

You can set the level of compression e.g.,You can set the level of compression e.g.,

low, medium & high.low, medium & high.

There a lossless version of JPEG, but this isn'tThere a lossless version of JPEG, but this isn'tas widely used as additional hardware mayas widely used as additional hardware may

required.required.

GIF (Graphics Interchange Format). This is aGIF (Graphics Interchange Format). This is a

lossless file format designed for fast transferlossless file format designed for fast transferof data over modems. It is widely supportedof data over modems. It is widely supported

by web browsers and multimediaby web browsers and multimedia

applications.applications.

PNG (Portable Network Graphic) wasPNG (Portable Network Graphic) was

produced to avoid paying to use GIF. It isproduced to avoid paying to use GIF. It is


22/28

2222

Other compressed bitmap file formatsOther compressed bitmap file formats

Other compressed bit formats include:Other compressed bit formats include:Macintosh PICT and TIFF (Tagged-Image FileMacintosh PICT and TIFF (Tagged-Image File

Format)Format)

Macintosh PICT is used with Mac OS graphicsMacintosh PICT is used with Mac OS graphics

and page-layout applications to transferand page-layout applications to transfer

images between applications. PICT isimages between applications. PICT is

especially effective at compressing imagesespecially effective at compressing images

with large areas of solid colour.with large areas of solid colour.

TIFF (Tagged-Image File Format) is used toTIFF (Tagged-Image File Format) is used to

exchangeexchangefilesfiles betweenbetween applications andapplications andcomputer platforms. TIFF is a flexible bitmapcomputer platforms. TIFF is a flexible bitmap

image format supported by most paint,image format supported by most paint,

image-editing, and page-layout applications.image-editing, and page-layout applications.

Most desktop scanners can produce TIFF filesMost desktop scanners can produce TIFF files

Note: These formats are not su orted bNote: These formats are not supported by


23/28

2323

Paint PackagesPaint Packages

Bitmap graphics software applications areBitmap graphics software applications areknown by several names including rasterknown by several names including raster

graphics editorsgraphics editors,, image editorsimage editorsandandpaintpaint

packages.packages.

The major players include:The major players include:

Adobe PhotoshopAdobe Photoshop

Coral Paint Shop Pro (PSP)Coral Paint Shop Pro (PSP)

Coral PainterCoral Painter

Adobe FireworksAdobe FireworksThe other contenders include: Corel Photo-The other contenders include: Corel Photo-

PaintPaint,, Photoshop Elements, GNU ImagePhotoshop Elements, GNU Image

Manipulation Program (GIMP)Manipulation Program (GIMP) andand MicrosoftMicrosoft

PaintPaint


24/28

2424

Drawing PackagesDrawing Packages

Applications used for creating and editingApplications used for creating and editingvector graphics are known as Drawingvector graphics are known as Drawing

Packages.Packages.

These Include:These Include:

Adobe Illustrator.Adobe Illustrator. CorelDRAWCorelDRAW

Adobe FreehandAdobe Freehand

FireworksFireworks

Other packages include: KAI powertools, JascOther packages include: KAI powertools, JascWebDraw, LogoEase- web based software andWebDraw, LogoEase- web based software and

the Flame project - Open source softwarethe Flame project - Open source software

used to create SVG filesused to create SVG files


25/28

2525

Animation PackagesAnimation Packages

More and more graphics software applicationsMore and more graphics software applications

support features for creating simple 2Dsupport features for creating simple 2D(dimensional) animated graphics e.g.(dimensional) animated graphics e.g.

PhotoshopPhotoshop

More complex animations for web andMore complex animations for web and

multimedia applications can be producedmultimedia applications can be produced

using specialist software applicationsusing specialist software applications

Packages include:Packages include:

Adobe Flash

Adobe Director

Other Animation graphics softwareapplications include:

ToonBoom Animation

Anime Studio

CelAction


26/28

2626

QuizQuiz

1. What is the aim of file compression?2. What is the difference between lossless and

lossy compression3. What kind of files are suitable for lossless

compression4. What are the levels of compression for a JPEG

file?

5. Does JPEG support lossy or losslesscompression?

6. How does lossy compression work?7. Which two bitmap compression formats are

NOT supported by Web browsers

8. What is a Drawing package used for?9. What is a Paint package used for?10.List any three of the principle paint

packages

11.List any three drawing packages12.What are the market leading animation


27/28

2727

SummarySummary

We have discussed:

Bitmapped and vector graphics Compression techniques Graphics application packages

We have done a couple of quizzesIf you had trouble with anything in thequizzes Get a copy of the slides from me and work

through them Read the notes carefully before the test

Read through the notes anyway. You cannever practice too muchPractice always makes you better at what youare doing.Go to it & give the test your best shotsAnd finally.


28/28

2828

Good Luck!But you shouldnt need luck as you have allstudied

with Mrs. Meharg - it will be easy!

graded unit revision_001

Documents