Dávky jsou prostě super!
Daniel Střelec / @DanielStrelec / [email protected]
Když potřebujete peníze
Když potřebujete zvýšit účinnost
Když už nemáte místo na ploše
Obrázky
10 obrázků si upravíte ručně, 100 dáte stážistovi, co 10000?
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
1) Sjednocení formátu
1) Sjednocení formátu
• Adobe Photoshop
• Zoner Photo Studio
• Fireworks
• IrfanView…
2) grafické úpravy
2) grafické úpravy
• dávky v Adobe Photoshopu ->
• Zoner, Fireworks, IrfanView…
3) ořez
• RUČNĚ!
• Photoshop, Zoner, Fireworks,
IrfanView…
4) úprava názvu
• Renamer
• Advanced Renamer
• PHP…
5) změna rozměru
• Grunt / Gulp
• Photoshop, Zoner, Fireworks,
IrfanView…
6) optimalizace
• Grunt / Gulp (grunt-contrib-imagemin…)
• ImageOptim
• PNG gauntlet, JPEG optim,
TinyPNG/JPG, JPEGmini
• Prepros, Fireworks…
TIP: Zoner Photo Studio
BACHA!
• zkopírovat data
• animované GIFy
• vektory
• tiskové podklady
• přeoptimalizace
Dávky
Líný vývojář je dobrý vývojář?
Dávkové spuštění akce
Pohodlně se usaďte!
Proč dávky?
• pokročilé možnosti úprav
• nestandardní operace
• univerzální pomocník
• navěšení klávesové zkratky
• …ten pohled, když Photoshop pracuje
Dávky Illustrátor
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ěť
Generování sprite - Grunt
Fakt to někdo dělá ručně?
Příprava obrázků
DOBŘE POJMENOVAT!
grunt-spritesmith https://github.com/Ensighten/grunt-spritesmith
LESS (SASS, Stylus…)
Proč?
• snadná aktualizace
• nezávislost na službě, internetu
• proměnné v preprocesoru
• návaznost dalších tasků (optimalizace, upload…)
• grunt-contrib-watch
Generování ikon fontu - Grunt
Ikon fonty pořád mají své plusy i když frčí SVG.
Příprava ikonek
DOBŘE POJMENOVAT!
grunt-webfont https://github.com/sapegin/grunt-webfont
LESS (SASS, Stylus…)
Proč?
• snadná aktualizace
• nezávislost na službě, internetu
• proměnné v preprocesoru
• návaznost dalších tasků (optimalizace, upload…)
• grunt-contrib-watch
Další tipy
Může se hodit.
Photoshop – vytažení obrázků
CTRL + klik = select
Photoshop – filtrace vrstev
SVG – změna barvy
Díky za pozornost
Nebojte se zeptat - [email protected]