Foundations of Web Design I Photoshop CS5 Michael Daniel [email protected].
-
Upload
christal-mills -
Category
Documents
-
view
213 -
download
1
Transcript of Foundations of Web Design I Photoshop CS5 Michael Daniel [email protected].
![Page 1: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/1.jpg)
Foundations of Web Design IPhotoshop CS5
www.audioscribedesigns.com/webdesign/
Michael [email protected]
![Page 2: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/2.jpg)
Basic Theory Bitmaps & Vectors Pixels & Resolution RGB & CMYK Color Models
![Page 3: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/3.jpg)
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.
![Page 4: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/4.jpg)
Vectors Can be scaled up or down and they will still print
smoothly and crisply.
![Page 5: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/5.jpg)
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.
![Page 6: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/6.jpg)
Pixels & Resolution Resolution
75 Pixels are used for web based designs. 300 to 400 Pixels are used for print
media.
![Page 7: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/7.jpg)
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.
![Page 8: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/8.jpg)
RGB & CMYK Color Models CMYK (Cyan, Magenta, Yellow & Black
Color model used by printing presses.
![Page 9: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/9.jpg)
The Working Environment Screen modes Using the Tool Panel Document & Scratch Sizes Ruler Guides & Grids Info Panel Panel Techniques
![Page 10: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/10.jpg)
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.
![Page 11: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/11.jpg)
Screen Modes Full Screen Mode with Menu Bar – Useful
for working on individual images, because it clears away the clutter of the desktop.
![Page 12: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/12.jpg)
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.
![Page 13: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/13.jpg)
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.
![Page 14: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/14.jpg)
Ruler Guides & Grid These tools help to align your design
elements.
![Page 15: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/15.jpg)
Information Panel Provides useful numerical readouts,
relative to the position of the cursor on your image.
![Page 16: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/16.jpg)
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.
![Page 17: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/17.jpg)
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.
![Page 18: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/18.jpg)
Save Files JPEG
Higher the resolution, the sharper the image.
As file size lowers, the image becomes more blurry.
Supports millions of colors.
![Page 19: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/19.jpg)
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
![Page 20: Foundations of Web Design I Photoshop CS5 Michael Daniel mfdaniel126@mail.cfcc.edu.](https://reader035.fdocuments.net/reader035/viewer/2022072014/56649e7a5503460f94b7ac35/html5/thumbnails/20.jpg)
Save Files GIF
Supports Animation and Transparency Popular with web graphics