איך חותכים עיצוב כמו נינג'ות בשנת 2013

  • Published on
    09-Aug-2015

  • View
    4.577

  • Download
    0

Embed Size (px)

Transcript

  1. 1. , . , . http://www.flickr.com/photos/jonathanbeard/3323527515/ pixelperfect.co.iltapdog.co
  2. 2. . , - . , ,
  3. 3. . ) ( . , , , . - ""
  4. 4. .
  5. 5. . , . . -
  6. 6. . - . The formula has changed!
  7. 7. . , . . Multiple Platforms
  8. 8. . . , , The Evolution of code
  9. 9. ? Why?
  10. 10. . . . . , ? ... Because! +
  11. 11. . . We need to plan ahead
  12. 12. . . We need to plan ahead We have the tools
  13. 13. . . . . / We need to plan ahead We have the tools We want to have control
  14. 14. . . .
  15. 15. . 3 3 main ways to slice
  16. 16. )( Pics ,PCS PCS
  17. 17. PNG CSS SVG
  18. 18. . . JPG PNG 2 , . @2x . .2 . .1 ? .3 . 4 Png also JPG cross-browser @2x & script* * Links to scripts can be seen in the post at Pixel Perfect
  19. 19. . Retinize it Retinize it Artiom Dashinsky
  20. 20. ( . . .)100% . FREE!!! Super easy - PS Action Choose: Slice or Retinize Can define hotkey Can't "batch" retinize Retinize it Artiom Dashinsky
  21. 21. Cut & Slice Me . .
  22. 22. . , .) @ ( . ,)downscale only( , 2 . , FREE!!! Slice some/ all/ single group Cuts fast Android/iphone/screen Opens folder automatically @2x --> 1x only Groups only Opens folder automatically Cut & Slice Me
  23. 23. . ! . - PC , Slicy Slicy
  24. 24. , . .) ( . . )PC ( 1x --> @2x or @2x--> 1x Can choose only some layers for export as @2x Auto track and update slices Choose any folder Useful and fun UX and UI Mac Only Application and not a plugin Only batch slicing Slicy
  25. 25. . Enigma64
  26. 26. . Save for Web . "64" .)Copy Merged ( , , . . Great useful UI A one button "Save for Web" Choose between selection/ entire doc/ specific layer or selected layers Base64 support Doesn't remember per file so you have to choose each time where to save according to what file Doesn't slice @2x Enigma64
  27. 27. . CSS- . CSS cross-browser liter than ever
  28. 28. CSS Hat . .
  29. 29. . ' , . Great useful UI Lightning fast CSS/ SCSS/ SASS/ LESS/ Stylus Super clean CSS - even cleaner than Photoshop CC None! CSS Hat
  30. 30. .SVG SVG . ie8- . , , CSS , SVG SVG Vector Editable by CSS Small file size icon fonts
  31. 31. . icon fonts SVGs . . Icon Fonts improve your site's performance
  32. 32. . icoMoon fontastic - another cool service
  33. 33. . , , . . , Boosts site speed Easy to manage and add fonts of your own Implementation in the code is a bit complex. icoMoon
  34. 34. Sagi Shrieber pixelperfect.co.il dribbble.com/sagishrieber ): . , Thank You! Sagi Shrieber pixelperfect.co.il dribbble.com/sagishrieber http://pixelperfect.co.il/posts/slicing http://pixelperfect.co.il/posts/slicing