NCET Tech Bite - Photoshop - July 2015

Adobe Photoshop What Everyone Should Know Ron Marston 1

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Photoshop •  Preeminent pixel image editing software •  First introduced by Adobe in 1989 •  Current version - CC 2015 (version 16)

•  Photoshop Lightroom •  for photographers

•  Photoshop Elements •  Scaled down version

•  Photoshop Express •  Mobile device version

2

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

In Photoshop, it’s all about

3

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Resolution •  Pixels Per Inch (PPI) or (DPI)

•  Number of pixels per linear inch of the image •  for sized digital images •  for screen resolutions

•  Megapixels •  Total number of pixels in the file, in millions.

•  for camera resolution •  Megapixes/image H x W = PPI2

4

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Resolution – how much do you need?

•  Printed Media: 300 ppi •  180 ppi - newspaper or low quality

•  240 ppi - most commercial printing •  360 ppi - gallery quality photo prints

5

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


•  Screen Based Media: 72 ppi (?) •  wide range of screen sizes

6

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


•  Screen Based Media: 72 ppi – 577 ppi •  72 ppi “old-school” - still hanging around

•  don’t use it!

•  96-132 ppi - most computer/tablet displays •  25” desktop monitor – 96 ppi •  iPad – 132 ppi

•  300-400+ ppi – most modern smart phones •  iPhone 5/6 – Retina display - 326 ppi •  iPhone 6 Plus – Retina display - 401 ppi •  Samsung Galaxy S6 – HD display - 577 ppi

7

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


•  Smaller Screens have higher PPI resolutions •  Images display smaller on

smaller screens •  HD or Retina displays 2x or 3x

resolution

8

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


•  HD Smart Phones recalculate PPI for display •  iPhone 4/5/6 up-samples @ 2x (auto-scaling)

•  iPhone 6 Plus up-samples @ 3x •  326 ppi — 163 ppi •  401 ppi — 134 ppi

9

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


•  Bottom Line for Screen Resolution: •  Don’t use 72 ppi or 577 ppi

•  For most images @ 110 ppi (96 ppi – 132 ppi) •  Video: 1080p (1920 x 1080 pixels)

4K (4096 x 2160 pixels) 5K (5120 x 2880 pixels)

•  Photoshop CC 2015 •  New Device Preview feature for real time preview on any device. •  New Artboards feature to accommodate multiple sizes/layouts 10

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

PPI and Megapixels •  Megapixes/image H x W = PPI2

•  Example: want 8” x 10” for print @ 300 ppi

•  How many megapixels do I need?

11

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

PPI and Megapixels •  Megapixes/image H x W = PPI2

•  Example: want 8” x 10” for print @ 300 ppi

•  How many megapixels do I need? 80 in2 x 300 x 300 = 7.2 megapixels

12

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

File Formats (digital Tupperware)

•  Common formats for pixel images: •  JPEG

•  PNG •  GIF

•  TIF •  EPS •  PSD (Photoshop “master” file)

13

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

File Formats

•  JPEG (Joint Photographic Experts Group) •  Web friendly, highly compressed, adjustable lossy

compression, no transparency support

•  Good for: photographic images with lots of color

•  Bad for: logos, type, vector art, charts and graphs

14

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

File Formats

•  PNG(8) and GIF •  Web friendly, colors limited to 256,

transparency support

•  Good for: logos, type, vector art, charts and graphs

•  Bad for: photographic images with lots of color

15

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

File Formats PNG/GIF vs. JPEG

PNG/GIF JPEG

16

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

File Formats •  GIF also support simple frame animation

•  Done in Photoshop with Puppet Warp tool

17

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

File Formats •  TIFF (Tagged Image File Format)

•  Print only, lossless, high quality format, large files

•  EPS (Encapsulated Postscript) •  Print only, works for pixels and vectors,

older format not commonly used anymore

18

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

What not to use Photoshop for •  Multiple page documents with little imagery

(brochures, résumé, stationery, etc.) •  Use Word or InDesign

•  Logos, vector artwork •  Use Illustrator

19

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Quick Tips: Six Key Attributes get the most out of every image with Photoshop

•  Resolution •  Values •  Hues •  Saturation •  Sharpness •  File Format

20

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Six Key Attributes get the most out of every image with Photoshop

1. Resolution •  Essential first step – know the size and how much

resolution you need •  300 ppi for print, 110 ppi for screen (at size)

•  Photoshop Tools: Crop Tool Image Size Canvas Size 21

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


2. Values (lights and darks) •  Human eye is most sensitive to values.

•  Photoshop Adjustments: (use Adjustment Layers for non-destructive edits)

Histogram Brightness/Contrast Levels Curves Camera Raw Filter

22

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


3. Hues (color) •  Color casts can change the overall look or mood of

an image. •  Photoshop Adjustments:

Simple: Color Balance, Photo Filter Advanced: Levels, Curves, Camera Raw

23

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


4. Saturation (vividness or purity of color) •  Get colors to pop, or subdue colors

•  Photoshop Adjustments: Hue/Saturation Vibrance Curves Camera Raw Filter

24

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


5. Sharpness (edge detail, crispness) •  Increase visibility of fine details in your images

•  Photoshop Filters: Use Smart Objects for non-destructive edits Smart Sharpen Unsharp Mask Camera Raw Filter

25

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15


6. File Format •  Choose the best File Format for your image

•  Photoshop Tools: Save for Web – better than “Save As” allows for greater optimization of file

26

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Photoshop versatility get the most out of every image with Photoshop

27

•  Photoshop also works with, and can create: •  Video files

•  3D content •  Animation

•  Vector images •  Painterly images from scratch •  RAW camera files

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Questions?

Email Ron Marston:

[email protected] Register for Fall classes at TMCC.edu

28

NC

ET

Tec

h Bi

te

Ron

Mar

ston

7.2

2.20

15

Education

NCET Tech Bite - Photoshop - July 2015