Vector graphics
1 / 37

Vector Graphics - PowerPoint PPT Presentation

  • Uploaded on

Vector Graphics. Digital Media I. 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. Graphics on the Web.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Vector Graphics' - sheba

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Vector graphics

Vector Graphics

Digital Media I

Vector and bitmap
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

Graphics on the web
Graphics 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.

Raster pixels
Raster = Pixels

  • Pixel Info:

  • RGB Value

    • Red (233)

    • Green (56)

    • Blue (156)

  • Position

    • X coordinate (259)

    • Y coordinate (848)


File size

Bitmap (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.


File size defined by mathematical equations telling how to “draw” the image. Vectors can often be much smaller files that download faster.

File Size

Screen size = 2089 x 1094 pixels

Bitmap = 6.5 MB vs. Vector = 26 KB



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 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.




The Web depends on hyperlinking. To have more than one link per image requires the use of image maps embedded in the HTML code.


Various parts of a vector image may have different links, built inherently into the image.




Minimal animation: The GIF format allows several images to be defined in one image file ("animated gifs"), but each image is essentially static.


Flash and shockwave files are examples of fully-animated vector drawings with many animation options.


Application of vector graphics
Application of Vector Graphics

Vectors can be used to create:

  • Graphics for the Web, t-shirts, bumper stickers, signs, etc.

  • Architectural drawings

  • Animations

Digital images

Digital Images

“artwork” of the new millennium

UVSC--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


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

  • Image Color ~ Mechanics

  • Image Display ~ Digital Artistry

  • Image Adjustments ~ Digital Environment

Image color digital mechanics
Image Color :Digital Mechanics

Image color how we see it
ImageColor: How 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

Image color how we create it rgb
ImageColor: How We Create It ~ RGB

  • Rasters ~ monitor light

  • Pixels ~ picture elements

  • Palettes ~ color tables

Image color how we create it
ImageColor: How We Create it

  • Red, Green, Blue (RGB)

    - System for representing the colors on a computer display

  • Combine to obtain any color in the visible spectrum

  • 3 channels (8 bit each); 0 to 255 gives intensity range of 0-100%

256 x 256 x 256 = 16,777,216 16 million possible colors

ImageColor: How Many Colors ~ Depth

  • Color Depth ~ total number of colors possible per pixel

Image color how we display it resolution

How many colors?Depth

16 million(24 bit)

256Colors(8 bit)

16 colors




ImageColor: How We Display It ~ Resolution

How many pixels (perinch) ?Resolution

Image color how it affects file size
Image Color: How 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 displays digital artistry
Image Displays:Digital Artistry

Image display digital artistry
ImageDisplay: Digital Artistry

  • What is a Bitmap? …a Vector?

  • How are these images generated?

  • What are their… -- advantages? -- disadvantages?

Image display what is a bitmap
ImageDisplay: What is a Bitmap?

  • An“information matrix”

  • Matrix describes individual picture elements (pixel ~ “dot”) of resolution on a display screen.

Image display how to generate a bitmap
Image Display: How to Generate a Bitmap

  • Artist captures (e.g., via camera/scanner) or creates (e.g., via Photoshop) a bitmap image

  • Computer “reads” the bitmap’s matrix of information

  • Computer processes the information

  • Computer displays the processed information… in milliseconds

Image display bitmap advantages
Image Display:Bitmap Advantages

  • Photo-realistic quality

  • Easily handles complex subjects

  • Easily edited or altered

  • File retains all data required for re-use, etc.

Image display bitmap disadvantages
Image Display:Bitmap Disadvantages

  • Huge file sizes

    • Often require compression

    • Most common compressionsresult in loss of image data

  • Not easily scale-able

  • Reductions ~ may blur

  • Enlargements ~ will pixelate

Take a break stand and stretch feel free to get a drink

Take a BREAKStand and StretchFeel free to get a drink

Image display what is a vector
Image Display:What is a Vector?

  • A mathematical recipe used to “draw” an image

  • Series of instructionsusing lines, polygons and other geometricshapes

Image display how to generate a vector
Image Display:How to Generate 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 vector advantages
Image Display:VectorAdvantages

  • Easily edited or altered

  • Easily scalable

  • Very small file size

Image display vector disadvantages
Image Display:VectorDisadvantages

  • Not photo-realistic

  • Not widely used outside of tech fields

Image adjustments digital environment
Image Adjustments:Digital Environment

Image adjustments computer palette



Image Adjustments:ComputerPalette

  • Sets of colors – mathematical tables that define the color of a pixel displayed on the screen

  • 8 bit Palette Clash/Flash only one set of 256 colors can be displayed at once

Image adjustments illusions antialiasing

Smoothing of an imagecaused by aliasing(see notes)

Adjust pixel positionsor intensities

Image Adjustments:Illusions ~ Antialiasing

Image adjustments illusions dithering
Image Adjustments:Illusions ~ Dithering

  • 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





256 colors

Image adjustments compression
Image Adjustments:Compression

Lossy--compromises the original data and it cannot go back to the original image.

Lossless--retains all the original data as part of the compressed file

  • .png (Portable Network Graphics)

  • .tif(Tagged Interchange Format)

  • .gif(Graphics Interchange Format)

  • .jpg(Joint Photographic experts Group)

  • .gif(Graphics Interchange Format); limited to 256 colors

Image adjustments compression formats
Image Adjustments:CompressionFormats

Image adjustments compression formats1
Image Adjustments:Compression 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)