Příručka designéra Pixel Hinting
Pixelové dokonalé ikony a typografie vystupují mezi davem online. Samozřejmě všichni chceme usilovat o takovou rafinovanou práci, ale někdy i po pokusu stále skončíme s něčím trochu ... méně. Pixel Hinting je jednou z dovedností, která má automatickou funkci a zlepšuje její výsledky. Navzdory extrémně vysokému rozlišení displejů, jako jsou displeje sítnice Apple, stále potřebujeme "falešné" hladké křivky, abychom skončili s pixelovaným nepořádekem.
Mnoho návrhářů a vývojářů se nyní pohybuje směrem k SVG a metodám založeným na vektoru. s podporou jen zlepšovat do dne. Ale i tak, řešení na bázi vektorů mají dlouhou cestu předtím, než budou dostatečně zralé a budou se používat ve výrobě. SVG je skvělý pro zobrazování vektorových tvarů, ale není tak horký při změně velikosti těchto tvarů. Tak jako všechno ostatní tam je čas a místo pro každé řešení.
Co jsou to vektory?
Vektory jsou v podstatě výsledkem matematické reprezentace tvaru. Když na obrazovce uvidíte něco, je to proto, že počítač vykreslil tyto objekty a spojil je s pixely na displeji. Přitom počítač také rozhoduje o tom, co by mělo a nemělo by se zobrazovat jako celé pixely. Například velká písmena "D" má jak perfektní přímku, tak i zakřivenou.
Jak můžete vidět, bez vykreslování je zakřivená čára na "D" poměrně jemná. Abychom kompenzovali, když jsou tvary vektorů vykresleny, jsou obvykle proti aliasy, aby poskytly více ... robustní vzhled. Namísto zobrazování pixelů, které zcela spadají do vektorového obrysu, jsou pixely postupně zastíněny. Tím se váš mozok pokouší vidět hladší řádek na zakřivených tvarech, které se perfektně nezapadnou do pixelové mřížky.
Nahoře můžete vidět, jak je vykresleno "D", což je nazýváno poloviční pixely, které vám pomohou odstranit zubaté pixely. Tato skutečnost však přináší také problém: počítače jsou strašné při zjišťování toho, co je vizuálně přitažlivé. Takže při přidávání těchto polovičních pixelů jsou zaoblené rohy vypadají fantasticky, ale také vypadá, že horní / spodní vnitřní čára vypadá rozmazaně. Automatické vyhlazení, ke kterému dochází při vykreslování vektorového tvaru, končí většinou tvarů a typografie, ale zanechává ostatní v ještě horší kvalitě než začalo.
Dobrý den, pixelové náznaky.
Nyní, když máte krátké pozadí o vektorových tvarech a jak fungují, jdeme do skutečné práce. Označení pixelů zahrnuje přesun vektorových kotevních bodů, které se opírají o hrany pixelů, což je více esteticky příjemné. Tím, že tyto přímé linie dokonalejší, a přitom stále opouští poloviny pixelů do křivek. Nejčastěji se na typografii a tvary pro rastrové obrazy (loga, ikony, značky atd.) Používají náznaky pixelů. Nyní, co je nejdůležitější, pro správné nastavení vašeho vektoru musí mít velikost a tvar, který chcete. Jakmile pixel naznačil vaši práci, otáčení nebo změna velikosti to mohlo - a pravděpodobně by - hodit všechno, co pracuje pryč automaticky automaticky anti-aliasing to znovu. Než začneme, ujistěte se, že jsou nastavena následující nastavení (pro tento úkol budu používat aplikaci Photoshop):
- Zapněte mřížku obrazových bodů (Zobrazit> Zobrazit> Mřížka, ujistěte se také, že nad nabídkou Zobrazit je zaškrtnuto políčko Extras)
- Ujistěte se, že vaše mřížka má mřížku na každých 10 pixelů, s deseti členění. Nebo něco podobného, takže mezi každým pixelem je čára.
- Zakažte přiložení (Zobrazit> zrušte zaškrtnutí políčka). Nechceme, aby se kotevní body zachycovaly v krocích po 1px, chceme přesunout body v pixelech.
Pixelová typografie
Proces tvorby tvarů vs. typografie je poněkud odlišný, takže vás obejdu oba. V ideálním případě s typografií byste chtěli vyzkoušet svůj typ před nebo během procesu hintování. Bez ohledu na to by měla být jedna z posledních věcí, kterou uděláte.
Nejprve vyberte typografii, kterou chcete navrhnout, vytvořte kopii vrstvy a poté tuto vrstvu přeměňte do tvaru.
Můžete vidět, že text nešťastně spadá z mřížky, a to jak na vodorovné, tak na svislé ose. Chcete-li to opravit, uděláme jemné posunutí kotevních bodů každého dopisu, dokud nebudou těsněji zarovnány s rozloženou pixelovou mřížkou. Cílem je dostat tvarové čáry blízké, ne-li přímo na řádky mřížky. Zvětšujte, abyste přesněji posunuli kotevní body. Zatímco to děláte, často oddálejte, abyste zajistili, že vaše úpravy vypadají v pořádku.
Nechcete se přizpůsobit přesně na mřížku, protože to na prvním místě odstraní výhody anti-aliasingu. Místo toho se snažte jednoduše nechat věci konzistentní - povolte pouze poloviny pixelů na jedné straně každé osy. Například vždy dovolím poloviční pixely vpravo a v horní části písmen, zatímco levý a spodní okraj se nuceně spláchnou k mřížce.
Jak můžete vidět, vstup "vstoupit" byl zhruba upraven, zatímco "dotek" zůstává tak, jak je. Stejně jako kerning, pixelů je hodně víc řemesla než věda. Zajímá se, jestli se dívá na to, zda dílo vypadá lépe nebo horší po úpravě. Nenechte se odradit, pokud najdete typografický pixel, který naznačuje, že je hrubý, opakujte a pracujte s ním. Pokud váš výsledek stále vypadá jako pod-par, můžete vždy odstranit vrstvu a zkopírovat znovu z původního originálu. Trvá to nějaký čas, aby se typografie obzvláště vypadala skvěle, jen pokračujte a dříve nebo později se vaše tvrdá práce vyplatila.
Pixelů hinting vektorové tvary
Obecně jsou tvary obrazových bodů vyhrazeny pro ikony nebo loga. Opět se chcete ujistit, že váš tvar je v rozměru a rotaci, které chcete, než začnete, protože jeho pozdější úpravy by mohly odhodit veškerou vaši tvrdou práci. Nastavení tvarů je mnohem jednodušší a vyžaduje méně oka pro vnitřní detaily. To znamená, že složitější tvary trvají déle a jsou obtížnější, takže je nejlepší začít s něčím jednoduchým.
Nahoře vidíte, že naše šipka a kruh sedí jen mírně, kde bychom je rádi. Poloviční pixely vytvořené anti-aliasingem způsobují, že celý tvar vypadá jako rozmazaný. Takže uděláme všechno, abychom mohli trochu lépe dopadnout na mřížku.
Tam jedeme! Přizpůsobením kotevních bodů linek s mřížkou skončíme s mnohem ostřejší ikonou. Je důležité zmínit, že jelikož tato ikona je kruhem, měly by být veškeré úpravy šířky rovněž odráženy na výšce. Také nezapomeňte ujistit se, že uvnitř tvaru vypadá dobře i konzistentně. Pokud se podíváte na předchozí obrázek, zjistíte, že vnitřní strany kruhu nejsou stejné jako u aliasu.
Na závěr
Při výše uvedené práci je výsledkem obraz, který vypadá ostřejší a profesionálnější. Samozřejmě můžete tyto techniky použít mnohem důležitější věci než tlačítko.
Zatímco automatické vyhlazení provedené počítačem vypadá přijatelné, mohlo by to být lepší. Takže, pokud jde o vaše logo nebo důležité ikony / typografie v rastrové formě, pixel hinting je víc než jen výklenková dovednost; až do dne, kdy používáme displeje s vysokou hustotou pixelů, je to zásadní.