Your SlideShare is downloading. ×
Dont turn your photoshop off
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dont turn your photoshop off

659
views

Published on

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

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
659
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DON’T TURN YOUR PHOTOSHOP OFFtoday
  • 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. 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. 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 rescuefroont.complayground.webflow.com
  • 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) 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. 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. 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 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. THANK YOU FOR YOUR TIME