Dont turn your photoshop off

Click here to load reader

download Dont turn your photoshop off

of 33

  • date post

  • Category


  • view

  • download


Embed Size (px)


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

Transcript of Dont turn your photoshop off


2. Table of contents1. Meet the guys2. Webdevelopers dont 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. Hi, Im JaSON!Im a developerHi, Im ReGi B!Im a designer1. MeetTheGuys = {}; 4. Webdevelopers dont like Photoshop 5. I code!Photoshopis for photosF**KPhotoshopI makeeverythingin consoleThere areweb toolsfor thatWebdevelopers dont like PhotoshopWhat aboutyou? 6. People will design in PhotoshopBye, bye Fireworks 7. People will design in Photoshopit has been taught for many yearsthat designing in Photoshopis integrated part of a website building process 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. Photoshop cannot do everything- responsive design 10. HTML5 and CSS3 for the 11. What should you know before yousave image for web?PHOTOSHOP FOR WEBDEVELOPERS 12. RGB/CMYKRed 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 representativeWeb standard (W3C) - 16 777 216 colors 19. GIFcolor reduction algorithm, dither algorithm, web snap (safe web colors), allowed percent of lossiness in GIF compression 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. PNG8 - beats GIF almost always 22. PNG24 - interlaced, transparency, matte 23. Size matters - case study 24. Simple scenario and results (B)Scenario Size JPEGtran1.ReSaveto->JPG(quality10) 141925 66002.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 5391141925(8565)-6295(5391)=135630(3174)Saving400x317,JPGfrom2400x19003.1 kB fromone stupid image? 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 Chaplins 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 %) 27. Dust off your Photoshop 28. UI parade / webzapp - quick mockups - 29. UI parade - devrocket - quick saving for ipad - 30. CSS hat - 31. Enigma64 - 32. Save some Bytes on saving images to WebUse automatic optimalisationPimp your Photoshop with time saving pluginsDont turn off your PS just change the way you use itFuture things to talk about: WebP, Adobe Rene EdgeConclusion 33. THANK YOU FOR YOUR TIME