Jak vytvářet sprite obrázky - ruční způsob

V tomto článku je popsán, podle nás, nejjednodušší způsob, jak ručně vytvářet sprite obrázky. Víme, že to není žádná novinka, ale určitě to pár začínajícím kodérům pomůže. V některém dalším článku vám ukážeme jak používat automatický generátor sprite obrázků.

Co jsou to sprite obrázky?

Jedná se o jeden obrázek, který obsahuje více malých obrázků. Tyto obrázky se pak linkují v CSS a pomocí background-position se pozicují tak, aby byla vidět pouze chtěná část - tedy jeden daný obrázek.

Proč dělat sprite obrázky?

Kvůli snížení požadavků na server. Některé prohlížeče dříve stahovali pouze 2 požadavky z jednoho serveru najednou (IE6). Nyní už se IE6 neřeší, ale stejný problém nyní nastává u mobilních zařízení, kde je počet v jednom okamžiku prováděných dotazů na server u některých zařízení také jen 2.

Jak tedy sprity vytvářet?

Ve Photoshopu máme na plátně zapnutou mřížku po 100px, kterou máme navíc rozdělenou na 16 dílů po 25px. K tomu máme nastavené přitahování k mřížce.

Skoro na první pohled i bez otevření Photoshopu lze vydedukovat, na jaké pozici se prvek nachází. Pokud to však není jasné, tak si stačí obrázek znovu otevřít v Photoshopu a podívat se na pravítko nebo najet na pozici kurzorem. Na kartě Informace se zobrazí x a y pozice kurzoru.

Jak tyto vlastnosti nastavit?

Nastavení mřížky
Předvolby/Vodítka, mřížka a řezy
Zde nastavíte čáry mřížky po “100” a dělení po 4. Můžete si zvolit barvu, styl čáry apod. Já používám defaultní nastavení.
Zobrazení mřížky
Zobrazení/Zobrazovat/Mřížku

Spuštění přitahování
Zobrazení/Přitahovat
Nastavení přitahování na co přitahovat
Zobrazení/Přitahovat na/Mřížku

Zobrazení pravítka
Zobrazení/Pravítka

Zobrazení karty Informace
Okna/Informace (kl. zkr. F8)

Ukázka mřížky

Ukázka mřížky

Ukázky našich spritů

 

Máte jiné workflow? Pochlubte se nám s ním v komentářích, rádi vyzkoušíme vaše řešení spritů.

Sdílet článek:

Tomáš Krejčí Autor: Tomáš Krejčí
tomas.krejci@superkoderi.cz Twitter Kippt LinkedIn LastFM

Komentáře

  • Avatar

    1. Patrik Illy 07. 11. 2013 v 13:58

    Pokud používáte Sass a Compass, dá se tvorba spritů pohodlně automatizovat viz: http://compass-style.org/…ies/sprites/

  • Avatar

    2. Pavel Šuraba 07. 11. 2013 v 14:01

    zrovna jsem to chtěl napsat

  • Avatar

    3. Tomáš Krejčí - SuperKodér | 07. 11. 2013 v 14:39

    Díky za odkaz, toto je určitě lepší způsob jak vytvářet sprity.

    Tento návod je pro lidi co zatím nepoužívají žádný preprocesor nebo kompilátor. Je to malý návod jak co nejpohodlněji a udržovatelně skládat obrázky do spritů. U nás teď přecházíme na Grunt, který už toto řeší za nás. O tom napíšeme později v nějakém ze seriálů Grunt, který chystáme.

  • Avatar

    4. Patrik Illy 07. 11. 2013 v 20:58

    Na příspěvky kolem Gruntu se těším :) Z názvu mě mohlo napadnout, že to bude mít pokračování…

  • Avatar

    5. Daniel Kijkov 07. 11. 2013 v 22:19

    Mne se osobne hodne osvedcil tenhle nastroj: http://spritegen.website-performance.org/

    Az konecne Adobe vyda featuru (povidal o tom a ukazoval na nejake prednasce Tom Krcha), ktera uklada obrazky z vrstev dle jejich nazvu (priklad layer png → layer.png), tak by to mohl byt turbo nastroj. Protoze vystup se da krasne volat v LESSu a pevne verim, ze i v jinych preprocesorech.

    Akorat tohle podminuje ukaznenost grafiku, no. Pripadne pak holt sam prejmenovat vsechny vrstvy dle potreby.

  • Avatar

    6. Eda 08. 11. 2013 v 10:06

    OS X: http://spriterightapp.com Online: http://spriterightapp.com

  • Avatar

    7. Houdas 08. 11. 2013 v 18:44

    Na článek (články?) o Gruntu se moc těším, díky.

  • Avatar

    8. Honza 22. 11. 2013 v 22:11

    A co starší prohlížeče? Nemají s tím problémy? P.S.: Sprite obrázků jsem si nedávno všiml na webu Komerční Banky, jen jsem nevěděl co to je…

  • Avatar

    9. Tomáš Krejčí - SuperKodér | 25. 11. 2013 v 09:03

    Sprity fungují všude i v IE6. Nikde jsme nenarazili na problém.






Využijte formátování Texy!

SuperKodéři se mění na SUPERKODERS. Už jsme spustili prozatímní jednoduchou stránku, která vám nové Superkodéry představí.

Přejít na nový web Zůstat na současném webu