DON’T TURN YOUR PHOTOSHOP OFFtoday

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

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 = {};

Webdevelopers don't like Photoshop

I code!

Photoshopis for photos

F**KPhotoshop

I make everything in console

There areweb tools

for that

Webdevelopers don't like Photoshop

What aboutyou?

People will design in PhotoshopBye, bye Fireworks

People will design in Photoshop

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

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 !

Photoshop cannot do everything

- responsive design

HTML5 and CSS3 for the rescuefroont.com

playground.webflow.com

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

RGB/CMYK

Red Green Blue vs Cyan Magenta Yellow Key(Black)

Slices- one save for all images

Actions

Save for Web and Devices

Global info - views, size, loading time, preview

Resampling quality - surrounding pixels

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

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

GIF

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

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

PNG8 - beats GIF almost always

PNG24 - interlaced, transparency, matte

Size matters - case study

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?

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?

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

Dust off your Photoshop

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

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

CSS hat - https://csshat.com/

Enigma64 - http://getenigma64.com/

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

THANK YOU FOR YOUR TIME