Image Manipulation & Photoshop

Preparing Images for Web and Print

Rachael Arnold • @raevenfea • rae.arnold@gmail.com
Vermont Works for Women • Step Up to IT

Hello There

Basic photo editing skills are useful regardless of career path, but are vital for Web design and development.

Ready for the essentials?

Image Types

Rasters get fuzzy when expanded vs. Vectors can be sized up without impacting the quality

Raster Images

Rasters get fuzzy when expanded

JPG, PNG, GIF, TIF
(and many others…)

  • Made of Pixels (Bitmaps)
  • Used for most web graphics
  • Cannot be enlarged without blurring
  • Specific advantages for each file type

Raster File Types

When to use JPG vs PNG. Source: http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/

Source: http://lbrandy.com/blog/2008/10/my-first-and-last-webcomic/

Raster File Types

Format Lossless? Alpha? Web? Usage
.jpg Photos
.png Web graphics, especially with text
.gif Animated graphics
.tif Archival format for photos, not for web use

Vector Images

Vectors can scale to any size

EPS, SVG, PDF, AI

  • Made with math (paths, XML)
  • SVG created for web use, others are mainly print
  • Can be scaled up without losing quality

Vector File Types

Format Web? Usage
.eps Most widely-supported, universal print use
.svg Web vector graphics, building web fonts
.pdf Documents for web download, forms, printing. Can technically be edited in many vector graphics programs, but not best practice.
.ai Adobe Illustrator’s updated .eps. Not universal, but common in printing

A Quick Look at SVG

SVG icon

An Example of SVG Manipulation

|

Image Resolution and Quality

Aspect Ratio

5:4 4:3 3:2 16:9 16:10 1:1

Aspect Ratio

5:4 4:3 3:2 16:9 16:10 1:1

Orientation

Landscape is wide Landscape is wide
Portrait is tall Portrait is tall

Web / Screen Resolution

Screenshot of Photoshop Document Size screen, resolution higlighted

Web / Screen Resolution

Size of Web images depends on the project, audience, and supported devices but a few rules include:

  • Create the correct-sized raster images rather than scaling with CSS
  • Use SVGs for logos and iconography so it can scale
  • Serve different-sized backgrounds with CSS media queries

Print DPI

Screenshot of Photoshop Document Size screen, document size highlighted

Print DPI

Minimum print quality is 300 DPI

This .3 MP image will print at ~2.1x1.6"—tiny!

But it's great for Web use

Print DPI

You need at least 2 MP (1600x1200px) for a reasonable 4x6" photo print

Double that for a full-page graphic

But this size is too large for Web use (except in the case of background images)

Remember

DPI (or Document Size) in Photoshop has no effect on screen display size.

Screens are all about pixels.

Manipulation Basics:
Resizing and Cropping

Manipulation Basics:
Resizing and Cropping

PHOTOSHOP DEMO

Many image editing programs allow you to resize and crop your photos if you don't have Photoshop.

Optimizing Images
for the Web and Print

Compression

Lossy: affects the quality of the image. High-levels of compression can be very obvious, causing "artifacts".

vs.

Lossless: does not affect the visual quality of the image. Works by using a variety of compression algorithms and strips unneeded metadata.

Optimizing for the Web

  1. Size the image for the specific use
  2. Choose the right format
  3. Save for Web and try additional compression*

Photoshop isn't always great at compressing (PNGs in particular). Consider services that will further compress, like TinyPNG/TinyJPG (lossy) or Kraken (either).

Optimizing for Print

  1. Check your aspect ratios and resolution: an 8.5x11" document won't look right on 11x17" paper.
  2. Check with your printer for guidelines on color profile and color mode (RGB or CMYK)
  3. Convert to PDF if the printer can't support AI/EPS (or their requested format)

DEMO

Slicing up an image
Save for Web and Devices in Photoshop

Let's look at how to chop up a design comp and save the images in the formats we need for the web.

Questions
???
and Lab Time