Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Davky jsou-proste-super

897 views

Published on

Jak si poradit se záplavou obrázků a jejich hromadnou úpravou? Praktické využití dávek v Adobe produktech, generování sprite a ikon-fontů pomocí Gruntu, úprava SVG v Illustrátoru.

Published in: Internet
  • Be the first to comment

Davky jsou-proste-super

  1. 1. Dávky jsou prostě super! Daniel Střelec / @DanielStrelec / daniel.strelec@topdigital.cz
  2. 2. Když potřebujete peníze
  3. 3. Když potřebujete zvýšit účinnost
  4. 4. Když už nemáte místo na ploše
  5. 5. Obrázky 10 obrázků si upravíte ručně, 100 dáte stážistovi, co 10000?
  6. 6. Co je potřeba udělat 1) sjednocení formátu 2) grafické úpravy 3) ořez 4) úprava názvu 5) změna rozměru 6) optimalizace
  7. 7. 1) Sjednocení formátu
  8. 8. 1) Sjednocení formátu • Adobe Photoshop • Zoner Photo Studio • Fireworks • IrfanView…
  9. 9. 2) grafické úpravy
  10. 10. 2) grafické úpravy • dávky v Adobe Photoshopu -> • Zoner, Fireworks, IrfanView…
  11. 11. 3) ořez
  12. 12. 3) ořez • RUČNĚ! • Photoshop, Zoner, Fireworks, IrfanView…
  13. 13. 4) úprava názvu
  14. 14. 4) úprava názvu • Renamer • Advanced Renamer • PHP…
  15. 15. 5) změna rozměru
  16. 16. 5) změna rozměru • Grunt / Gulp • Photoshop, Zoner, Fireworks, IrfanView…
  17. 17. 6) optimalizace
  18. 18. 6) optimalizace • Grunt / Gulp (grunt-contrib-imagemin…) • ImageOptim • PNG gauntlet, JPEG optim, TinyPNG/JPG, JPEGmini • Prepros, Fireworks…
  19. 19. TIP: Zoner Photo Studio
  20. 20. BACHA! • zkopírovat data • animované GIFy • vektory • tiskové podklady • přeoptimalizace
  21. 21. Dávky Líný vývojář je dobrý vývojář?
  22. 22. Nahrání akce
  23. 23. Dávkové spuštění akce
  24. 24. Pohodlně se usaďte!
  25. 25. Proč dávky? • pokročilé možnosti úprav • nestandardní operace • univerzální pomocník • navěšení klávesové zkratky • …ten pohled, když Photoshop pracuje
  26. 26. Dávky Illustrátor
  27. 27. Dávky Acrobat
  28. 28. BACHA! • stavějte dávky co nejuniverzálněji • PS se zastaví v případě problému • pozor na ukládání/názvy souborů • PS může vyžrat paměť
  29. 29. Generování sprite - Grunt Fakt to někdo dělá ručně?
  30. 30. Příprava obrázků DOBŘE POJMENOVAT!
  31. 31. grunt-spritesmith https://github.com/Ensighten/grunt-spritesmith
  32. 32. Hotovo?
  33. 33. LESS (SASS, Stylus…)
  34. 34. Proč? • snadná aktualizace • nezávislost na službě, internetu • proměnné v preprocesoru • návaznost dalších tasků (optimalizace, upload…) • grunt-contrib-watch
  35. 35. Generování ikon fontu - Grunt Ikon fonty pořád mají své plusy i když frčí SVG.
  36. 36. Příprava ikonek DOBŘE POJMENOVAT!
  37. 37. grunt-webfont https://github.com/sapegin/grunt-webfont
  38. 38. LESS (SASS, Stylus…)
  39. 39. Proč? • snadná aktualizace • nezávislost na službě, internetu • proměnné v preprocesoru • návaznost dalších tasků (optimalizace, upload…) • grunt-contrib-watch
  40. 40. Další tipy Může se hodit.
  41. 41. Photoshop – vytažení obrázků CTRL + klik = select
  42. 42. Photoshop – filtrace vrstev
  43. 43. SVG – změna barvy
  44. 44. SVG – přebarvení
  45. 45. Díky za pozornost Nebojte se zeptat - daniel.strelec@topdigital.cz

×