SlideShare a Scribd company logo
 Describe the various graphic formats used in digital media.
In This Chapter, you’ll learn on:
 The Basics of Digital Image Formation
 Identifying of the Various file types such as JPEG,
GIF, AI, PDF and etc
 The Characteristics and use of the Various Graphic
Formats
In this chapter, we will look at the basic types of digital
images and file formats. Images, such as pictures, clip
art, 3-D graphics, and animation, are commonly used
in designing for both multimedia and the Web.
Regardless of their forms, multimedia images are
generated by the computers in two ways: as vector-
based graphics and bitmap images
The Basics of Digital Image Formation
Vector graphics
 Vector-based images are defined by mathematical
relationships between points and the paths connecting
them to describe an image.
 Graphical elements in a vector file are called objects.
Each object is an independent entity with properties,
such as color, shape, size, outline, and position on the
screen, by its definition. Since each object is a self-
contained entity, you can easily move and change its
properties while maintaining its original clarity, and
without affecting other objects in the illustration.
 Object graphics are very little memory because
only the location and design information must be
defined – very simple values. This also applies to the
colors used in object graphics, which are also
expressed numerically.
 These characteristics make vector-based programs
ideal for illustration and 3D modeling, where the
individual objects usually need to be created and
manipulated through the design process.
Figure 1. Vector-based graphic: the image itself on
the left and the actual lines that make up the drawing
on the right.
Working with Vector Graphics
Outlines and Lines
 Lines and outlines in object
graphics can assume any
color.
 You can also specify how
thick the lines should be, the
style of the lines (solid,
dotted, etc) and the shape
of the corners (curved,
squared, etc).
Fill
 Curved and closed objects
can be filled with colors,
color shifts and patterns.
 The colors are expressed
numerically in terms of the
ink coverage required for
the respective printing inks.
 You can select fill patterns
and color shifts from a
predetermined menu.
Patterns
 A pattern consists of a small group of objects repeated in a
square pattern. It is easy to make your own patterns.
Gradients
 Color shifts are transitions among several colors at set distances.
 Gradients can either be linear or circular
Compound Path (Knockouts)
 Also known as knockouts, A curve that is placed
within a closed object – a star within a square, for
example – can be selected as a knockout.
 In this example, the selection means that a star
knocks out a transparent hole in the square. As a
result, whatever you put behind the square will be
visible through the star hole.
Chap9 10
Applications for Object Graphics
 Object graphics are created in illustration software
such as Adobe Illustrator
 Adobe Streamline is one example. They are usually
used to convert pixel-based logotypes into object
graphics so they can be used in all possible sizes.
 Object graphics are usually saved in the image
format Encapsulated Postscript (EPS). You can also
save them in whatever format the software uses,
but then the object may not be able to be placed
in a page layout application.
Raster Graphics
 Raster graphics also known as bitmap images are made of individual dots
called pixels that are arranged and colored differently to form a pattern. The
individual squares that make up the total image can be seen when zoomed
in. However, from a greater distance the color and shape of a bitmap image
appear continuous.
 Since each pixel is colored individually, you can easily work with photographs
with so many colors and can create photo-realistic effects such as shadowing
and increasing color by manipulating select areas, one pixel at a time.
Pixel Graphics
Digitalized photographic images
consist of tiny squares of a color,
called pixels. The eye cannot
perceive the pixels unless the
image is greatly enlarged.
Bitmap programs are ideal to retouch photographs,
editing images and video files and creating original
artwork. Variety of changes to photographs can be
made, such as adjusting the lighting, removing
scratches, people, and things, swapping details
between images, adding text and objects, adjusting
color, and applying combinations of special effects.
Working with Graphics
 When photographs or illustrations are scanned into
a computer, pixel-based images, or pixel graphics,
are created. Another term of pixel is raster.
 A pixel graphic is a divided into tiny squares of
color, almost like a mosaic. These tiny squares of
color are referred to as pixels.
 Pixel graphics can also be created directly in the
computer or by a digital camera.
Resolution
 If you assume that a pixel-based image is printed in
a certain size, the image will consist of a certain
number of pixels per centimeter or per inch (ppi).
 The resolution of an image is measured in ppi. This
refers to the number and size of the pixels that
make up a particular image.
 Sometimes the unit dpi is used (incorrectly) instead
of ppi. Dpi, which means dots per inch, is the unit
used to describe the output resolution in printers.
 If the resolution of an image is low, the pixels will be large, and you will clearly
see that the graphic consists of a mosaic-like pattern. At a higher resolution,
however, the eye cannot perceive that the image is made up of pixels.
 There is an appropriate high-level resolution for most images; if you make the
resolution higher than that, you will not get a better quality image but it will
take up more storage space
Image Resolution
A pixel-based image always has a
set resolution (pixels per inch, or
ppi).
In the example, the image has 8
pixels/0.0228 inches = 350 pixels per
inch, or 350 ppi.
Color Modes, Channels and Bit Depth
 Bit Depth
o For now, I believed that you have a better understanding
of what is object and pixel graphics. As to let you know, in
vector-based programs, such as Adobe Illustrator and
CorelDraw Graphics Suite, the drawing tools make shapes
based on mathematical formulas.
o As to recap, vector objects have smooth lines and
continuous colors even when you magnify the image.
Vector drawings are resolution independent, meaning that
when print a vector-based drawing, the quality depends
only on the resolution of the printer.
A vector drawing looks the
same whether viewed at its
actual size or magnified.
 In pixel-based programs, such as Photoshop,
images are made up of tiny pixels that are
arranged and colored to form a pattern. Each pixel
represents a color.
 When you view a pixel-based image at its intended
size and resolution, the colors and shapes appear
smooth, but if you magnify the image, tiny
individual squares become more evident. You can
edit a pixel-based image pixel by pixel, and pixel-
based images depend on the resolution at which
they are saved for quality when printing the image.
 Color depth sets how many colors are available in
each pixel. The number of colors available in a pixel
can range from two colors to millions.
A pixel-based image
looks smooth at its
actual size but shows its
pixels when magnified.
 A color mode determines how the channels in each pixel
create the colors in an image. And each channel in a pixel
represents a primary color.
 Typically, color information is saved in a measurement called
bit depth or color depth.
 This color depth measures how much color information is
available in each pixel. The more bit depth that an image has,
the more colors are available. More color depth translates to
more accurate representation of color on-screen as well as on
the printed page.
 Typical color depth values are 1-bit, 8-bit, 16-bit and 24-bit. For
instance, a pixel with a 1-bit color depth has two possible
color values – black and white. An 8-bit pixel has 256 possible
color values and a 24-bit pixel has about 16 million possible
color values.
Channels
 Every image you create in Photoshop contains
channels. Channels store an image’s color
information.
 Each pixel in an image can have as few as one and
as many as four channels. The number of channels
in an image depends upon the color mode in
which the image is set.
 To view the channels in a
color image, use the
Channels palette to display
the image’s channels. Click
on one of the channels to
display only that channel.
Clicking RGB would restore
the full channel display).
 A special grayscale
channel that is used to save
selections is known as an
alpha channel.
Color Modes
 A color model is a scheme used to break colors
down into their component primary parts. Color
models are used to represent color in images in a
standardized way.
 In Photoshop, color models are applied to images
as color modes.
 Photoshop supports eight color modes: Bitmap,
Grayscale, Duotone, Indexed Color, RGB, CMYK,
Lab and Multichannel.
 Any image can be converted to or edited in any
one of the eight color modes. To convert an image
to another color mode, choose Image > Mode and
select a color mode from the submenu
 The different color modes contain a different
number of channels. Table 1 shows the number of
channels per mode.
Table 1
The Number of Channels in a Color Mode
One Channel Three Channels Four Channels
Bitmap RGB CMYK
Grayscale Lab
Duotone Multichannel
Indexed Color
 If you want to convert an image to a color mode
that is unavailable on the submenu (unavailable
options are grayed out), you need to convert the
image to another color mode before converting it
to the desired color mode.
 For instance, if you want to convert an RGB color
image to Bitmap mode, you have to convert the
image to Grayscale first. You will learn more about
the various color modes in the later chapters
The Various File Types and its Characteristics
 Pixel-based images can be saved in a number of
file formats. Some of them have more or less
becomes industry standards. They are primarily
differentiated by which color modes they can
handle as well as the level of features they are
capable of.
Chap9 10
Chap9 10
Chap9 10
Chap9 10
Chap9 10
The most common image file formats are Photoshop, EPS,
TIFF, PICT, GIF and JPEG. Some are only used on Macintosh
and others only on Windows. The two formats generally
used in graphic production are TIFF and EPS.

More Related Content

PPT
Lecture5 graphics
PPT
Scct2013 topic 3_graphics
PPT
L3 cmp technicalfile_180911
DOCX
Multimedia digital images
PDF
Technical concepts for graphic design production 4
PPT
Raster Vs. Vector Presentation1
PPT
Game development terminologies
PDF
Technical concepts for graphic design production 5
Lecture5 graphics
Scct2013 topic 3_graphics
L3 cmp technicalfile_180911
Multimedia digital images
Technical concepts for graphic design production 4
Raster Vs. Vector Presentation1
Game development terminologies
Technical concepts for graphic design production 5

What's hot (18)

PDF
Technical concepts for graphic design production 2
PPT
Power point x
PPT
Ha1 technical file
PDF
WEB I - 08 - Digital Media
DOCX
Spatial and tonal resolution
PDF
of Pixels and Bits
PPT
Digital image processing ppt
PDF
d_vbp_print
PPTX
Bitmap graphics
PPTX
الوسائط المتعددة Multimedia تاج
PDF
Glossary dip
PDF
Image processing fundamentals
PPTX
Image & Graphics
PPTX
Image processing
PPT
PPTX
2012 13 raster vs vector
PPT
Digital graphics technology
Technical concepts for graphic design production 2
Power point x
Ha1 technical file
WEB I - 08 - Digital Media
Spatial and tonal resolution
of Pixels and Bits
Digital image processing ppt
d_vbp_print
Bitmap graphics
الوسائط المتعددة Multimedia تاج
Glossary dip
Image processing fundamentals
Image & Graphics
Image processing
2012 13 raster vs vector
Digital graphics technology
Ad

Viewers also liked (6)

PPTX
Chap29
PPTX
Chap4
PPTX
Chap27
PPTX
Chap25
PPTX
Happy, happy
PPTX
Chap72&73
Chap29
Chap4
Chap27
Chap25
Happy, happy
Chap72&73
Ad

Similar to Chap9 10 (20)

PPT
Graphics
PPT
Digital Image File Formats
PPTX
Unit iv graphics
PPT
Graphics and imagea
PPTX
Stem 71 24 multimedia elements - graphics
PDF
Chapter 3 (1).pdf Computer Mantainance and Tecknical support Chapter 3 Latest...
PPTX
Sesion 2.1 introduction to photoshop (basic)
PPTX
Chapter Six
PPT
Photoshop graphic intro ppt by kartik mandothiya
PPT
Techinal file raster and vector images
PPT
Basics Of Photoshop
ODP
Unit 78 technical file
PPT
Ch06
PPT
DOCX
PDF
Raster vs vector
PPTX
graphics
PPTX
Resolution
PPT
Graphics
PPT
Imagefileformats for software engineers.ppt
Graphics
Digital Image File Formats
Unit iv graphics
Graphics and imagea
Stem 71 24 multimedia elements - graphics
Chapter 3 (1).pdf Computer Mantainance and Tecknical support Chapter 3 Latest...
Sesion 2.1 introduction to photoshop (basic)
Chapter Six
Photoshop graphic intro ppt by kartik mandothiya
Techinal file raster and vector images
Basics Of Photoshop
Unit 78 technical file
Ch06
Raster vs vector
graphics
Resolution
Graphics
Imagefileformats for software engineers.ppt

More from dkd_woohoo (20)

PPTX
Chap70
PPTX
Chap67
PPTX
Chap66
PPTX
Chap65
PPTX
Chap62
PPTX
Chap61
PPTX
Chap69
PPTX
Chap60
PPTX
Chap59
PPTX
Chap55
PPTX
Chap54
PPTX
Chap52
PPTX
Chap50
PPTX
Chap49
PPTX
Chap48
PPTX
Chap46
PPTX
Chap45
PPTX
Chap44
PPTX
Chap43
PPTX
Chap42
Chap70
Chap67
Chap66
Chap65
Chap62
Chap61
Chap69
Chap60
Chap59
Chap55
Chap54
Chap52
Chap50
Chap49
Chap48
Chap46
Chap45
Chap44
Chap43
Chap42

Recently uploaded (20)

PPTX
TLE Review Electricity (Electricity).pptx
PPTX
Modernising the Digital Integration Hub
PPT
Module 1.ppt Iot fundamentals and Architecture
PPTX
Chapter 5: Probability Theory and Statistics
PDF
Enhancing emotion recognition model for a student engagement use case through...
PPTX
Final SEM Unit 1 for mit wpu at pune .pptx
PPTX
observCloud-Native Containerability and monitoring.pptx
PDF
A novel scalable deep ensemble learning framework for big data classification...
PDF
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
PDF
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
PDF
Hybrid model detection and classification of lung cancer
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PDF
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
PDF
1 - Historical Antecedents, Social Consideration.pdf
PDF
August Patch Tuesday
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
PDF
DP Operators-handbook-extract for the Mautical Institute
PDF
Hindi spoken digit analysis for native and non-native speakers
PDF
A comparative study of natural language inference in Swahili using monolingua...
PDF
project resource management chapter-09.pdf
TLE Review Electricity (Electricity).pptx
Modernising the Digital Integration Hub
Module 1.ppt Iot fundamentals and Architecture
Chapter 5: Probability Theory and Statistics
Enhancing emotion recognition model for a student engagement use case through...
Final SEM Unit 1 for mit wpu at pune .pptx
observCloud-Native Containerability and monitoring.pptx
A novel scalable deep ensemble learning framework for big data classification...
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
Hybrid model detection and classification of lung cancer
NewMind AI Weekly Chronicles - August'25-Week II
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
1 - Historical Antecedents, Social Consideration.pdf
August Patch Tuesday
Univ-Connecticut-ChatGPT-Presentaion.pdf
DP Operators-handbook-extract for the Mautical Institute
Hindi spoken digit analysis for native and non-native speakers
A comparative study of natural language inference in Swahili using monolingua...
project resource management chapter-09.pdf

Chap9 10

  • 1.  Describe the various graphic formats used in digital media.
  • 2. In This Chapter, you’ll learn on:  The Basics of Digital Image Formation  Identifying of the Various file types such as JPEG, GIF, AI, PDF and etc  The Characteristics and use of the Various Graphic Formats
  • 3. In this chapter, we will look at the basic types of digital images and file formats. Images, such as pictures, clip art, 3-D graphics, and animation, are commonly used in designing for both multimedia and the Web. Regardless of their forms, multimedia images are generated by the computers in two ways: as vector- based graphics and bitmap images
  • 4. The Basics of Digital Image Formation Vector graphics  Vector-based images are defined by mathematical relationships between points and the paths connecting them to describe an image.  Graphical elements in a vector file are called objects. Each object is an independent entity with properties, such as color, shape, size, outline, and position on the screen, by its definition. Since each object is a self- contained entity, you can easily move and change its properties while maintaining its original clarity, and without affecting other objects in the illustration.
  • 5.  Object graphics are very little memory because only the location and design information must be defined – very simple values. This also applies to the colors used in object graphics, which are also expressed numerically.  These characteristics make vector-based programs ideal for illustration and 3D modeling, where the individual objects usually need to be created and manipulated through the design process.
  • 6. Figure 1. Vector-based graphic: the image itself on the left and the actual lines that make up the drawing on the right.
  • 7. Working with Vector Graphics Outlines and Lines  Lines and outlines in object graphics can assume any color.  You can also specify how thick the lines should be, the style of the lines (solid, dotted, etc) and the shape of the corners (curved, squared, etc).
  • 8. Fill  Curved and closed objects can be filled with colors, color shifts and patterns.  The colors are expressed numerically in terms of the ink coverage required for the respective printing inks.  You can select fill patterns and color shifts from a predetermined menu.
  • 9. Patterns  A pattern consists of a small group of objects repeated in a square pattern. It is easy to make your own patterns. Gradients  Color shifts are transitions among several colors at set distances.  Gradients can either be linear or circular
  • 10. Compound Path (Knockouts)  Also known as knockouts, A curve that is placed within a closed object – a star within a square, for example – can be selected as a knockout.  In this example, the selection means that a star knocks out a transparent hole in the square. As a result, whatever you put behind the square will be visible through the star hole.
  • 12. Applications for Object Graphics  Object graphics are created in illustration software such as Adobe Illustrator  Adobe Streamline is one example. They are usually used to convert pixel-based logotypes into object graphics so they can be used in all possible sizes.  Object graphics are usually saved in the image format Encapsulated Postscript (EPS). You can also save them in whatever format the software uses, but then the object may not be able to be placed in a page layout application.
  • 13. Raster Graphics  Raster graphics also known as bitmap images are made of individual dots called pixels that are arranged and colored differently to form a pattern. The individual squares that make up the total image can be seen when zoomed in. However, from a greater distance the color and shape of a bitmap image appear continuous.  Since each pixel is colored individually, you can easily work with photographs with so many colors and can create photo-realistic effects such as shadowing and increasing color by manipulating select areas, one pixel at a time. Pixel Graphics Digitalized photographic images consist of tiny squares of a color, called pixels. The eye cannot perceive the pixels unless the image is greatly enlarged.
  • 14. Bitmap programs are ideal to retouch photographs, editing images and video files and creating original artwork. Variety of changes to photographs can be made, such as adjusting the lighting, removing scratches, people, and things, swapping details between images, adding text and objects, adjusting color, and applying combinations of special effects.
  • 15. Working with Graphics  When photographs or illustrations are scanned into a computer, pixel-based images, or pixel graphics, are created. Another term of pixel is raster.  A pixel graphic is a divided into tiny squares of color, almost like a mosaic. These tiny squares of color are referred to as pixels.  Pixel graphics can also be created directly in the computer or by a digital camera.
  • 16. Resolution  If you assume that a pixel-based image is printed in a certain size, the image will consist of a certain number of pixels per centimeter or per inch (ppi).  The resolution of an image is measured in ppi. This refers to the number and size of the pixels that make up a particular image.  Sometimes the unit dpi is used (incorrectly) instead of ppi. Dpi, which means dots per inch, is the unit used to describe the output resolution in printers.
  • 17.  If the resolution of an image is low, the pixels will be large, and you will clearly see that the graphic consists of a mosaic-like pattern. At a higher resolution, however, the eye cannot perceive that the image is made up of pixels.  There is an appropriate high-level resolution for most images; if you make the resolution higher than that, you will not get a better quality image but it will take up more storage space Image Resolution A pixel-based image always has a set resolution (pixels per inch, or ppi). In the example, the image has 8 pixels/0.0228 inches = 350 pixels per inch, or 350 ppi.
  • 18. Color Modes, Channels and Bit Depth  Bit Depth o For now, I believed that you have a better understanding of what is object and pixel graphics. As to let you know, in vector-based programs, such as Adobe Illustrator and CorelDraw Graphics Suite, the drawing tools make shapes based on mathematical formulas. o As to recap, vector objects have smooth lines and continuous colors even when you magnify the image. Vector drawings are resolution independent, meaning that when print a vector-based drawing, the quality depends only on the resolution of the printer.
  • 19. A vector drawing looks the same whether viewed at its actual size or magnified.
  • 20.  In pixel-based programs, such as Photoshop, images are made up of tiny pixels that are arranged and colored to form a pattern. Each pixel represents a color.  When you view a pixel-based image at its intended size and resolution, the colors and shapes appear smooth, but if you magnify the image, tiny individual squares become more evident. You can edit a pixel-based image pixel by pixel, and pixel- based images depend on the resolution at which they are saved for quality when printing the image.
  • 21.  Color depth sets how many colors are available in each pixel. The number of colors available in a pixel can range from two colors to millions. A pixel-based image looks smooth at its actual size but shows its pixels when magnified.
  • 22.  A color mode determines how the channels in each pixel create the colors in an image. And each channel in a pixel represents a primary color.  Typically, color information is saved in a measurement called bit depth or color depth.  This color depth measures how much color information is available in each pixel. The more bit depth that an image has, the more colors are available. More color depth translates to more accurate representation of color on-screen as well as on the printed page.  Typical color depth values are 1-bit, 8-bit, 16-bit and 24-bit. For instance, a pixel with a 1-bit color depth has two possible color values – black and white. An 8-bit pixel has 256 possible color values and a 24-bit pixel has about 16 million possible color values.
  • 23. Channels  Every image you create in Photoshop contains channels. Channels store an image’s color information.  Each pixel in an image can have as few as one and as many as four channels. The number of channels in an image depends upon the color mode in which the image is set.
  • 24.  To view the channels in a color image, use the Channels palette to display the image’s channels. Click on one of the channels to display only that channel. Clicking RGB would restore the full channel display).  A special grayscale channel that is used to save selections is known as an alpha channel.
  • 25. Color Modes  A color model is a scheme used to break colors down into their component primary parts. Color models are used to represent color in images in a standardized way.  In Photoshop, color models are applied to images as color modes.  Photoshop supports eight color modes: Bitmap, Grayscale, Duotone, Indexed Color, RGB, CMYK, Lab and Multichannel.
  • 26.  Any image can be converted to or edited in any one of the eight color modes. To convert an image to another color mode, choose Image > Mode and select a color mode from the submenu  The different color modes contain a different number of channels. Table 1 shows the number of channels per mode.
  • 27. Table 1 The Number of Channels in a Color Mode One Channel Three Channels Four Channels Bitmap RGB CMYK Grayscale Lab Duotone Multichannel Indexed Color
  • 28.  If you want to convert an image to a color mode that is unavailable on the submenu (unavailable options are grayed out), you need to convert the image to another color mode before converting it to the desired color mode.  For instance, if you want to convert an RGB color image to Bitmap mode, you have to convert the image to Grayscale first. You will learn more about the various color modes in the later chapters
  • 29. The Various File Types and its Characteristics  Pixel-based images can be saved in a number of file formats. Some of them have more or less becomes industry standards. They are primarily differentiated by which color modes they can handle as well as the level of features they are capable of.
  • 35. The most common image file formats are Photoshop, EPS, TIFF, PICT, GIF and JPEG. Some are only used on Macintosh and others only on Windows. The two formats generally used in graphic production are TIFF and EPS.