Vektory a bitmapy

a kreslis to cely do jedny vrstvy ne? :)

> photoshop mnohdy své vektorové obdelníky, kruhy, apod. vykreslí s rozmazanými okraji

To co popisuješ je „problém“ půl-pixelů. Zapni Rulers (CTRL+R), použij maximální zoom a umísti objekt přesně na celý pixel, pak bude vše ostré.

Nebyl bych tak přísný. Pokud se při práci s vektorovou grafikou dodrží pár zásad, tak je to v pohodě.

Začal bych tím, že se třeba použije webový vektorový editor, kde se nepočítá s milimetry, ale s pixely a díky tomu se nestane, že by měl 1px černý rámeček naráz 2px a byl šedivý.

V rámci Adobe se nabízí Fireworks a já, jelikož na něj nemám prašule, tak používám Inkscape.

Musím s tebou nesouhlasit, ale zároveň i souhlasit. Osobně totiž tvořím grafické návrhy v Adobe Fireworks CS3, což je vektorový editor, který vykresluje 72 dpi a má anti-aliasing jako prohlížeč (system, smooth pro grafické prvky). Takže mám ve výsledku vektor, který vypadá jako bitmapa a rozstříhám to 1:1 na web. Osobně nikdy nepochopím masochysty, kteří se trápí s Photoshopem. V něm si připravím jen grafické doplňky a textury. ;)

Taky bych nebyl tak kategorický. Podle mě je nutné umět dobře zvládat grafické nástroje. Na výstupu by nemělo být poznat, jestli byla použita vektorová nebo bitmapová grafika navíc třeba promíchaná v mnoha vrstvách.

Weby som navrhoval v bitmapách dlhé roky, no pred pár mesiacmi som prešiel kompletne na vektorové nástroje. Už aj ten obyčajný obdĺžnik mi príde oveľa jednoduchší pomocou vektorového nástroja.

Pokiaľ hovoríme o Photoshope, tak tie rozmazané okraje môžu byť spôsobené tým, že netrafíš okraje objektu presne na pixel – okraj vektorového objektu napr. v polovici pixelu je vykreslený s určitou priehľadnosťou (a to asi budí dojem rozmazaných okrajov).

Pritom stačí mať presne položené vodítka (klásť ich vždy so Shiftom). Naproti tomu výber je vždy linkovaný na pixel, preto sa jeho výplň vykresľuje s ostrými okrajmi.

S vektorovými objektmi sa pracuje jednoduchšie a oproti bitmapám ponúkajú neprekonateľnú flexibilitu.

Tohle téma by si asi zasloužilo větší rozbor. Co já se navztekal s lidmi jako popisuješ. Bohužel, tady přesvědčení pramení z neznalosti a minimální erudovanosti. Ani 3D grafik se neobejde bez znalosti práce s bitmapovou grafikou. Je to jako když chete poznat cestu vlakem z Prahy do Berlína a nastoupíte v Drážďanech.

Nesouhlasím. Většina prvků, ze kterých se webová grafika skládá, má vektorovou povahu – texty, boxy, gradienty, zaoblené rohy, křivky, různé šipky apod. – to všechno je ideální uchovávat jako vektory. Převedením do bitmapy se ztrácí informace, tím pádem i následná možnost úprav. Bitmapa je nejhloupější možná reprezentace obrazových dat, tudíž by se měla používat až v tom nejzazším případě. Jak chcete např. změnit v bitmapě poloměr zaoblení rožků? Nebo zvětšit logo o 10 %?

To, že je Photoshop nejpoužívanější software na tvorbu webové grafiky, považuju za historický omyl. Photoshop není a nikdy nebyl určen pro tvorbu vektorů či webů a podle toho ta podpora vypadá. To, že je v něm peklo zarovnávat vektory na pixelovou mřížku, není chyba těch vektorů.

Já např. dělám weby v Inkscape a dosáhnu naprosto stejné přesnosti, jako ve Photoshopu. Všechny objekty mohu bez nejmenších problémů zarovnat přesně na pixelovou mřížku (ono to jde i v tom Photoshopu). Že neumíte nakreslit vektorový obdélník přesně na pixel, neznamená, že to nejde. Edukujte se :)

Filo, to že neznáš/nepoužíváš vhodný software, rozhodně není důvod k nějakému zevšeobecňování. Ano, ve Photoshopu a Illustratoru je velmi nevhodné navrhovat weby vektorově, hlavně kvůli antialiasingu. Ale jsou programy, které jsou vektorové, a přesto pracují primárně s pixely. Třeba zmíněný Fireworks. Jeho kombinace vektorového přístupu k všem objektům a současně striktně bitmapového zobrazení, je sice nevšední, ale pro webdesign přímo geniální. Navrhovat dnes cokoli pro web ve Photoshopu je pro mě skoro utrpení, bez Fireworksu už bych nechtěl pracovat.

A ano, všechno tam kreslím vektorově, bez antialiasingu.

Nejsem sice grafik a grafickým aplikacím až tak hluboce nerozumím, ale vytváření grafiky (ne úprava fotek) se mi daleko lépe dělá ve vektorových aplikacích.

4: Pokud děláte grafiky náročné weby jako karf.cz, pak váš názor chápu. Ale fotíte pěkně.

Dovolil jsem si toto téma u sebe na blogu trochu více rozvézt.

Taky se stavím proti odsuzování vektorů. Velkou výhodu vidím především v datovém objemu. Když uděláš velkej obrázek na pozadí tak je to v SVG pár řádků XMl kódu, ale v bitmapě je to strašně velký. Nemluvě o kvalitě.

[8] S Fireworksem nemám žádné zkušenosti, ale určitě ho zkusím :-) a uvidím. Alespoň na vhodnosti zobrazování výsledku jako bitmapy se myslím shodneme :-)

Ad photoshop x fireworks x corel x ilustrator x indesign x gimp x inkjet x whatever – svůj postoj shrnu v nějakém dalším článku :-)

Pouzivam Inkscape, protoze na SW od Adobe ZATIM nemam a take proto, ze jsem nejaky cas pracoval pod Ubuntu. Musim ale rict, ze se pomoci Inkscape, jakozto vektoroveho editoru daji vytvorit pekne (a ostre) weby. :-)

Skrze Inkscape je pak pomerne snadne vydelat si napriklad na Photoshop. Vektorovy editor totiz navrhum webu predevsim nestaci a prepinat se mezi editory, kdyz potrebuju bitmapove upravy, je prinejmensim nepohodlne a pomerne zdrzujici.

Zajimalo by me ale, jestli, Honzo, ve Photoshopu pracujes s vyberem a kbelikem a nepouzivas nejake ty tvary. Protoze mi prijde silene pro kazdou zmenu obdelniku znovu neco vybirat, vyplnovat nebo gumovat.

Osobně používám také Photoshop, ale co mohu, dělám pomocí tvarů, je s nimi snazší práce a ono rozmazání je opravdu způsobené netrefením se na celé pixely, ale dá se vyřešit ať už přesně umístěnými vodítky a nebo volbou „snap to pixels“ – nevím od které verze Photoshopu existuje, ale funguje skvěle… Stejně jako použití smart objektů ať s bitmapovým či vektorovým podkladem…

[14] tvary ve fotošopu používám – konkrétně zaoblené obdelníky. Čtverce a kruhy naopak striktně jako bitmapy… ale když si pročítám komentáře, tak to bude spíše neznalostí nástroje

File nehnevaj sa (možno to už niekto v komentároch napísal, nechcelo sa mi ich čítať), ale napísal si úplnú hlúposť a to preto že Photoshop nepoznáš dosť dobre. Všetko čo sa dá vo Photoshope vektormi tak iba zásadne nimi. A to čo potrebuješ je nastaviť si „snap to pixels“ a používať dobre nastvenú mriežku. Mimochodom, nebol si to Ty kto ju tu tak veľmi propagoval?

Tak já taky přihodím svou trochu do mlýna.
Já souhlasím s tím, že dělat weby ve vektorových editorech jako Adobe Illustrator je trochu nešťastné, jelikož dosáhnout pixel perfect vzhledu je obtížnější než ve Fireworks a Photoshopu. A o to v tomto článku myslím šlo v prvé řadě. (I když při zapnutém zobrazování obrazových bodů to jde, já tak například dělám ikonky, nebo když potřebuju pixel perfect ilustraci).

Ale co se týče použití vektorových nástrojů ve Photoshopu, jediný problém je to, že když změním velikost vektorového objektu (a nedám ho na mřížku nebo podobné fígle), tak není pixel perfect. Ale to dá spravit: nazoomuju naplno a pomocí přímého výběru bodů(nebo přes transformaci) objekt poposunu tak aby pixel perfect byl. Je to otravné, ale jde to. Je ale taky nutné si rozmyslet, co je lepší vektorem a co ne. Jednopixelovou linku je určitě jednoduší nakreslit tužkou ;), ale tlačítka, boxíky apod. bych bez vektorů (nebo cest) už nedělal.

Jinak jsem všemi deseti pro Fireworks, i když jsem k němu ještě sám nepřešel (nemůžu se vzdát pořád některých možností Photoshopu a přepínat se mi nechce …).

plne suhlasim s karfom. Iklinacia k Photoshopu ako predpripravky k navrhu grafickeho dizajnu webu je skor historicky omyl ako logicke vyustenie funkcie tohto programu.

Drviva vacsina webu su skor vektoroveho charakteru – boxy su vektorove, texty su vektorove… bitmapy vo webe su doplnkove a dekorativne :-)

Zkoušel jsem kreslit v Gimpu, Photoshopu, Corelu a Inkscapu. Zůstal jsem u Gimpu (bezkonkurenční cena 87) a Inkscapu (používá se mi lépe než Corel). Nyní zkouším zhotovit design v Inkscapu a docela to jde. Pomocí sejmutí obrazovky mám bitmapu okamžitě. Exportovat do bitmapy a upravit výstup v Gimpu také jde. Fireworks neznám, ale vektor obecně bych nezatracoval. Vždyť je to v podstatě hladký rastr 87)

[18] btw. už jsem narazil i na ty 1px linky pomocí vektorového objektu… a to byl teprve mazec :-)

Používám jen Fireworks, je to výbornej nástroj na návrh webdesignu.

Je to hybridní editor, který nativně používá formát PNG. Umí pracovat i s PSD soubory takže spolupráce s ostatními produkty Adobe je vcelku bezproblémová.

Má navíc tu velkou výhodu, že náhled grafiky si zobrazíte prakticky na čemkoli aniž byste startovali nějaký grafický superprodukt. Páč je to PNG.

Cena nejnovější verze FW je tak nízká, že se Vám vrátí z první zakázky.

PS: Nejsem dealer od Adobe :-)))

Já jsem se setkal s FW, když jsem začínal (2002 tuším) a to byl děs… Jak tak ale čtu, budu mu muset znovu dát šanci :-(