Post on 29-Dec-2015
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