foundations of web design i n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Foundations of Web Design I PowerPoint Presentation
Download Presentation
Foundations of Web Design I

Loading in 2 Seconds...

play fullscreen
1 / 20

Foundations of Web Design I - PowerPoint PPT Presentation


  • 118 Views
  • Uploaded on

Foundations of Web Design I. Photoshop CS5. Michael Daniel. mfdaniel126@mail.cfcc.edu. www.audioscribedesigns.com/webdesign /. Basic Theory. Bitmaps & Vectors Pixels & Resolution RGB & CMYK Color Models. Bitmaps.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Foundations of Web Design I' - aulii


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
foundations of web design i

Foundations of Web Design I

Photoshop CS5

MichaelDaniel

mfdaniel126@mail.cfcc.edu

www.audioscribedesigns.com/webdesign/

basic theory
Basic Theory
  • Bitmaps & Vectors
  • Pixels & Resolution
  • RGB & CMYK Color Models
bitmaps
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
Vectors
  • Can be scaled up or down and they will still print smoothly and crisply.
pixels resolution
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 resolution1
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 & 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 models1
RGB & CMYK Color Models
  • CMYK (Cyan, Magenta, Yellow & Black
    • Color model used by printing presses.
the working environment
The Working Environment
  • Screen modes
  • Using the Tool Panel
  • Document & Scratch Sizes
  • Ruler Guides & Grids
  • Info Panel
  • Panel Techniques
screen modes
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 modes1
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 & 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 sizes1
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
Ruler Guides & Grid
  • These tools help to align your design elements.
information panel
Information Panel
  • Provides useful numerical readouts, relative to the position of the cursor on your image.
panel techniques
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
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 files1
Save Files
  • JPEG
    • Higher the resolution, the sharper the image.
    • As file size lowers, the image becomes more blurry.
    • Supports millions of colors.
save files2
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 files3
Save Files
  • GIF
    • Supports Animation and Transparency
    • Popular with web graphics