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!

Evropský fond pro regionální rozvoj CzechStarter Společnost SuperKodéři s.r.o. byla podpořená agenturou CzechInvest v rámci projektu Podpora start-upů, klíčové aktivity CzechStarter, realizované z programu Marketing, prioritní osy č. 2 "Rozvoj podnikání a konkurenceschopnosti malých a středních podniků" v rámci Operačního programu Podnikání a inovace pro konkurenceschopnost.

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