Pixel-täydelliset kuvakkeet ja typografia erottuvat joukosta verkossa. On selvää, että me kaikki haluamme pyrkiä tällaiseen hienostuneeseen työhön, mutta joskus jopa yrittäessäni, päädymme vielä hieman pienemmäksi ... vähemmän. Pixel Hinting on yksi osaamista, joka ottaa automaattisen ominaisuuden ja parantaa sen tuloksia. Huolimatta nykyaikaisten Applen verkkokalvonäytöksien erittäin korkeasta resoluutiosta, meidän on silti "väärennetty" sileät käyrät, jotta emme päätyisi pikseloituun sekaan.

Monet suunnittelijat ja kehittäjät siirtyvät entistä enemmän SVG- ja vektoripohjaisiin lähestymistapoihin nyt; sillä tuki vain paranee päivällä. Mutta niin, vektoripohjaisilla ratkaisuilla on pitkä matka ennen kuin he ovat kypsiä käytettäviksi tuotannossa. SVG sopii erinomaisesti vektorimuotojen näyttämiseen, mutta ei niin kuumaa näiden muotojen koon muuttamiseen. Joten kuten kaikki muu, siellä on aika ja paikka jokaiselle ratkaisulle.

Mitkä ovat vektorit?

Vektorit ovat olennaisesti tuloksena muodon matemaattisesta esityksestä. Kun näet jotain näytölläsi, se johtuu siitä, että tietokoneesi tehtiin kyseiset objektit ja liitettiin ne näyttöön tuleviin pikseleihin. Tietokoneesi tekee myös päätöksiä siitä, mitä pitäisi ja jota ei pitäisi näyttää koko pikseleinä. Esimerkiksi isolla kirjaimella "D" on sekä täysin suorassa että kaareva.

001

Kuten näette, ilman "D": n kaarevaa viivaa ei ole vastakkaista. Joten kompensoida, kun vektorimuotoja tehdään, ne ovat tavallisesti anti-aliasoituja, jotta saadaan enemmän ... vankka ulkonäkö. Sen sijaan, että näyttäisivät pikselit, jotka kuuluvat vektorin ääriviivoihin kokonaan, pikseleitä vähennetään vähitellen. Tämä houkuttelee aivoasi näkemään tasaisemman linjan kaarevista muodoista, jotka eivät napsauta pikselirivikettä täydellisesti.

002

Alla näet, miten renderoitua "D" -ohjelmaa annetaan puolipikselien nimeksi, jotta poistettaisiin jagged-pikselitys. Tämä sama ominaisuus tuo kuitenkin esille ongelman: tietokoneet ovat kauheita selvittääkseen, mikä on visuaalisesti houkutteleva. Niinpä kun lisätään näitä puolipikseleitä, pyöristetyt kulmat näyttävät fantastisilta, se tekee myös ylhäältä / alhaalta tulevalta sisälinjalta hämärän. Automaattinen anti-aliasing, joka tapahtuu, kun vektorin muoto on renderoitu, päättyy, jolloin suurin osa muodoista ja typografiasta näyttäisi hyvältä, mutta jättää muille vielä huonommassa laadussa kuin alussa.

Hei, pikselihyppy.

Nyt, kun sinulla on lyhyt tausta vektorimuodostelmista ja miten he työskentelevät, hyppäämme todelliseen työhön. Pikseliväritys tarkoittaa vektorin ankkurointipisteiden liikkumista pikselin reunojen suhteen enemmän esteettisesti miellyttävällä tavalla. Näiden suorien viivojen tekeminen on täydellisempi, mutta jättäen puolipikseleitä käyrille. Tavallisimmin pikselihyppyjä käytetään typografiassa ja rasterikuvien muodoissa (logot, kuvakkeet, brändäys jne.). Nyt, mikä tärkeintä, jotta vektori voidaan säätää oikein, sen on oltava sen kokoa ja muotoa, jota haluat. Kun pikselit vihjaavat työtäsi, pyörittämällä tai pienentämällä sitä voisi ja luultavasti heittäisivät kaikki, jotka toimivat pois automaattisesti estäen sen uudelleen. Ennen aloittamista varmista, että seuraavat asetukset on säädetty (käytän Photoshopia tähän tehtävään):

  • Kytke pikseliverkko päälle (Näytä> Näytä> Ruudukko ja varmista, että Ekstrat on valittu Näytä-valikon yläpuolella)
  • Varmista, että verkossasi on gridline joka 10 pikseliä, ja 10 osaa. Tai jotain vastaavaa, niin että jokaisen pikselin välillä on rivi.
  • Poista napautus käytöstä (Näytä> poista napsautus). Emme halua ankkurointipisteitä napauttamalla 1px: n välein, haluamme siirtää pistettä pikseleihin.

Pixel hinting typografia

Prosessin muotoja typografian suhteen on hieman erilainen, joten minä käyn läpi molempien kanssa. Ihannetapauksessa typografialla haluat lajitellasi tyyliäsi ennen hinting -prosessia tai sen aikana. Riippumatta siitä, että pikselin hinting olisi yksi viimeisistä asioista, joita teet.

Valitse ensin haluamasi typografia ja tee kopio kerroksesta ja muokkaa sitten kerros muotoon.

003

Näet, että teksti ryntää epätasaisesti verkosta sekä horisontaalisesti että pystysuorasta akselista. Korjata tämä, siirrymme varovasti kunkin kirjaimen ankkurointipisteisiin, kunnes ne kohdistuvat tarkemmin pikseliverkkoon. Tavoitteena on saada muodonlinjat lähelle, jos ei suoraan, ristikkoriviä. Zoomaa ankkurointipisteiden siirtämiseen tarkemmin. Tee näin usein pienennä, jotta muutokset näyttävät kunnollisilta.

Et halua mukautua tarkasti verkkoon, sillä se poistaa ensisijaisesti etusijoituksen edut. Sen sijaan yritä vain pitää asiat johdonmukaisina - sallivat vain puolipikseliä jokaisen akselin toisella puolella. Esimerkiksi, annan puolipisteiden aina oikealle ja kirjaimen yläosalle, kun taas vasemman- ja alareunojen pakottaminen ruudukkoon.

004

Kuten näette, "sisäänpääsy" on karkeasti säädetty, kun taas "kosketus" pysyy sellaisena kuin se on. Aivan kuten leikkaus, pikselin viittaaminen on paljon enemmän käsite kuin tiede. Se vie tarkan silmän etsiä ja selvittää, onko työ näyttävän paremmaksi tai huonompi säädön jälkeen. Älä lannistu, jos löydät typografisen pikselin hinting karkea, iterate ja jatka työskennellä sen kanssa. Jos tuloksesi näyttävät silti osaparilta, voit aina poistaa tason ja kopioida uudelleen alkuperäisestä. Kestää jonkin aikaa saada typografia erityisesti näyttää hyvältä, vain jatkaa ja ennemmin tai myöhemmin kovaa työtäsi maksaa.

Pixel hinting vektorimuodot

Yleensä pikselihyppyjen muotoja varataan kuvakkeille tai logolle. Jälleen haluat varmistaa, että muoto on koko ja pyörimissuunnassa, jota haluat sen ennen kuin aloitat sen säätämisen myöhemmin, voit heittää kaikki kovaa työtäsi. Muotojen säätö on paljon helpompaa ja vaatii vähemmän huomiota luontaisista yksityiskohdista. Sanotusti, monimutkaisempia muotoja kestää kauemmin ja niitä on vaikeampi säätää, joten on parasta aloittaa jotain yksinkertaista.

005

Ylhäältä näet, että nuoli ja ympyrä istuvat vain hieman siitä, missä me haluamme. Anti-aliasingin aiheuttama puolikamera muodostaa koko muodon epäselväksi. Joten siirykäämme kaiken pudottamaan verkkoon hieman paremmin.

006

Siellä me menemme! Säätämällä ankkurointipisteitä riviin riviin päädytään paljon terävämpiin kuvakkeisiin. On tärkeää mainita, että koska tämä kuvake on ympyrä, kaikki leveyden muutokset on myös peilattava korkeuteen. Älä myöskään unohda varmista, että muodon sisäosa näyttää hyvältä ja johdonmukaiselta. Jos katsot edellistä kuvaa, huomaat, että ympyrän sisäpuoliset sivut eivät ole ali-aliasoitettuja.

007

Tiivistettynä

Yllä oleva työ on tulos, joka näyttää terävältä ja ammattimaisemmalta. Tietenkin, voit soveltaa näitä tekniikoita paljon tärkeämpiin asioihin kuin painike.

Vaikka tietokoneesi tekemä automaattinen vasta-aliaksenne vaikuttaa hyväksyttävältä, se voi olla parempi. Joten, kun kyse on logosta tai tärkeistä kuvakkeista / typografiasta rasterimuodossa, pikselin viittaaminen on enemmän kuin pelkkä niche-taito; kunnes päivä, jolloin kaikki käytämme korkeita pikselitiheysmääriä, on tärkeää.