Dont turn your photoshop off
Post on 23-Jun-2015
678 Views
Preview:
DESCRIPTION
Transcript
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
top related