Embed Size (px)
Citation preview
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
3) ořez
• RUČNĚ!
• Photoshop, Zoner, Fireworks,
IrfanView…
4) úprava názvu
4) úprava názvu
• Renamer
• Advanced Renamer
• PHP…
5) změna rozměru
5) změna rozměru
• Grunt / Gulp
• Photoshop, Zoner, Fireworks,
IrfanView…
6) optimalizace
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ář?
Nahrání akce
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
Dávky Acrobat
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
Hotovo?
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
SVG – přebarvení
