Introduction To Web

Graphics

Skm 1383

3/14/2016 1

Dr-qais.com Dr.-Prince ShahZadah

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 2

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 3

Line, Shapes Text, Image

Colour, Texture Format and layout

All these elements create graphic as a whole

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 4

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 5

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 6

Shapes

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 7

Text

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 8

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 9

The word image comes from the

Latin word

Used in Roman Empire

Long history

Image exists in the history

Before computing

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 10

Advanced technology

Now handles image

Creates and edit it

User is more comfortable

Efficient and beautiful

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 11

Types of images

1. Still images

2. Animation images

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 12

Still images

We all know still

images, we take picture

of our friends

Picture of mountain.

Painting, Drawing,

Icons

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 13

Most our images are made

up by still image

Why?

Small size, quality

No special software

Can be opened by any

computer

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 14

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 15

File format indicates the way

a particular information is

encoded for storage.

Without relevant format the

computer

can not display data

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 16

File format:

Is a Specific structure or

arrangement of data that can be

recognized by computer programs.

File format instructs the computer

how to display, print, and process

and finally how to save back the

data.

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 17

File format is a standard way of

matching file with the program

Example:

Microsoft: (.DOC)

Microsoft Office Excel

Worksheet (.xlsx)

Flash: .fla

PowerPoint: .pptx

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 18

Some File Formats

JPEG, PNG,

TIFF

BMP, PSD, GIF,PICT

GRAYSCALE

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 19

JPEG JPEG means Joint Photographic Experts Group.

It is about compressing photographic images.

PNG Portable Network Graphics

TIFF Means Tagged Image File Format

is a file format.

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 20

GIF Graphics Interchange Format

PSD Adobe Photoshop Document

GRAY SCALE Changing color to grayscale

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 21

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 22

Grayscale cat

Color cat

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 23

Animation

Images

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 24

It introduced to computer

after still images

It is made of still images

with

fast movements

Animated GIF files

It is a short files

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 25

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 26

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 27

Computer

Programming Languages

Software

Flash

Macromedia director

Authorware

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 28

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 29

3-D:

Images have three

dimensional look

and exterior.

It has width, height and depth

We can see

The world in 3D

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 30

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 31

If we have a 3D house

We are able to see:

1. Front

2. Back

3. Side

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 32

Top

Side

Front

Side

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 33

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 34

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 35

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 36

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 37

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 38

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 39

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 40

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 41

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 42

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 43

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 44

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 45

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 46

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 47

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 48

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 49

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 50

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 51

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 52

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 53

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 54

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 55

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 56

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 57

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 58

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 59

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 60

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 61

3/14/2016 © Dr. Qais Faryadi 2016: SKM1383 62

3/14/2016 63 © Dr. Qais Faryadi 2016: SKM1383