Designerens guide til Pixel Hinting
Pixel-perfekte ikoner og typografi skiller seg ut blant mengden på nettet. Selvfølgelig ønsker vi alle å streve for slik raffinert arbeid, men noen ganger, selv etter å ha prøvd, slutter vi fremdeles med noe litt ... mindre. Pixel Hinting er en av ferdighetene som tar en automatisk funksjon og forbedrer resultatene. Til tross for den ultrahøye oppløsningen av skjermer i dag, som Apples retina-skjermer, trenger vi fortsatt å "falle" glatte kurver, slik at vi ikke ender med et pixelert rot.
Mange designere og utviklere flytter mer mot SVG og vektorbaserte tilnærminger nå; med støtten blir bare bedre om dagen. Men likevel har vektorbaserte løsninger en lang vei å gå før de er modne nok til å bruke i produksjonen. SVG er flott for å vise vektorformer, men ikke så varmt ved å endre størrelsen på disse figurene. Så som alt annet der ute, er det en tid og sted for hver løsning.
Hva er vektorer?
Vektorer er i hovedsak gjengitte resultater av den matematiske representasjonen av en form. Når du ser noe på skjermen, er det fordi datamaskinen gjengitt disse objektene og bundet dem til pikslene på skjermen. Dermed har datamaskinen også tatt avgjørelser om hva som skal, og bør ikke, vises som hele piksler. For eksempel har bokstaven "D" både en perfekt rett linje og en buet en.
Som du ser, er den buede linjen på "D" ganske pikslet uten anti-aliasing. Så for å kompensere, når vektorformer blir gjengitt, er de vanligvis anti-aliased for å gi et mer ... robust utseende. I stedet for bare å vise piksler som faller innenfor vektoroversikten, blir piksler gradvis skygget ut. Dette triks hjernen din til å se en jevnere linje på buede figurer som ikke knytter seg perfekt til pikselruten.
Over kan du se hvordan den gjengitte "D" gis det som kalles halvpiksler for å fjerne den skarpe pixelasjonen. Denne samme funksjonen introduserer imidlertid også et problem: datamaskiner er forferdelige å finne ut hva som er visuelt tiltalende. Så mens du legger til disse halvpikslene, får de avrundede hjørnene seg fantastisk, det gjør også den øverste og nedre indre linjen ser sløret ut. Den automatiske anti-aliasing som oppstår når en vektorform gjøres, gjør at de fleste deler av figurer og typografi ser bra ut, men etterlater andre på en enda dårligere kvalitet enn den begynte med.
Hei, piksel hinting.
Nå som du har en kort bakgrunn på vektorformer og hvordan de fungerer, la oss hoppe inn i det virkelige arbeidet. Pixel-hinting innebærer å flytte vektorens ankerpunkter for å hvile på pikselgrenser på en mer estetisk tiltalende måte. Gjør de rette linjene mer perfekte, mens du fortsatt forlater halvpikslene til kurvene. Vanligvis brukes piksel-hinting på typografi og former for rasterbilder (logoer, ikoner, merkevarebygging osv.). Nå, viktigst, for å ordentlig justere vektoren må det være i størrelse og form du vil ha den. Når du har piksel antydet arbeidet ditt, kan det rotere eller endre størrelsen på det - og sannsynligvis ville kaste alt som virker borte, ved å automatisk eliminere det igjen. Før vi begynner, må du kontrollere at følgende innstillinger er justert (jeg bruker Photoshop for denne oppgaven):
- Slå på pikselruten din (Vis> Vis> Rutenett, kontroller også at Ekstra er merket over Vis-menyen)
- Pass på at rutenettet har en rutenett hver 10 piksler, med 10 underavdelinger. Eller noe lignende slik at det er en linje mellom hver piksel.
- Deaktiver snapping (Vis> fjern markeringen). Vi ønsker ikke at ankerpunkter knuses ved 1px trinn, vi vil flytte poeng i piksler.
Pixel hinting typografi
Prosessen for å gjøre figurer mot typografi er litt annerledes, så jeg går deg gjennom begge deler. Ideelt med typografi, vil du kjerne din type før eller under hintingsprosessen. Uansett, piksel hinting bør være en av de siste tingene du gjør.
Først, velg typografi du vil pikselhint og lag en kopi av laget, og transform det laget til en form.
Du kan se at teksten faller uhyggelig ut av rutenettet, både på den horisontale og den vertikale aksen. For å fikse dette, vil vi forsiktig knyte hver bokstavs ankerpunkter til de justerer seg nærmere med pikselruten lagt ut. Målet er å få formen linjene lukke, hvis ikke direkte på grid linjene. Zoom inn for å nudge ankerpunkter mer presist. Mens du gjør dette, må du ofte zoome ut for å sikre at justeringene ser bra ut.
Du ønsker ikke å tilpasse seg nettverket, da det tar bort fordelene ved anti-aliasing i utgangspunktet. Prøv å bare holde ting konsistent, bare la halvpiksler på den ene siden av hver akse. For eksempel tillater jeg alltid halvpiksler til høyre og toppen av bokstaver, mens du tvinger venstre og nedre kantene til å spyle seg på nettet.
Som du kan se, er "komme inn" blitt grovt justert, mens "berøring" forblir som det er. Akkurat som kjærlighet, er pikselhinting mye mer et håndverk enn en vitenskap. Det tar et godt øye med å se og se om arbeidet ser bedre ut eller verre etter justering. Ikke vær motløs hvis du finner typografisk piksel hinting grov, iterate og fortsett å jobbe med det. Hvis resultatet fortsatt ser underparametre, kan du alltid slette laget og kopiere det friske fra originalen igjen. Det tar litt tid å få typografi spesielt for å se bra ut, bare fortsett å gå, og før eller senere vil det harde arbeidet lønne seg.
Pixel hinting vektorformer
Generelt er pikselhintende former reservert for ikoner eller logoer. Igjen, du vil sørge for at formen din er i størrelse og rotasjon du vil ha den før du begynner som å justere den senere, kan kaste bort alt ditt harde arbeid. Justering av former er mye enklere og krever mindre øye for egen detalj. Når det er sagt, tar mer komplekse former lengre og er vanskeligere å justere, så det er best å starte med noe enkelt.
Over kan du se at pilen og sirkelen sitter litt utenfor hvor vi vil like dem. Halvpikslene opprettet av anti-aliasing, forårsaker at hele formen ser ut som uklar. Så la oss knuse alt for å falle på rutenettet litt bedre.
Der går vi! Ved å justere ankerpunktene til linje med rutenettet, kommer vi til ende med et mye skarpere ikon. Det er viktig å nevne at siden dette ikonet er en sirkel, måtte eventuelle justeringer av bredden også speiles til høyden også. Også, ikke glem å sørge for at innsiden av formen ser bra ut og konsistent også. Hvis du ser på det forrige bildet, merker du at innsiden av sirkelen ikke er anti-aliased det samme.
For å konkludere
Med arbeidet ovenfor er resultatet et bilde som ser skarpere og mer profesjonelt ut. Selvfølgelig kan du bruke disse teknikkene til mye viktigere ting enn en knapp.
Mens den automatiske anti-aliasing utført av datamaskinen ser akseptabel ut, kan det være bedre. Så når det kommer til logoen din eller viktige ikoner / typografi i rasterform, er pikselhinting mer enn bare en nisje ferdighet; til dagen vi alle bruker høy pixel tetthet skjermer, er det viktig.