jrn 302: introduction to graphics and visual communication - raster and vector files tuesday, 9/8/15

JRN 302: Introduction to Graphics and Visual Communication- Raster and Vector Files

Tuesday, 9/8/15

Class Objectives

Review how to digitally submit files Three Photoshop Tutorials due by end of class on

Thursday. If you have turned them in already or before Thursday’s

class, you do not have to attend Thursday’s class (it will not count against your attendance)

Lecture Raster and Vector Images

Homework assignments Reading: ArtDept, 2012 (on homework webpage)

Graphic File Formats

Can be broken out in many ways 2d versus 3d Web versus Print

Print includes brochures, advertisements, papers RGB versus CMYK

Additive versus Subtractive Raster versus Vector

There is also hybrid/meta files, but we won’t cover that in this class

Raster Graphics

Definition= Computer graphics in which an image is composed of an array of pixels arranged in rows and columns (2d).

Often also called bitmaps Rely on pixels (Lite-Brite)

to create image Pixels = tiny dots of individual color that make

up what you see on your screen The typical computer monitor has 72 or 96

pixels per inch

Raster Graphics

Made up of pixels in a grid (“dumb”) Pixels = tiny dots of individual color that

make up what you see on your screen

All these tiny dots/rectangles of color come together to form the images you see

Raster Graphics

Resolution = a measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch (varies according to the intended output devices).

Resolution dependent= need to consider output device when creating your image Lower resolution for monitors (72 or 96 ppi) Higher resolution for printed pieces (150, 300, 600 dpi)

Raster Graphics

How can you tell if a graphic file is raster? On Web Pages

If browser lets you, zoom in to see the pixels or “jaggies”

Right click on the Web file and look at the file format

In print… if resolution is high enough, won’t be able to tell. If it is pixelated or has a moiré pattern, you can tell.

Popular Raster File Formats

Native format for software .PSD for PhotoShop (at minimum, always save a copy

of your file in this version) For printed output

.TIFF For web output

.JPG .GIF, .PNG .BMP

Raw files (mainly from digital cameras) .RAW but there is no single raw format; different

manufacturers use their own proprietary format KDC(Kodak), CR2 (Canon), SR2 (Sony)

Raster Graphics Advantages

Good for texture, highlights, shadows, blends Excellent for photo-realism

“Easy” for browser to display Nothing to interpret

Raster Graphics Disadvantages

Always rectangular in shape Due to pixels on a grid Somewhat of an exception, transparency with PNG

and JPG Can only be 2d Resolution dependent = output device dependent

Because of resolution dependence, it's difficult to increase or decrease their size without sacrificing a degree of image quality

Question- do you think it would be better to increase a file? (Create pixels) Or decrease it? (Throw away pixels)

Raster Graphics Disadvantages

Pixels on a grid are “dumb” Think about it this way… pixels are just points

of lights/colors to the computer, they are NOT lines and shapes

Although they may FORM lines and shapes

Manipulation of image may lead to loss of information Normally, you are discarding data when you

manipulate an image in PhotoShop

Vector Graphics

Definition= The creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a two-dimensional or three-dimensional space.

Made up of individual objects These objects are defined by

mathematical equations not pixels (“smart”)

Each object has individual properties assigned to it such as color, fill, and stroke.

Vector Graphics

Resolution Independent What does this do? Vector

images always render at the highest quality... Whether stamped sized or billboard sized

Crispness of lines and shapes no matter what size

No “jagged” edges when you enlarge

Vector Graphics Characteristics

Good for drawing shapes, lines, polygons, texts Reduces detail of photographs BUT, images are cartoon-like

Easier to manipulate as objects remain as individuals (not flattened into a painting)

Resolution independent Can scale to any size

Final vector file can be any shape Not restricted to rectangular format

Usually smaller file size than raster Infographic examples

http://onlinelibrary.wiley.com/doi/10.1111/j.1469-8137.2009.02811.x/pdf (page 2) http://www.nytimes.com/2013/09/08/education/harvard-case-study-gender-

equity.html?pagewanted=all&_r=0

Question

1. Can I easily convert my vector file to a raster file? Hint 1: Think back to “smart” and “dumbness” of each file Hint 2: Remember the pyramid in lecture 1

Yes, you can easily convert a vector file to a raster file.Often with an Export or Save As.

Technically, you are “rasterizing” your vector file.It becomes a simple image made up of pixels

Question

2. Can I easily convert my raster file to a vector file? Hint 1: Think back to “dumbness” and “smartness” of each

file Hint 2: Remember the pyramid in lecture 1

No, can’t easily make a raster image into a vector image.Technically, you are assigning shapes to what were a bunch of pixels.Ways to do this1.Illustrator has

A. An autotraceB. The pen tool where you re-create each shape.

2.Photoshop says it can now do this thru 3d panel or can export paths only to Illustrator3.Websites that convert (http://image.online-convert.com/convert-to-svg)