This document discusses how Photoshop can still be useful for web designers despite developers' dislike of it. It provides tips for using Photoshop to design for the web, including understanding file types like JPEG, PNG and GIF, as well as how to properly save images using the "Save for Web" feature while reducing file size. The document encourages designers not to abandon Photoshop altogether but to optimize how they use it for web design.

1. DON’T TURN YOUR PHOTOSHOP OFF
today

2. Table of contents
1. 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

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

4. Webdevelopers don't like Photoshop

5. I code!
Photoshop
is for photos
F**K
Photoshop
I make
everything
in console
There are
web tools
for that
Webdevelopers don't like Photoshop
What about
you?

6. People will design in Photoshop
Bye, bye Fireworks

7. People will design in Photoshop
it has been taught for many years
that designing in Photoshop
is integrated part of a website building process

8. 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 !

9. Photoshop cannot do everything
- responsive design

10. HTML5 and CSS3 for the rescue
froont.com
playground.webflow.com

11. What should you know before you
save image for web?
PHOTOSHOP FOR WEBDEVELOPERS

12. RGB/CMYK
Red Green Blue vs Cyan Magenta Yellow Key(Black)

13. Slices
- one save for all images

14. Actions

15. Save for Web and Devices

16. Global info - views, size, loading time, preview

17. Resampling quality -surrounding pixels
- Nearest Neighbor
- Bilinear
- Bicubic
- Bicubic Smoother
- Bicubic Sharper

18. sRGB - standarised Red, Green, Blue, most representative
Web standard (W3C) - 16 777 216 colors

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

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

21. PNG8 - beats GIF almost always

22. PNG24 - interlaced, transparency, matte

23. Size matters - case study

24. Simple scenario and results (B)
Scenario Size JPEGtran
1.ReSaveto->JPG(quality10) 141 925 6 600
2.SaveforWeb(100%)->resize 9468 8565
3.Resize->SaveforWeb(100%) 9235 8326
4.SaveforWeb(100%/progressive)->resize 9439 8565
5.Resize->SaveforWeb(100%/progressive) 9193 8326
6.SaveforWeb(60%/progressive)->resize 6589 5446
7.Resize->SaveforWeb(60%/progressive) 6636 5723
8.SaveforWeb(60%)->resize 6362 5446
9.Resize->SaveforWeb(60%) 6295 5391
141 925(8565)-6295(5391)=135630(3174)
Saving400x317,JPGfrom2400x1900
3.1 kB from
one stupid image?

25. Simple scenario and results
Scenario Size JPEGtran
1.Saveto->JPG(quality10) 123236 22426
2.SaveforWeb(100%)->resize 45609 44534
3.Resize->SaveforWeb(100%) 45578 44558
4.SaveforWeb(100%/progressive)->resize 43880 42421
5.Resize->SaveforWeb(100%/progressive) 43889 42434
6.SaveforWeb(60%/progressive)->resize 14939 13625
7.Resize->SaveforWeb(60%/progressive) 14909 13605
8.SaveforWeb(60%)->resize 14593 13589
9.Resize->SaveforWeb(60%) 14568 13547
123236(44558)-14568(13547)=108668(31011)
Saving200x300,JPGfrom650x975
Simple scenario and results (B)
Are you allergic to
Charlie Chaplin’s cat?

26. 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

27. Dust off your Photoshop

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

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

30. CSS hat - https://csshat.com/

31. Enigma64 - http://getenigma64.com/

32. 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

33. THANK YOU FOR YOUR TIME