Foundations of Web Design I Photoshop CS5 Michael Daniel

Basic Theory  Bitmaps & Vectors  Pixels & Resolution  RGB & CMYK Color Models

Bitmaps  Consists of a rectangular grid, or raster, of pixels. When you edit a bitmap, you are editing the color values of individual pixels, or groups of pixels.  Created at a set resolution – a fixed number of pixels per inch.

Vectors  Can be scaled up or down and they will still print smoothly and crisply.

Pixels & Resolution  Pixel  The smallest element in a bitmap image captured by a digital camera or scanner.  Pixel is short for “Picture Element”.  When working in Photoshop, you are editing pixels, changing their color, shade, and brightness.

Pixels & Resolution  Resolution  75 Pixels are used for web based designs.  300 to 400 Pixels are used for print media.

RGB & CMYK Color Models  RGB (Red, Green, Blue)  Mirrors the way the human eye perceived color.  The model used by scanners and digital cameras to capture color information in digital format  The way your computer monitor describes color.

RGB & CMYK Color Models  CMYK (Cyan, Magenta, Yellow & Black  Color model used by printing presses.

The Working Environment  Screen modes  Using the Tool Panel  Document & Scratch Sizes  Ruler Guides & Grids  Info Panel  Panel Techniques

Screen Modes  They are located on the right of the Photoshop menu bar. You can use the keyboard shortcut – “F” – to cycle between screen modes.  Full Screen Mode – Use Full Screen Mode to see the image on a black background, without the distraction of other screen elements, and without any other colors interfering with the colors in your image. Press the “Tab” key to show/hide the menu bar and panels.

Screen Modes  Full Screen Mode with Menu Bar – Useful for working on individual images, because it clears away the clutter of the desktop.

Document & Scratch Sizes  Document Sizes  With document sizes selected, you see two numbers separated by a slash. The first number is the size of the image with all layers flattened. The second number may be larger, and represents the file storage size whilst the image contains additional layers and/or alpha channels you may have set up.

Document & Scratch Sizes  Scratch Sizes  The first number represents the amount of memory Photoshop needs to handle all currently open pictures. The second number represents the actual amount of memory available to Photoshop. When the first number is greater than the second, Photoshop is using the Scratch disk as virtual memory.

Ruler Guides & Grid  These tools help to align your design elements.

Information Panel  Provides useful numerical readouts, relative to the position of the cursor on your image.

Panel Techniques  To provide complete flexibility in the way you manage panels, each panel can be made into a floating panel, or you can combine panels into your own custom groupings.

Save Files  TIFF (Tagged Image File Format)  Often used as a source file.  Mainly used in printing applications  File size is larger than what is suitable for the web.

Save Files  JPEG  Higher the resolution, the sharper the image.  As file size lowers, the image becomes more blurry.  Supports millions of colors.

Save Files  PNG  Supports millions of colors  Uses lossless compression  Supports Alpha Transparency  Not supported in all browsers  Photoshop allows you to save PNG-8 and PNG-24

Save Files  GIF  Supports Animation and Transparency  Popular with web graphics