DON’T TURN YOUR PHOTOSHOP OFFtoday
Table of contents1. Meet the guys2. Webdevelopers don’t like Photoshop3. People will design in Photoshop4. What should you...
Hi, I’m JaSON!I’m a developerHi, I’m ReGi B!I’m a designer1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.2...
Webdevelopers dont like Photoshop
I code!Photoshopis for photosF**KPhotoshopI makeeverythingin consoleThere areweb toolsfor thatWebdevelopers dont like Phot...
People will design in PhotoshopBye, bye Fireworks
People will design in Photoshopit has been taught for many yearsthat designing in Photoshopis integrated part of a website...
Designer vs Developer- designer doesnt have to know how to code (they are artists, right),- designer often comes from prin...
Photoshop cannot do everything- responsive design
HTML5 and CSS3 for the rescuefroont.complayground.webflow.com
What should you know before yousave image for web?PHOTOSHOP FOR WEBDEVELOPERS
RGB/CMYKRed 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
GIFcolor reduction algorithm, dither algorithm, web snap (safe web colors), allowed percent of lossiness in GIF compression
JPGSafari best browser for photographs - supports ICC v2 and ICC v4*IE9 - supports ICC v2 and ICC v4*Firefox - since 3 sup...
PNG8 - beats GIF almost always
PNG24 - interlaced, transparency, matte
Size matters - case study
Simple scenario and results (B)Scenario Size JPEGtran1.ReSaveto->JPG(quality10) 141 925 6 6002.SaveforWeb(100%)->resize 94...
Simple scenario and resultsScenario Size JPEGtran1.Saveto->JPG(quality10) 123236 224262.SaveforWeb(100%)->resize 45609 445...
Reducing size on PNG- reduce number of colors in the panel- use a tool:OptiPNG (40,78 %)PNGCrush (43,25 %)PNGOptimizer (54...
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 WebUse automatic optimalisationPimp your Photoshop with time saving pluginsDon’t turn ...
THANK YOU FOR YOUR TIME
Upcoming SlideShare
Loading in …5
×

Dont turn your photoshop off

1,304 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,304
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dont turn your photoshop off

  1. 1. DON’T TURN YOUR PHOTOSHOP OFFtoday
  2. 2. Table of contents1. Meet the guys2. Webdevelopers don’t like Photoshop3. People will design in Photoshop4. What should you know before you save image for web?5. Save for Web and Devices6. Size matters - case study7. Dust off your Photoshop8. Conclusion
  3. 3. Hi, I’m JaSON!I’m a developerHi, I’m ReGi B!I’m a designer1.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. 4. Webdevelopers dont like Photoshop
  5. 5. I code!Photoshopis for photosF**KPhotoshopI makeeverythingin consoleThere areweb toolsfor thatWebdevelopers dont like PhotoshopWhat aboutyou?
  6. 6. People will design in PhotoshopBye, bye Fireworks
  7. 7. People will design in Photoshopit has been taught for many yearsthat designing in Photoshopis integrated part of a website building process
  8. 8. Designer vs Developer- designer doesnt have to know how to code (they are artists, right),- designer often comes from print world,- doesnt understand that it cannot be done in a simple way- the web world is not the print world !
  9. 9. Photoshop cannot do everything- responsive design
  10. 10. HTML5 and CSS3 for the rescuefroont.complayground.webflow.com
  11. 11. What should you know before yousave image for web?PHOTOSHOP FOR WEBDEVELOPERS
  12. 12. RGB/CMYKRed Green Blue vs Cyan Magenta Yellow Key(Black)
  13. 13. Slices- one save for all images
  14. 14. Actions
  15. 15. Save for Web and Devices
  16. 16. Global info - views, size, loading time, preview
  17. 17. Resampling quality -surrounding pixels- Nearest Neighbor- Bilinear- Bicubic- Bicubic Smoother- Bicubic Sharper
  18. 18. sRGB - standarised Red, Green, Blue, most representativeWeb standard (W3C) - 16 777 216 colors
  19. 19. GIFcolor reduction algorithm, dither algorithm, web snap (safe web colors), allowed percent of lossiness in GIF compression
  20. 20. JPGSafari 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
  21. 21. PNG8 - beats GIF almost always
  22. 22. PNG24 - interlaced, transparency, matte
  23. 23. Size matters - case study
  24. 24. Simple scenario and results (B)Scenario Size JPEGtran1.ReSaveto->JPG(quality10) 141 925 6 6002.SaveforWeb(100%)->resize 9468 85653.Resize->SaveforWeb(100%) 9235 83264.SaveforWeb(100%/progressive)->resize 9439 85655.Resize->SaveforWeb(100%/progressive) 9193 83266.SaveforWeb(60%/progressive)->resize 6589 54467.Resize->SaveforWeb(60%/progressive) 6636 57238.SaveforWeb(60%)->resize 6362 54469.Resize->SaveforWeb(60%) 6295 5391141 925(8565)-6295(5391)=135630(3174)Saving400x317,JPGfrom2400x19003.1 kB fromone stupid image?
  25. 25. Simple scenario and resultsScenario Size JPEGtran1.Saveto->JPG(quality10) 123236 224262.SaveforWeb(100%)->resize 45609 445343.Resize->SaveforWeb(100%) 45578 445584.SaveforWeb(100%/progressive)->resize 43880 424215.Resize->SaveforWeb(100%/progressive) 43889 424346.SaveforWeb(60%/progressive)->resize 14939 136257.Resize->SaveforWeb(60%/progressive) 14909 136058.SaveforWeb(60%)->resize 14593 135899.Resize->SaveforWeb(60%) 14568 13547123236(44558)-14568(13547)=108668(31011)Saving200x300,JPGfrom650x975Simple scenario and results (B)Are you allergic toCharlie Chaplin’s cat?
  26. 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. 27. Dust off your Photoshop
  28. 28. UI parade / webzapp - quick mockups - http://webzap.uiparade.com/
  29. 29. UI parade - devrocket - quick saving for ipad - http://devrocket.uiparade.com/
  30. 30. CSS hat - https://csshat.com/
  31. 31. Enigma64 - http://getenigma64.com/
  32. 32. Save some Bytes on saving images to WebUse automatic optimalisationPimp your Photoshop with time saving pluginsDon’t turn off your PS just change the way you use itFuture things to talk about: WebP, Adobe Refine EdgeConclusion
  33. 33. THANK YOU FOR YOUR TIME

×