Autor Zpráva
quatzael
Profil
Existuje nějaká efektivní metoda jak z jednotlivých obrázků sestavit CSS SPRITE?

Jde mi o to, že už jsem začal dělat projekt s tím, že co jeden obrázek to jeden soubor. A v editoru je sice mám někde uložený vektorově, ale mezi tisíci dalšími drafty, takže je už těžký pro mě všechno spolehlivě dohledat.

Každopádně mám ty obrázky vyexportovaný jako formát .png. A to co bych potřeboval je nějak všechny nahrát do nějakýho editoru, který by je nějak seskupil vedle/pod sebe, případně abych já si je tam mohl nějak sám setřídit.

A nejlepší by bylo, kdyby i ukazoval aktuální polohu každýho jednotlivýho obrázku, abych to do CSS mohl jenom přepsat a nemusel to dopočítávat.

Důležitý je, aby takto vyexportovaný soubor zachoval původní kvalitu obrázku a nijak je nepřeformátovával.

Zkoušel jsem to v inkscapu a nejsem si moc jistej jestli zachovává obrázky tak jak původně byly..
Bubák
Profil
quatzael:
Zkoušel jsem to v inkscapu a nejsem si moc jistej jestli zachovává obrázky tak jak původně byly..
Neměl jsem s tím problém. Jako nastavení rozměrů jsem dal pixely a pozice pro bitmapy jsem zadával vždy jako celé číslo. Kdybych měl třeba v bitmapovém obrázku 1 px čáru, pokud ji vložím na celočíselnou pozici, zůstane ostrá po exportu do PNG ostrá. Ale pokud bych ji o půlpixel posunul (což ve vektorovém editiru je možné), pravděpodobně bych po exportu dostal 2px širokou 50% šedou čáru, "rozmazaninu".
nemeja
Profil
Strawberry o tom psal na jecas.cz, je tam i služba, která ti projede současný stránky a uloží ikonky do spritu. Samozřejmě tam je i generátor spritu z více obrázků, což by jsi využil nejspíš ty :-)
quatzael
Profil
nemeja:
Díky, to je zhruba co jsem potřeboval. I když jsem spíš chtěl použít přímo nějakej editor, abych si mohl sestavit sprite sám přehledněji, dát si související obrázky vedle sebe apod..

Zkoušel jsem ten script co napsal Strawberry a nějak mi nefunguje to načítání CSS souboru.

Má tam tenhle řádek:
<link rel="stylesheet" href="./css-sprite.php">
Ale prostě se to nenačte. Vůbec ani nechápu co tam dělá ta tečka před tím lomítkem.

Index jsem si dal do složky sprite a v ní mám složku png s tím css souborem a obrázkama.
Takže to mám takhle:

<link rel="stylesheet" href="./sprite/png/css-sprite.php">
Ale prostě to nejede.. Nemá být náhodou ten soubor CSS čistě jen includovanej?


nemeja:
Každopádně mi to teda píše:

Warning: Invalid argument supplied for foreach() in ... on line 14

Takže přepokládám, že je to tím, že se nenačetlo to CSS..
Bubák
Profil
quatzael:
Vůbec ani nechápu co tam dělá ta tečka před tím lomítkem.
Tečka je aktuální adresář, takže s touto nápovědou byl měl odhalit, co zápis ./ znamená.

nějak mi nefunguje to načítání CSS souboru
Chybná cesta k CSS souboru, používej takové zápisy cesty k souborům, které ti vyhovují, není nutné kopčit vše do posledního detailu.
quatzael
Profil
Bubák:
Tak by mi ale mělo potom fungovat tohle:
<link rel="stylesheet" href="./png/css-sprite.php">
A to nefunguje..
anonymníí
Profil *
quatzael:
Takže nepotřebuješ vyrobit sprite (ten si ccheš udělat sám), ale pouze hromadně narvat obrázky do editoru?

Photoshop (a jistě i mnohé další) umožňují vložení vícerých souborů do jednoho "plátna", prostým přetaženýím označených souborů z, třeba, totalcomanderu.
quatzael
Profil
Bubák:
Tak jsem to dal všechno do jedný složky a spustilo se mi to. Objevila se stránka s jednotlivými obrázky a elementy, ale žádný sprite.png se mi nevygeneroval..


anonymníí:
No to asi bude lepší řešení.. Ale budu to muset udělat opravdu až na konci celýho projektu, protože bych to asi nesčetněkrát zase předělával...


anonymníí:
Já bych docela rád kdyby to šlo v tom inkscapu. Importovaný obrázky se sice trochu rozmažou v tom inkscapu, ale pak se zřejmě vyexportujou zpátky zase jako původní. Jen nevím jak lze do inkscapu hromadně vložit víc obrázků.. Shiftem to označit všechno nejde..

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: