SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
GraphicsGraphics
B i C tBasic Concepts
What do graphics look like?
A graphic can be a:A graphic can be a:
Chart
Drawing
Painting
Photograph
Logo
Na igation b ttonNavigation button
Diagram
What do graphics look like?
Graphics can be:Graphics can be:
Black and White – developed with a single hue
Grayscale – shade of gray from black to white
Color – full spectrum of color
Still
Animated – images have movement
Graphics
Evolution of Computer Graphics:Evolution of Computer Graphics:
The first PC with graphics was the Apple II,
i d d i h lintroduced in the late 1970s.
It was not until the mid 1980s that other
computers running Microsoft Windows began tocomputers running Microsoft Windows began to
catch up with Apple’s graphic features.
Computer Graphics Technology
Images created or edited on computersImages created or edited on computers
are either:
Bitmapped graphics
Vector graphics
Graphics
What are bitmapped graphics?What are bitmapped graphics?
Bitmapped graphics, also known as raster
graphics, consist of grids of tiny dots called pixels.
Each pixel is assigned a color.
Can be continuous-tone image, such as
photograph (full shades of color or gray)
Bitmap graphic editors are called paint programsBitmap graphic editors are called paint programs
Graphics
What are bitmapped graphics?What are bitmapped graphics?
Enlarging a bitmap graphic may cause the image
to lose crispness and clarity (pixilated, blurry)
Examples include newspaper photos.p p p p
Graphics
Paint Programs:Paint Programs:
Bitmapped/Raster graphics editing programs are
called paint programs
Ad b Ph t h i th t d d t l f hiAdobe Photoshop is the standard tool for graphic
artists
Graphics
What are vector graphics?What are vector graphics?
Vector graphics use mathematical formulas to
define points, lines, curves, and other attributes
Vector graphic editors are called draw programs
R l ti i d d t d t l l itResolution-independent – do not lose clarity as
you enlarge them or decrease their size.
Appear as bitmaps on computer monitorspp p p
because computer monitors consist of pixel
Examples include printed signs, logos and banner
d idesigns
Graphics
Draw programs:Draw programs:
Vector graphics editing programs are called draw
programs.
Draw programs are the standard tool used forDraw programs are the standard tool used for
desktop publishing of graphics and illustrations.
Adobe Illustrator & InDesign are commonly usedAdobe Illustrator & InDesign are commonly used.
Graphics
Graphics Quality:Graphics Quality:
The two factors that determine graphics quality
are resolution and color depth.p
Resolution is determined by the number of pixels
per inch (PPI).
Color depth refers to the number of distinct
colors an image can contain. It can range from 2-
bit (bl k d hit ) t 24 bit (16 7 illibit (black and white) to 24-bit (16.7 million
colors).
Graphics
Resolution:Resolution:
Resolution is how clear or sharp the image appears.
Low Resolution – image is smaller in file size, but
may have some blurriness or pixilation inmay have some blurriness or pixilation in
appearance.
High Resolution – image is larger in file size, butHigh Resolution image is larger in file size, but
the appearance is clear and sharp.
Graphics
Color Depth:
Color depth refers to the number of distinctColor depth refers to the number of distinct
colors an image can contain.
o 1-bit (black and white)o 1-bit (black and white)
o 8-bit (indexed color) – 256 colors
o 24-bit (full-color) – 16.7 million colors( )
Graphic File Formats
A computer can save and interpret graphic
images in a variety of formats:
Some of the most common formats include:
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
TIFF (Tagged Information File Format)TIFF (Tagged Information File Format)
PIC (PICTure)
RAW (Raw image)
BMP (bitmap)
TGA (Targa)
PNG (Portable Network Graphics)PNG (Portable Network Graphics)
Graphics
Graphic File Formats:Graphic File Formats:
Graphic files are often so large that they need to be
compressed when saved.
Lossless compression – no data is lost inLossless compression no data is lost in
compression, but file sizes are not greatly
reduced.
Lossy compression – file size is reduced
significantly, but some data is lost in the process.
Graphic File Formats
GIF:GIF:
Pronounced je-if
.gif file extension
First graphics format to be accepted by the World Wide Web
( t d d f t f th I t t)(standard format for the Internet)
Supports Web animation
Indexed color format (256 colors)Indexed color format (256 colors)
Lossless compression
Graphic File Formats
JPEG:
P d jPronounced jay-peg
.jpg file extension
Preferred graphic format for digital photographsPreferred graphic format for digital photographs
and pictures on the Web and for email
Full-color format (16.7 million colors)
Lossy compression
Graphic File Formats
TIFFTIFF:
Pronounced tifPronounced tif
.tif file extension
Standard graphic format for desktop publishing images into
documents. Best for print work. Best for storing documents.
Any resolution and all color formats (2-bit to 24-bit color
depths)depths)
Lossless compression
Graphic File Formats
RAW:RAW:
Pronounced raw
.ra or raw file extension
Standard graphic format photographers that want to
capture as closest to actual visual picture use.
Unprocessed files.
Files are very largeFiles are very large.
Not used with a bitmap organizer
Lossless compressionLossless compression
Graphic File Formats
BMP:
Pronounced bitmapPronounced bitmap
.bmp file extension
Commonly used for creating icons and wallpaper for PCsCommonly used for creating icons and wallpaper for PCs
Full color format
Files are large
Lossless compression
Graphic File Formats
TGA:
Pronounced tar-gaPronounced tar ga
.tga file extension
First high quality graphics file formatg q y g p
Used for full color format.
Files are large
Lossless compression
Graphic File Formats
PNG:
d iPronounced ping
.png file extension
Graphic format was designed to replace the GIF on the WebGraphic format was designed to replace the GIF on the Web
Large file
Full-color formats (16.7 million colors)Full color formats (16.7 million colors)
Lossless compression

Contenu connexe

Tendances

Adobe Skills Portfolio
Adobe Skills PortfolioAdobe Skills Portfolio
Adobe Skills Portfolio
blazedchicken
 
JPG vs. GIF vs. PNG
JPG vs. GIF vs. PNGJPG vs. GIF vs. PNG
JPG vs. GIF vs. PNG
kay2
 
Raster graphics
Raster graphicsRaster graphics
Raster graphics
lenance
 
File formats and its types
File formats and its typesFile formats and its types
File formats and its types
Anu Garg
 

Tendances (20)

MM1
MM1MM1
MM1
 
File formats
File formatsFile formats
File formats
 
Image formats
Image formatsImage formats
Image formats
 
E - TECH : File Image Formats
E - TECH : File Image FormatsE - TECH : File Image Formats
E - TECH : File Image Formats
 
Adobe Skills Portfolio
Adobe Skills PortfolioAdobe Skills Portfolio
Adobe Skills Portfolio
 
Digital Graphics- File Formats
Digital Graphics- File FormatsDigital Graphics- File Formats
Digital Graphics- File Formats
 
JPG vs. GIF vs. PNG
JPG vs. GIF vs. PNGJPG vs. GIF vs. PNG
JPG vs. GIF vs. PNG
 
Digital graphics file formats
Digital graphics file formatsDigital graphics file formats
Digital graphics file formats
 
Jpeg Vs Gif Vs Png
Jpeg Vs Gif Vs PngJpeg Vs Gif Vs Png
Jpeg Vs Gif Vs Png
 
print media - file formats - LO1
print media - file formats - LO1print media - file formats - LO1
print media - file formats - LO1
 
What is an Image?
What is an Image?What is an Image?
What is an Image?
 
File formats
File formatsFile formats
File formats
 
Multimedia file formats
Multimedia file formatsMultimedia file formats
Multimedia file formats
 
Raster graphics
Raster graphicsRaster graphics
Raster graphics
 
File formats and its types
File formats and its typesFile formats and its types
File formats and its types
 
Image formats
Image formatsImage formats
Image formats
 
Picture Formats
Picture FormatsPicture Formats
Picture Formats
 
Stand graphdocs
Stand graphdocsStand graphdocs
Stand graphdocs
 
multimedia data and file format
multimedia data and file formatmultimedia data and file format
multimedia data and file format
 
Graphics
GraphicsGraphics
Graphics
 

Similaire à Graphic Concepts

Stem 71 24 multimedia elements - graphics
Stem 71 24   multimedia elements - graphicsStem 71 24   multimedia elements - graphics
Stem 71 24 multimedia elements - graphics
Kelly Bauer
 
L3 cmp technicalfile_180911
L3 cmp technicalfile_180911L3 cmp technicalfile_180911
L3 cmp technicalfile_180911
mapuk7
 
Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1
benstoraro
 
Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1
benstoraro
 

Similaire à Graphic Concepts (20)

Stem 71 24 multimedia elements - graphics
Stem 71 24   multimedia elements - graphicsStem 71 24   multimedia elements - graphics
Stem 71 24 multimedia elements - graphics
 
L3 cmp technicalfile_180911
L3 cmp technicalfile_180911L3 cmp technicalfile_180911
L3 cmp technicalfile_180911
 
Ha1 technical file
Ha1  technical fileHa1  technical file
Ha1 technical file
 
Technical File
Technical FileTechnical File
Technical File
 
Photoshop graphic intro ppt by kartik mandothiya
Photoshop graphic intro ppt by kartik mandothiyaPhotoshop graphic intro ppt by kartik mandothiya
Photoshop graphic intro ppt by kartik mandothiya
 
Digital Image File Formats
Digital Image File FormatsDigital Image File Formats
Digital Image File Formats
 
graphics
graphicsgraphics
graphics
 
Ha1 technical file
Ha1  technical fileHa1  technical file
Ha1 technical file
 
Task 1
Task 1 Task 1
Task 1
 
Ha1 technical file
Ha1  technical fileHa1  technical file
Ha1 technical file
 
Technical File
Technical FileTechnical File
Technical File
 
Technical File
Technical FileTechnical File
Technical File
 
Ha1 technical file
Ha1  technical fileHa1  technical file
Ha1 technical file
 
Technical File
Technical FileTechnical File
Technical File
 
CHAP2.pptx
CHAP2.pptxCHAP2.pptx
CHAP2.pptx
 
Ch08
Ch08Ch08
Ch08
 
Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1
 
Image file formats
Image file formatsImage file formats
Image file formats
 
Technical glossary steve task 1
Technical glossary steve task 1Technical glossary steve task 1
Technical glossary steve task 1
 
DIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesDIWE - Multimedia Technologies
DIWE - Multimedia Technologies
 

Plus de nylysy (6)

Graphic Procedures
Graphic ProceduresGraphic Procedures
Graphic Procedures
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
Elements of Design
Elements of DesignElements of Design
Elements of Design
 
Editing Graphics
Editing GraphicsEditing Graphics
Editing Graphics
 
Digital Media & Society
Digital Media & SocietyDigital Media & Society
Digital Media & Society
 
Media, Multimedia & Digital Media
Media, Multimedia & Digital MediaMedia, Multimedia & Digital Media
Media, Multimedia & Digital Media
 

Dernier

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Dernier (20)

SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 

Graphic Concepts

  • 1. GraphicsGraphics B i C tBasic Concepts
  • 2. What do graphics look like? A graphic can be a:A graphic can be a: Chart Drawing Painting Photograph Logo Na igation b ttonNavigation button Diagram
  • 3. What do graphics look like? Graphics can be:Graphics can be: Black and White – developed with a single hue Grayscale – shade of gray from black to white Color – full spectrum of color Still Animated – images have movement
  • 4. Graphics Evolution of Computer Graphics:Evolution of Computer Graphics: The first PC with graphics was the Apple II, i d d i h lintroduced in the late 1970s. It was not until the mid 1980s that other computers running Microsoft Windows began tocomputers running Microsoft Windows began to catch up with Apple’s graphic features.
  • 5. Computer Graphics Technology Images created or edited on computersImages created or edited on computers are either: Bitmapped graphics Vector graphics
  • 6. Graphics What are bitmapped graphics?What are bitmapped graphics? Bitmapped graphics, also known as raster graphics, consist of grids of tiny dots called pixels. Each pixel is assigned a color. Can be continuous-tone image, such as photograph (full shades of color or gray) Bitmap graphic editors are called paint programsBitmap graphic editors are called paint programs
  • 7. Graphics What are bitmapped graphics?What are bitmapped graphics? Enlarging a bitmap graphic may cause the image to lose crispness and clarity (pixilated, blurry) Examples include newspaper photos.p p p p
  • 8. Graphics Paint Programs:Paint Programs: Bitmapped/Raster graphics editing programs are called paint programs Ad b Ph t h i th t d d t l f hiAdobe Photoshop is the standard tool for graphic artists
  • 9. Graphics What are vector graphics?What are vector graphics? Vector graphics use mathematical formulas to define points, lines, curves, and other attributes Vector graphic editors are called draw programs R l ti i d d t d t l l itResolution-independent – do not lose clarity as you enlarge them or decrease their size. Appear as bitmaps on computer monitorspp p p because computer monitors consist of pixel Examples include printed signs, logos and banner d idesigns
  • 10. Graphics Draw programs:Draw programs: Vector graphics editing programs are called draw programs. Draw programs are the standard tool used forDraw programs are the standard tool used for desktop publishing of graphics and illustrations. Adobe Illustrator & InDesign are commonly usedAdobe Illustrator & InDesign are commonly used.
  • 11. Graphics Graphics Quality:Graphics Quality: The two factors that determine graphics quality are resolution and color depth.p Resolution is determined by the number of pixels per inch (PPI). Color depth refers to the number of distinct colors an image can contain. It can range from 2- bit (bl k d hit ) t 24 bit (16 7 illibit (black and white) to 24-bit (16.7 million colors).
  • 12. Graphics Resolution:Resolution: Resolution is how clear or sharp the image appears. Low Resolution – image is smaller in file size, but may have some blurriness or pixilation inmay have some blurriness or pixilation in appearance. High Resolution – image is larger in file size, butHigh Resolution image is larger in file size, but the appearance is clear and sharp.
  • 13. Graphics Color Depth: Color depth refers to the number of distinctColor depth refers to the number of distinct colors an image can contain. o 1-bit (black and white)o 1-bit (black and white) o 8-bit (indexed color) – 256 colors o 24-bit (full-color) – 16.7 million colors( )
  • 14. Graphic File Formats A computer can save and interpret graphic images in a variety of formats: Some of the most common formats include: GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) TIFF (Tagged Information File Format)TIFF (Tagged Information File Format) PIC (PICTure) RAW (Raw image) BMP (bitmap) TGA (Targa) PNG (Portable Network Graphics)PNG (Portable Network Graphics)
  • 15. Graphics Graphic File Formats:Graphic File Formats: Graphic files are often so large that they need to be compressed when saved. Lossless compression – no data is lost inLossless compression no data is lost in compression, but file sizes are not greatly reduced. Lossy compression – file size is reduced significantly, but some data is lost in the process.
  • 16. Graphic File Formats GIF:GIF: Pronounced je-if .gif file extension First graphics format to be accepted by the World Wide Web ( t d d f t f th I t t)(standard format for the Internet) Supports Web animation Indexed color format (256 colors)Indexed color format (256 colors) Lossless compression
  • 17. Graphic File Formats JPEG: P d jPronounced jay-peg .jpg file extension Preferred graphic format for digital photographsPreferred graphic format for digital photographs and pictures on the Web and for email Full-color format (16.7 million colors) Lossy compression
  • 18. Graphic File Formats TIFFTIFF: Pronounced tifPronounced tif .tif file extension Standard graphic format for desktop publishing images into documents. Best for print work. Best for storing documents. Any resolution and all color formats (2-bit to 24-bit color depths)depths) Lossless compression
  • 19. Graphic File Formats RAW:RAW: Pronounced raw .ra or raw file extension Standard graphic format photographers that want to capture as closest to actual visual picture use. Unprocessed files. Files are very largeFiles are very large. Not used with a bitmap organizer Lossless compressionLossless compression
  • 20. Graphic File Formats BMP: Pronounced bitmapPronounced bitmap .bmp file extension Commonly used for creating icons and wallpaper for PCsCommonly used for creating icons and wallpaper for PCs Full color format Files are large Lossless compression
  • 21. Graphic File Formats TGA: Pronounced tar-gaPronounced tar ga .tga file extension First high quality graphics file formatg q y g p Used for full color format. Files are large Lossless compression
  • 22. Graphic File Formats PNG: d iPronounced ping .png file extension Graphic format was designed to replace the GIF on the WebGraphic format was designed to replace the GIF on the Web Large file Full-color formats (16.7 million colors)Full color formats (16.7 million colors) Lossless compression