vector graphics
DESCRIPTION
Vector Graphics. Allen Academy of e-Learning. Vector and Bitmap. The two main categories of graphics Each has strengths and weaknesses They are developed very differently Choosing the correct format for the right project can save you time and give you added design options. - PowerPoint PPT PresentationTRANSCRIPT
Vector GraphicsVector GraphicsAllen Academy of e-Learning
Vector and BitmapVector and Bitmap
• The two main categories of graphics
• Each has strengths and weaknesses
• They are developed very differently
• Choosing the correct format for the right project can save you time and give you added design options
Graphics on the WebGraphics on the Web
Until recently, the way to add drawings to a web page was to define the drawing as an image (in GIF, PNG, JPEG or some other format) and insert the image into the web page using the <IMG> element. This works well for many graphics. However, the following slides compare the differences and benefits of vector images.
RasterRaster = PixelsPixels
Pixel
Pixel Info:• RGB Value
1. Red (233)2. Green (56)3. Blue (156)
• Position4. X coordinate (259)5. Y coordinate (848)
File SizeFile SizeBitmap (Raster):• The file size of an
image is defined by the width and height of the image (in pixels) and the number of bits allocated to each pixel in the image.
Vector:
• File size defined by mathematical equations telling how to “draw” the image. Vectors can often be much smaller files that download faster.
Screen size = 2089 x 1094 pixels
Bitmap = 6.5 MB vs. Vector = 26 KB
ResolutionResolution
Bitmap:• Once the image has
been defined at a specific resolution (ex. 800 x 600) the graphic will not look as good at another resolution (ex. 1028 x 764).
Vector:• Vector images are
scalable to dynamically fit whatever resolution the viewer’s monitor may be. You can even zoom in on a vector without losing clarity.
HyperlinkingHyperlinking
Bitmap:• The Web depends on
hyperlinking. To have more than one link per image requires the use of image maps embedded in the HTML code.
Vector:• Various parts of a
vector image may have different links, built inherently into the image.
AnimationAnimation
Bitmap:• Minimal animation:
The GIF format allows several images to be defined in one image file ("animated gifs"), but each image is essentially static.
Vector• Flash and shockwave
files are examples of fully-animated vector drawings with many animation options.
Application of Vector GraphicsApplication of Vector Graphics
Vectors can be used to create:
• Graphics for the Web, t-shirts, bumper stickers, signs, etc.
• Architectural drawings• Animations
Digital ImagesDigital Images
““artwork” artwork” of the of the
new millenniumnew millennium
UVSC--MCT 1110UVSC--MCT 1110
The Last Supper (after cleaning)Leonardo da Vinci, 1498
Tempera on plaster 460 x 880 cm (15 x 29 ft.)
Convent of Santa Maria delle Grazie (Refectory), Milan, Italy
• Image ColorImage Color ~ Mechanics
• Image DisplayImage Display ~ Digital Artistry
• Image AdjustmentsImage Adjustments ~ Digital Environment
More than anything else, the user’s judgment of your work
will be most heavily influenced by the work’s visual impact.
--Tay Vaughn, President, Timestream
DigitalDigital ImagesImages
Image ColorImage Color :Digital MechanicsDigital Mechanics
ImageImage ColorColor: How We See ItHow We See It
• Light spectrum – colors we can see(VIBGYOR)
• Printers recreate the color spectrum with a 4 color process (cyan, yellow, magenta and black)
• Digitally we recreate with red, green and blue
ImageImage ColorColor: How We Create It ~ RGBHow We Create It ~ RGB
• Rasters ~ monitor light
• Pixels ~ picture elements
• Palettes ~ color tables
ImageImage ColorColor: How We Create itHow We Create it
• Red, Green, Blue (RGB)
- System for representing the colors on a computer display
256 x 256 x 256 = 16,777,216 16 million possible colors
– Combine to obtain any color in the visible spectrum
– 3 channels (8 bit each); 0 to 255 gives intensity range of 0-100%
ImageImage ColorColor: How Many Colors ~ DepthHow Many Colors ~ Depth
Number of Colors
Bits Required (per pixel)
Common Jargon
2 1
4 2 2 bit
16 4 4 bit; 16 colors
256 8 8 bit; 256 colors
65,536 16 (2 bytes) 16 bit; high color
16,777,216 24 (3 bytes) 24 bit; true color
• Color Depth ~ total number of colors possible per pixel
16 million(24 bit)
256Colors(8 bit)
16 colors
ImageImage ColorColor: How We Display It ~ ResolutionHow We Display It ~ Resolution
How many colors?Depth
How many pixels (per inch) ?Resolution
high medium low
Image ColorImage Color: How it Affects File SizeHow it Affects File Size
• Color Depth x Image Resolution = Image File Size
• Color Depth x (Length x Width) = Image File Size
• 16bit x (100 x 500) = Image File Size
• 2 bit x (50,000) = 100,000
Image DisplaysImage Displays:Digital Artistry
ImageImage DisplayDisplay: Digital ArtistryDigital Artistry
What is a Bitmap? …a Vector?
How are these images generated?
What are their… -- advantages?
-- disadvantages?
ImageImage DisplayDisplay: : What is a Bitmap?What is a Bitmap?
An“information matrix”
Matrix describes individual picture elements (pixel ~ “dot”) of resolution on a display screen.
Artist captures (e.g., via camera/scanner) or creates (e.g., via Photoshop) a bitmap image
Computer “reads” the bitmap’s matrix of informationComputer processes the information
Computer displays the processed information… in milliseconds
Image DisplayImage Display: How to Generate a BitmapHow to Generate a Bitmap
Photo-realistic quality
Easily handles complex subjects
Easily edited or altered
File retains all data required for re-use, etc.
Image Display:Image Display: Bitmap AdvantagesBitmap Advantages
Image Display:Image Display: Bitmap DisadvantagesBitmap Disadvantages
Not easily scale-able Huge file sizes
•Often require compression
•Most common compressionsresult in loss of image data
Reductions ~ may blur Enlargements ~ will
pixelate
Take a BREAKTake a BREAK
Stand and StretchStand and Stretch
Feel free to get a drinkFeel free to get a drink
A mathematical recipe used to “draw” an image
Series of instructionsusing lines, polygons and other geometricshapes
Image Display:Image Display: What is a Vector?What is a Vector?
Artist creates an image using drawing softwaresuch as Adobe Illustrator
Software describes the drawing tothe computer as a series of lines, curves, polygons etc.
Computer processes the information
Computer displays the processedinformation… in milliseconds
Image Display:Image Display: How to Generate a VectorHow to Generate a Vector
Easily edited or altered
Easily scalable
Very small file size
Image Display:Image Display: VectorVector AdvantagesAdvantages
Not photo-realistic
Not widely used outside of tech fields
Image Display:Image Display: VectorVector DisadvantagesDisadvantages
Image AdjustmentsImage Adjustments:Digital Environment
Image Adjustments:Image Adjustments: ComputerComputer PalettePalette
• Sets of colors – mathematical tables that define the color of a pixel displayed on the screen Normal Palette clash
• 8 bit Palette Clash/Flash only one set of 256 colors can be displayed at once
Image Adjustments:Image Adjustments: IllusionsIllusions ~ AntialiasingAntialiasing
• Smoothing of an imagecaused by aliasing(see notes)
• Adjust pixel positionsor intensities
Image Adjustments:Image Adjustments: IllusionsIllusions ~ DitheringDithering
• Large palette (16M colors) down to small palette (256 colors)
• Color value of each pixel is changed to the closest matching color in the target palette
• Uses math algorithms
16M16M 256 colors 256 colors
nonenone OO RR
LosslessLossless--retains all the original data as part of the compressed file
• .png .png (Portable Network Graphics)
• .tif.tif (Tagged Interchange Format)
• .gif.gif (Graphics Interchange Format)
Image Adjustments:Image Adjustments: CompressionCompression
• .jpg.jpg
(Joint Photographic experts Group)• .gif.gif
(Graphics Interchange Format); limited to 256 colors
Lossy--Lossy--compromises the original data and it cannot go back to the original image.
Image Adjustments:Image Adjustments: CompressionCompression FormatsFormats
Image Adjustments:Image Adjustments: Compression FormatsCompression Formats
• BMP – bitmap (Windows bitmap format)
• PICT – bitmap/vector (Apple/MAC bitmap format)--------------------------------------------------------------
• GIF – Graphics Interchange Format (256 colors; allows for transparency)
• JPEG/JPEG 2000 – Joint Photographic Experts Group (16M colors; lossy compression)
• TIFF – Tagged Interchange File Format (universal bitmap format)
• PNG – Portable Network Graphics Specification (open/universal format)
Illustrator’s Interface
• Worksheet B– Open Illustrator and name the parts of the
window.– Use the Tooltip to identify each tool and its
shortcut keystroke.