THEORY by ashrafp

VIEWS: 6 PAGES: 20

									Photoshop: Designing Graphics for the Web
                     Overview
• Photoshop Basics
  – What is Photoshop?
  – Uses
  – Tour
• Web Graphics
  –   Graphic Limitations
  –   Display Considerations
  –   Cross-Platform/Browser-Safe Palette
  –   File Formats
  –   Transparent Text
  –   Saving for the Web
            What is Photoshop?
Photo retouching, image editing, and color
painting program; graphic design tool

• Create high-quality digital images
• Special effects capabilities
• And lots more…..
             Uses of Photoshop

•   Art (line drawings, charcoal, color original)
•   Photographic
•   Restoration
•   WWW (GIFS, JPEGS, etc.)
•   Special Effects
       Touring Photoshop

• Using Help
• Navigating: Windows, Palettes,
  Features & Tools
• Preferences
    Graphic Limitations

• Connection Speeds
• User Configurations
   Display Considerations

• Screen Sizes
• Colors
Cross Platform/Browser-Safe Colors

• 256 vs. 216 Colors
• Dithering
• Using the Color Picker
             File Formats

• JPEG – Joint Photographic Experts Group
• GIF – Graphics Interchange Format
• PNG – Portable Network Graphics
                  JPEG


• Uses 16 million colors
• Browsers use reasonable approximations
• Saving (Standard, Optimized, Progressive)
                    GIF



• Best for solid color images (buttons, logos)
• Uses 256 colors
               PNG (8-bit)



• Best for line art (logos)
• If considering saving as GIF, also consider
  saving as PNG (8-bit)
             PNG (24-bit)

• Best for continuous-tone images
• Compresses well, but can be larger than
  JPEGs
• If considering saving as JPEG, could also
  consider PNG (24-bit)
• Not supported by older browsers
 JPEG vs PNG



     Comparison
     of JPEG and
         PNG


68K PNG       31K JPG
                GIF vs PNG



                     Comparison
                     of JPEG and
                         PNG
10.8K PNG-8 with 64 colors    9.5K GIF with 64 colors
     Scanning Concepts
•   Getting Images Into Photoshop
•   Bitmap vs. Vector Graphics
•   Pixel Dimensions
•   Image Resolution
•   Monitor Resolution
•   Printer Resolution
•   Screen Frequency
•   File Size
    Evaluating Originals

•   Color Range
•   Contrast
•   Size
•   Good Original
•   Shadow & Highlight Detail
•   Tonal Corrections
   Scanning Photographic Images

  Scan       Screen                     Sizing
Resolution = Ruling   X   Quality   X
                                        Factor



    Sizing
             =   Desired Size/Original Size
    Factor
    Basic Image Correction
•   Examine the Original
•   Scan the Original
•   Identify the Image Colors & Tones
•   Measure & Adjust Highlights
•   Measure & Adjust Shadows
•   Measure & Adjust Midtones
•   Apply Unsharp Mask
•   Save File
•   Review Image for Rescanning or Additional
    Corrections
   Conclusion

Questions & Answers

Thank You!!!

								
To top