Digital Imaging & Photoshop

Class 2

Introduction to Web Design & Computer Principles CSCI-UA.0004

Photoshop

Created by Thomas Knoll in 1987, originally called Display Acquired by Adobe in 1988 Released as Photoshop 1.0 for Macintosh in 1990 Released the Creative Suite in 2003 One of the first products to become a verb Has become the industry standard for graphic/image manipulation software

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

What does PS do?

Software for manipulating and creating digital images Tools and metaphors from darkroom photography (such as Dodge, Burn, Crop) Mostly uses raster or bitmap graphics Images are made up of pixels

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Vector vs Raster

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Vector Images

Made up of points and paths Forms shapes that are filled with color and outlines Based on mathematical equations Can be scaled infinitely without loosing quality (resolution independent) File size is generally smaller Can always easily be converted to Raster Do not handle photographic imagery well Great for large scale printing, such as banners and sinage Used mostly for logos and illustrations File formats: EPS (Encapsulated PostScript), WMF (Windows Metafile), AI (Adobe Illustrator), CDR (CorelDraw), DXF (AutoCAD), SVG (Scalable Vector Graphics) and PLT (Hewlett Packard Graphics Language Plot

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Raster Images

Images are created with a series of tiny dots called pixels Each pixel stores color information Image resolution is based on how many pixels per inch (ppi) Information is lost when scaled up, resulting in pixelation Fantastic for photographs and detailed images File size can be very large Raster to vector conversion is difficult Great for photography, web design, digital effects File formats: BMP (Windows Bitmap), PCX (Paintbrush), TIFF (Tag Interleave Format), JPEG (Joint Photographics Expert Group), GIF (Graphics Interchange Format) , PNG (Portable Network Graphic), PSD (Adobe PhotoShop) and CPT (Corel PhotoPAINT).

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

The Powerful Pixel

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

PIXELS

A pixel is the smallest unity of information in a raster graphic It has a specific location and can be found in the grid of a graphic Each pixel holds specific color information

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

PIXELS & RESOLUTION

The number of pixels per inch refers to its resolution Graphics with higher resolution have more pixel density and better quality Standard resolution for screen based images is 72 dpi (dots per inch) Standard resolution for print is 300 dpi or higher Document or Canvas size specifies the height and width of an image but does not refer to the images resolution

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

How Computers Store Data?

Computers are constructed of digital electronics Like all electronics, their circuits can be either ON or OFF These circuits are used to store patterns of numbers using the binary number system A bit (short for binary digit) is the basic unit of information in computing (0 or 1) Bit depth is the number of bits used to describe a single pixel More bits = More colors 1-bit = 2 colors, 8-bit = 256 colors, 24-bit = 16.7 million colors

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Compression

Compression is when algorithms minimize your file size Different file types used different compression algorithms Lossy - some data is discarded and approximated resulting in smaller file size Lossless - original data is reconstructed resulting in a more accurate file with a larger file size

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Types

TIFF GIF JPG PNG RAW

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Types - TIFF

Stands for Tagged Image File Format .tif or .tiff Bitmap or raster graphics Good for high-color depth images Can handle large file sizes Lossless Originally designed for scan and print output Preserves photoshop layers

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Types - GIF

Stands for Graphic Information Format .gif Only holds 256 colors Great for flat simple graphics Smaller file size Lossless Can have transparency Supports animation (Animated GIF)

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Types - JPEG

Stands for Joint Photographic Experts Group .jpeg or .jpg Can hold millions of colors Lossy Great for photographs or detailed images

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Types - PNG

Stands for Professional Network Graphics .png Can hold millions of colors Lossless Preserves transparency and gradients Newest image format

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

File Size

File size is determined by:

Bit depth Image dimensions Image resolution File Type

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Bits, Bytes, Etc

1 Bit = 8 Bytes 1024 Bytes = 1 Kilobyte (KB) 1024 Kilobytes = 1 Megabyte (MB) 1024 Megabytes = 1 Gigabyte (GB) 1024 Gigabytes = 1 Terabyte (TB)

Standard images for the web should be as small as possible, somewhere between 5 - 500 kilobytes Images can be up to several hundred megabytes

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

COLOR!

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Representing Color

RGB CMYK HSV HEX

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Color - RGB

RGB - Red, Green, Blue Additive Color Light is added together 100% of each makes White, 0% makes black Values for RGB are specified as a number between 0 and 255 Color mode is standard for anything digital that will be viewed on a screen

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Color - CMYK

CMYK - Cyan, Yellow, Magenta, Black (Key Color) Subtractive Color Light is removed as ink is added 100% of each makes Black, 0% makes White Values for CMYK are specified as a percentage between 0 and a 100 Color mode is standard for anything that will be printed

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Color - HSB

HSB = Hue, Saturation, Brightness Hue: the similarity to a perceived color (RYBG) or combination of these colors (in degrees) Saturation: colorfulness or purity of color relative to brightness (%) Brightness: the appearance of emitting more or less light (%)

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Color - HEX CODES

A pair of digits and letters that represent R,G,B values Each digit represents a number a number between 0 and 255 Hex codes are based on a 16 digit system (0 to F)

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Color - HEX CODES

HEX codes are considered web safe colors There are 256 color values that are represented

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Converting RGB to HEX

R G CC 66
204
#CC start with the left number, multiply by 16: 12 * 16 = 192 then add the right number: 192 + 12 = 204

B 0
0

102

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Lets Look at Photoshop

New documents Getting to know the interface Toolbars, panels and windows // zooming and navigating the document Image size Opening files and adding them to your document The history panel

Introduction to Web Design & Computer Principles CSCI-UA.0004-003

Reading for Next Week

Chapter 2: Opening, Viewing and Saving Files Chapter 3: Layers Chapter 4: Selections

Introduction to Web Design & Computer Principles CSCI-UA.0004-003