photoshop designing graphics for the web n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Photoshop: Designing Graphics for the Web PowerPoint Presentation
Download Presentation
Photoshop: Designing Graphics for the Web

Loading in 2 Seconds...

play fullscreen
1 / 27

Photoshop: Designing Graphics for the Web - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

Photoshop: Designing Graphics for the Web. Christine Vucinich & Vicki Weidler. ITS Training Services 224 B Computer Building University Park, PA 16802 seminars@psu.edu http://cac.psu.edu/training/. Overview. Photoshop Basics What is Photoshop? Uses Tour Web Graphics

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 'Photoshop: Designing Graphics for the Web' - arin


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
photoshop designing graphics for the web

Photoshop: Designing Graphics for the Web

Christine Vucinich & Vicki Weidler

ITS Training Services

224 B Computer Building

University Park, PA 16802

seminars@psu.edu

http://cac.psu.edu/training/

overview
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
overview continued
Overview Continued
  • Scanning
    • Scanning Concepts
    • Evaluating Originals
    • Scanning Line Art vs. Photographic Images
    • Scanning Strategies
    • Photoshop Measurement/Correction Tools
    • Additional Resources
what is photoshop
What is Photoshop?

Photo retouching, image editing, and color

painting program; graphic design tool

  • Create high-quality digital images
  • Tools & special effects capabilities
  • Manipulate scanned images, slides, & original artwork
  • Isolate parts of an image for experimentation & individual editing
  • And lots more…..
uses of photoshop
Uses of Photoshop
  • Art (line drawings, charcoal, color original)
  • Photographic
  • Restoration
  • WWW (GIFS, JPEGS, etc.)
  • Montage
  • Halftones, Duotones, Tritones, Quadtones
  • Color Separations
  • Posterizations
  • Special Effects
touring photoshop
Touring Photoshop
  • Using Help
  • Navigating: Windows, Palettes, Features & Tools
  • Preferences
graphic limitations
Graphic Limitations
  • Connection Speeds
  • User Configurations
display considerations
Display Considerations
  • Screen Sizes
  • Colors
cross platform browser safe colors
Cross Platform/Browser-Safe Colors
  • 256 vs. 216 Colors
  • Dithering
  • Using the Color Picker
file formats
File Formats
  • JPEG – Joint Photographic Experts Group
  • GIF – Graphics Interchange Format
  • PNG – Portable Network Graphics
slide11
JPEG
  • Best for photos or continuous tone, full-color images
  • Uses 16 million colors
  • Browsers use reasonable approximations
  • Work in RGB mode
  • Uses lossy compression
  • Saving (Standard, Optimized, Progressive)
slide12
GIF
  • Best for solid color images (buttons, logos)
  • Uses 256 colors
  • Browsers uses 216 colors
  • Work in Indexed mode
  • Good compression
  • Interlaced
png 8 bit
PNG (8-bit)
  • Best for line art (logos)
  • Compresses solid areas of color well and maintains sharp detail
  • Generally, has better compression than GIF (10-30% smaller)
  • If considering saving as GIF, also consider saving as PNG (8-bit)
  • Not supported by older browsers
png 24 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
JPEG vs PNG

Comparison of JPEG and PNG

68K PNG

31K JPG

gif vs png
GIF vs PNG

Comparison of JPEG and PNG

10.8K PNG-8 with 64 colors

9.5K GIF with 64 colors

transparent text
Transparent Text

Web Graphics

saving for the web
Saving for the Web
  • 4-Up View
  • File Sizes and Download Speeds
  • Changing Options
  • Halo Effect and Matte Options
scanning concepts
Getting Images Into Photoshop

Bitmap vs. Vector Graphics

Pixel Dimensions

Image Resolution

Monitor Resolution

Printer Resolution

Screen Frequency

File Size

Scanning Concepts
evaluating originals
Color Range

Contrast

Size

Good Original

Shadow & Highlight Detail

Tonal Corrections

Evaluating Originals
scanning line art
Scanning Line Art

Output Device Resolution

Sizing Factor

Scan Resolution

=

X

scanning photographic images
Scanning Photographic Images

SizingFactor

Scan

Resolution

Screen

Ruling

Quality

Factor

=

X

X

SizingFactor

Desired Size/Original Size

=

basic image correction
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
color tonal adjustments
Color & Tonal Adjustments
  • Histograms
  • Navigator Palette
  • Gamma Settings
  • Curve Controls
  • Unsharp Mask Filter
summary
Summary
  • 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
summary continued
Summary Continued
  • Scanning
    • Scanning Concepts
    • Evaluating Originals
    • Scanning Line Art vs. Photographic Images
    • Scanning Strategies
    • Photoshop Measurement/Correction Tools
    • Additional Resources
conclusion

Conclusion

Questions & Answers

Additional Resources

Thank You!!!