JRN 440 Adv. Online Journalism Raster Graphics Wednesday, 1/11/12

Class Objectives Lecture Raster Graphics Photoshop Selecting Homework assignment Ex. 1, due on Wednesday 1/18/12 by 2:05pm Ex. 2, 3 due Monday 1/30/12 by 2:05pm

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 Do this now * zoom in

Raster Graphics Resolution = a measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch. The terminology varies according to the intended output devices Resolution dependent- need to consider output device when creating Lower resolution for monitors Higher resolution for printed pieces Do this now! Image < Image Size File < New

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 Do this now! * Right click on image on Web page, Save Picture as, look at Save as Type file extension * Try doing this for a Flash file

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) Do this now! File <Save and look at the drop down box for “Format” Some formats will not always be made available or may flatten your file automatically

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 are rectangular in shape Due to pixels on a grid 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 Not when scaling/zooming image, but when resizing it Question- do you think it would be better to increase a file? (Create pixels) Or decrease it? (Throw away pixels) Do this now! Image <Image Size and then make sure “Resample” box is checked

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 You’re discarding data when you manipulate an image in PhotoShop

PS Basic Tools: notice the triangles on buttons (click and hold to reveal more tools) Atomic learning website Photoshop, Intro., B. Workspace, 2. Using the Tools panel Selection Tools Painting and Retouching Tools Type, Path, and Shape Tools Utility Tools Foreground and background color palettes Have to do with what tool you choose Double click on them to change colors Quick mask button

Selecting parts of a raster image Let’s say you inherit a flattened raster image or open an image you’ve shot into Photoshop How easy is it to select parts of the image? Easy If the background is all one color (select background and then <Select <Inverse) Harder If your background is multi-colored You need to use PS tools

Selecting Parts of an Image Open apple key plus A for selecting all of image But what about selecting part of an image? Various buttons include marquees, lassos, magic wand, quick select Marquee tools for set shapes Lasso tools for irregular shapes Look for the circle above the tool to show you where to end the selection

Magic wand and quick select Magic wand selects color Tolerance setting Low # = similar colors to pixels you select Higher # = broader range of colors Contiguous setting Checked- only adjacent pixels of that color Unchecked – all pixels of that color Quick selection tool behaves like a brush tool (you ‘paint’ your selection) Change the size of this tool to select what you want Change the type of brush (hard or soft edge) to partially select

Selecting commands < Select < Grow < Similar < Modify < Expand < Contract more Probably won’t use these as much as…

Selections and Alpha Channels If you spend more then 30 seconds creating a selection (also called “marching ants”), you want to save it In Photoshop, you save selection as an Alpha Channel Why create an alpha channel? Permanence! For later use and revision Don’t let this name fool you- think of it as “My Created Selection” instead of “Alpha Channel”

Alpha Channels Photoshop (but do CS4/ Advanced) E. Alpha Channels 1 and 2 (Saving and Loading) Make your selection Go to <Select <Save Selection Click on your Channels palette (behind Layers palette) To re-load (Ctrl D to deselect) < Select <Load Selection and indicate which channel you want (if you have more than one channel saved)

Tweaking Alpha Channels What if you want to add to/subtract from your alpha channel Click on it/the channel Add to channel with black and pen/pencil tool Subtract from it with white and pen/pencil tool Make sure your opacity is set to 100% Short cut to switching between black and white is x on keyboard