Scanned or digitally captured image

Image created on computer using graphics software

Object-oriented graphics Made-up of vectors Resolution independent – can be

scaled to any size without losing any detail

Used primarily for hard-edged graphics such as drawings, logos, charts, illustrations, and type

Adobe Illustrator, Macromedia Freehand, Corel Draw

Made-up of pixels – each pixel (picture element) is assigned a specific location and color value

Resolution Dependant – contain a FIXED number of pixels (size of image is based on the image resolution)

Can represent subtle gradations of color - used primarily for continuous-tone images such as photographs

Adobe Photoshop, Paintshop Pro, Painter

Issues to consider Type of Image Intended Usage Open standard or proprietary format

TIFF & EPS GIF, JPEG, PNG

TIFF(Tagged ImageFile Format) – raster only

This format is a good way to save scanned images. (Long-term archival storage)

It is a platform-independent file format. TIFF is strictly used for bitmap data. The TIFF format allows for changes in contrast, density, and

color to be made easily. TIFFs support virtually all color spaces and support a large

number of compression algorithms. (can remain uncompressed) A TIFF file can be any resolution you choose. The main drawback to saving a file in TIFF format is that,

because of the large amount of information saved, the file size may be quite large.

EPS (Encapsulted PostScript Files)

EPS is a vector file format. (can hold raster data)The EPS “package” contains the PostScript information (the page description language that defines desktop publishing) that the file needs for printing, and QuickDraw/Preview information (rasterized (TIFF or PICT) preview) that the computer uses for display of images on screen.

Originally the native format of Illustrator

Since EPS files are written in PostScript, they should work with every PostScript device and most layout, illustration, and paint programs.

EPS files are mostly exported from a graphics program (Illustrator/Photoshop) and placed in a layout program.

PSD AI Adobe’s proprietary file formats for Photoshop &

Illustrator

PDF (Portable Document Format) Not really a graphic file format Designed to contain entire pages (graphics, type, vector

shapes, layout) Electronic equivalent of your printed documents

Incorporates fine detail and quality of print publications with the interactivity of electronic publications

Common Web File Formats GIF

Graphics Interchange Format JPEG

Joint Photographic Experts Group PNG

Portable Network Graphic SVG

Scalable Vector Graphic

We prepare images based on our intended use

Output device

Images for PRINT Should have a higher resolution Usually in CMYK color mode

Images for DIGITAL DISPLAY Usually have a lower resolution Use RGB color mode

The quantity and distribution of pixels in an image

PIXEL An abbreviation for picture element. The smallest element of a bitmap image Monitors and printers use a fine grid of

pixels to display images Each pixel can be turned on or off and

assigned a color.

Pixel dimension (ppi??) (web) # of pixel elements of image

800pX 600p

Dots per Inch (dpi) - Resolution “dots” of ink per inch when a digital image

is printed Resolution often referred to in dpi

(distribution of pixels in an image) 300 dpi image

5X7 image at 300dpi resolution =pixel dimensions of 1500X2100

When we create or scan a digital image we are capturing pixel information

Scanners record the color value and brightness of each area of an image when scanned. (resolution/bit depth)

WE decide how much pixel information to capture by setting the resolution as we scan.

The resolution or image dimension determines what we can do with the image (print/video)(resolution determines how large we can print or display our image and still have it be sharp)

The number of bits used to represent the colors of each pixel in an image. The greater the bit depth means more bits of information per pixel. Black & white: 1-bit

one bit to describe each pixel – black & white (on/off) (lineart) Grayscale: 8-bit

256 possible colors (Ex: 256 shades of gray in a grayscale image)

Full Color: 24-bit millions of colors (full color, truecolor) Three 8-bit channels: 256X256X256 = 16 million color combinations Represents a significant portion of the range of colors visible to the human eye

32-bit = CMYK images or RGB images with a 4th Alpha channel

48-bit = generally highest bit-depth available Three 16-bit channels Most software and hardware not able to display this much data

Higher resolution & Higher bit-depth images... Have a larger file size

Contain more pixels can reproduce more detail & subtle color

transitions

Megapixels Resolution

8MP 3264x2448

9MP 3464x2600

10MP 3648x2736

12MP 4000x3000

http://au.news.yahoo.com/technology/photography/article/-/7364542/what-is-a-megapixel/

Images for digital display typically have a lower resolution (72 ppi) – pixel dimension

Image pixels map one-to-one with the display resolution of a monitor

Monitor resolution varies by platform and user configuration

Monitor resolutions http://www.w3schools.com/browsers/brow

sers_display.asp

X

High resolution graphics – not needed online. They just appear larger on screen and take up more file size and bandwidth.

http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7945a.html

Intended use of the graphic will determine Type of file Tool used to create it File format needed

BITMAP IMAGES CONTAIN A FIXED # OF PIXELS!

Good Ducky!Bad Ducky!

Create Archival Master Scanned at highest level possible -

appropriate for your environment Save in uncompressed file format Create all derivative files from the archival

master Back-up Archival Master

The Claremont Colleges Digital Library Scanning Best Practiceshttp://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf

To produce good quality images we must… understand image dimension & resolution

Create or edit the image size to be suitable for our intended use

Start with a good source file (digital image/scan) If you plan to edit or scale the image in any way,

start with a higher resolution image and optimize and compress image for web after all edits are complete.

Resources

Adobe Web Tech CurriculumLesson 5.1: Graphics Basicshttp://www.adobe.com/education/instruction/webtech/CS2/unit_graphics1/gb_print.htm

Scanning Tips by Wayne Fulton http://www.scantips.com/

Claremont Colleges Digital LibraryScanning Best Practiceshttp://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf

Scalable Vector Graphicshttp://www.adobe.com/svg/viewer/install/main.htmlhttp://www.w3.org/TR/SVG/intro.html