dont turn your photoshop off

33
DON’T TURN YOUR PHOTOSHOP OFF today

Upload: igor-napierala

Post on 23-Jun-2015

679 views

Category:

Education


0 download

DESCRIPTION

Presentation about using Photoshop for Web, new tools, color management, saving images for web.

TRANSCRIPT

Page 1: Dont turn your photoshop off

DON’T TURN YOUR PHOTOSHOP OFFtoday

Page 2: Dont turn your photoshop off

Table of contents1. Meet the guys

2. Webdevelopers don’t like Photoshop

3. People will design in Photoshop

4. What should you know before you save image for web?

5. Save for Web and Devices

6. Size matters - case study

7. Dust off your Photoshop

8. Conclusion

Page 3: Dont turn your photoshop off

Hi, I’m JaSON!I’m a developer

Hi, I’m ReGi B!I’m a designer

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.

var MeetTheGuys = {};

Page 4: Dont turn your photoshop off

Webdevelopers don't like Photoshop

Page 5: Dont turn your photoshop off

I code!

Photoshopis for photos

F**KPhotoshop

I make everything in console

There areweb tools

for that

Webdevelopers don't like Photoshop

What aboutyou?

Page 6: Dont turn your photoshop off

People will design in PhotoshopBye, bye Fireworks

Page 7: Dont turn your photoshop off

People will design in Photoshop

it has been taught for many years that designing in Photoshopis integrated part of a website building process

Page 8: Dont turn your photoshop off

Designer vs Developer

- designer doesn't have to know how to code (they are artists, right),

- designer often comes from print world, - doesn't understand that it cannot be done in a simple way

- the web world is not the print world !

Page 9: Dont turn your photoshop off

Photoshop cannot do everything

- responsive design

Page 10: Dont turn your photoshop off

HTML5 and CSS3 for the rescuefroont.com

playground.webflow.com

Page 11: Dont turn your photoshop off

What should you know before yousave image for web?PHOTOSHOP FOR WEBDEVELOPERS

Page 12: Dont turn your photoshop off

RGB/CMYK

Red Green Blue vs Cyan Magenta Yellow Key(Black)

Page 13: Dont turn your photoshop off

Slices- one save for all images

Page 14: Dont turn your photoshop off

Actions

Page 15: Dont turn your photoshop off

Save for Web and Devices

Page 16: Dont turn your photoshop off

Global info - views, size, loading time, preview

Page 17: Dont turn your photoshop off

Resampling quality - surrounding pixels

- Nearest Neighbor- Bilinear- Bicubic- Bicubic Smoother- Bicubic Sharper

Page 18: Dont turn your photoshop off

sRGB - standarised Red, Green, Blue, most representativeWeb standard (W3C) - 16 777 216 colors

Page 19: Dont turn your photoshop off

GIF

color reduction algorithm, dither algorithm, web snap (safe web colors), allowed percent of lossiness in GIF compression

Page 20: Dont turn your photoshop off

JPG

Safari best browser for photographs - supports ICC v2 and ICC v4*IE9 - supports ICC v2 and ICC v4*Firefox - since 3 supports ICC v2Chrome - supports now ICC v2 but was the last one *ICC v4 will give you the best color consistency across devices

Page 21: Dont turn your photoshop off

PNG8 - beats GIF almost always

Page 22: Dont turn your photoshop off

PNG24 - interlaced, transparency, matte

Page 23: Dont turn your photoshop off

Size matters - case study

Page 24: Dont turn your photoshop off

Simple scenario and results (B)Scenario Size JPEGtran

1. ReSave to -> JPG (quality 10) 141  925 6 600

2. Save for Web (100%)-> resize 9 468 8 565

3. Resize -> Save for Web (100%) 9 235 8 326

4. Save for Web (100%/progressive) -> resize 9 439 8 565

5. Resize -> Save for Web (100%/progressive) 9 193 8 326

6. Save for Web (60%/progressive) -> resize 6 589 5 446

7. Resize -> Save for Web (60%/progressive) 6 636 5 723

8. Save for Web (60%) -> resize 6 362 5 446

9. Resize -> Save for Web (60%) 6 295 5 391

141  925 (8 565) - 6 295 (5 391) = 135 630 (3174)

Saving 400x317, JPG from 2400x1900

3.1 kB fromone stupid image?

Page 25: Dont turn your photoshop off

Simple scenario and resultsScenario Size JPEGtran

1. Save to -> JPG (quality 10) 123 236 22 426

2. Save for Web (100%)-> resize 45 609 44 534

3. Resize -> Save for Web (100%) 45 578 44 558

4. Save for Web (100%/progressive) -> resize 43 880 42 421

5. Resize -> Save for Web (100%/progressive) 43 889 42 434

6. Save for Web (60%/progressive) -> resize 14 939 13 625

7. Resize -> Save for Web (60%/progressive) 14 909 13 605

8. Save for Web (60%) -> resize 14 593 13 589

9. Resize -> Save for Web (60%) 14 568 13 547

123 236 (44 558) - 14 568 (13 547) = 108 668 (31 011)

Saving 200x300, JPG from 650x975

Simple scenario and results (B)

Are you allergic to Charlie Chaplin’s cat?

Page 26: Dont turn your photoshop off

Reducing size on PNG- reduce number of colors in the panel

- use a tool:

OptiPNG (40,78 %)

PNGCrush (43,25 %)

PNGOptimizer (54,74 %)

PNGOUT (43,48 %)

PNGWolf (55,56 %)

TruePNG (60,14 %)

http://css-ig.net/png-tools-overview

Page 27: Dont turn your photoshop off

Dust off your Photoshop

Page 28: Dont turn your photoshop off

UI parade / webzapp - quick mockups - http://webzap.uiparade.com/

Page 29: Dont turn your photoshop off

UI parade - devrocket - quick saving for ipad - http://devrocket.uiparade.com/

Page 30: Dont turn your photoshop off

CSS hat - https://csshat.com/

Page 31: Dont turn your photoshop off

Enigma64 - http://getenigma64.com/

Page 32: Dont turn your photoshop off

Save some Bytes on saving images to Web

Use automatic optimalisation

Pimp your Photoshop with time saving plugins

Don’t turn off your PS just change the way you use it

Future things to talk about: WebP, Adobe Refine Edge

Conclusion

Page 33: Dont turn your photoshop off

THANK YOU FOR YOUR TIME