Foundations of Web Design IPhotoshop CS5

www.audioscribedesigns.com/webdesign/

Michael Danielmfdaniel126@mail.cfcc.edu

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