Designerens Guide til Pixel Hinting
Pixel-perfekte ikoner og typografi skiller sig ud blandt mængden online. Selvfølgelig ønsker vi alle at stræbe efter sådan raffineret arbejde, men nogle gange endda efter at have forsøgt, slutter vi stadig med noget lidt ... mindre. Pixel Hinting er et af de færdigheder, der tager en automatisk funktion og forbedrer resultaterne. På trods af den ultrahøj opløsning af skærme i dag, som Apples nethinden viser, skal vi stadig "falske" glatte kurver, så vi ikke ender med et pixeleret rod.
Mange designere og udviklere bevæger sig mere mod SVG og vektorbaserede tilgange nu; med støtten bliver bare bedre på dagen. Men alligevel har vektorbaserede løsninger en lang vej at gå, før de er modne nok til at bruge i produktionen. SVG er fantastisk til visning af vektorformer, men ikke så varmt ved at ændre størrelsen på disse figurer. Så som alt andet derude, er der en tid og sted for hver løsning.
Hvad er vektorer?
Vektorer er i det væsentlige gengivet resultater af den matematiske repræsentation af en form. Når du ser noget på skærmen, skyldes det, at din computer har gengivet disse objekter og bundet dem til pixelerne på din skærm. Dermed har din computer også lavet beslutninger om, hvad der skal og skal ikke vises som hele pixels. For eksempel har stor bogstav "D" både en perfekt ret linje og en buet en.
Som du kan se, er den buede linie på "D" uden pixelering ganske pixeleret uden anti-aliasing. Så for at kompensere, når vektorformer gengives, er de normalt anti-aliased for at give et mere ... robust udseende. I stedet for kun at vise pixler, der falder inden for vektoroversigten, bliver pixler gradvist skygget ud. Dette tricks din hjerne til at se en glattere linje på buede figurer, der ikke snapper til pixelgitteret perfekt.
Ovenfor kan du se, hvordan den gengivne "D" er givet, hvad der kaldes halvpixel, for at hjælpe med at fjerne den forrevne pixelation. Denne samme funktion introducerer imidlertid også et problem: computere er forfærdelige at finde ud af, hvad der er visuelt tiltalende. Så samtidig med at disse halvpixler tilføjes, ser de afrundede hjørner fantastisk ud, det gør også den øverste / nederste indre linje blur. Den automatiske anti-aliasing, der opstår, når en vektorform udføres, ender med at gøre de fleste dele af figurer og typografi ser godt ud, men efterlader andre en endnu dårligere kvalitet end den begyndte med.
Hej, pixel hinting.
Nu hvor du har en kort baggrund på vektorformer og hvordan de virker, lad os hoppe ind i det virkelige arbejde. Pixel hinting indebærer at flytte vektorens ankerpunkter til at hvile på pixelgrænser på en mere æstetisk tiltalende måde. Gør disse lige linjer mere perfekte, mens du stadig forlader halvpixlerne til kurverne. Mest almindeligt benyttes pixelhinting på typografi og figurer til rasterbilleder (logoer, ikoner, branding osv.). Nu, vigtigst af alt, for at kunne justere din vektor korrekt skal den være i den størrelse og form, du ønsker det. Når du har pixel antydet dit arbejde, kunne det rotere eller ændre størrelsen - og sandsynligvis ville kaste alt det, der fungerer væk ved automatisk at anti-aliasing det igen. Inden vi kommer i gang, skal du sørge for, at følgende indstillinger er justeret (jeg bruger Photoshop til denne opgave):
- Tænd din pixelgitter (Vis> Vis> Gitter, sørg også for, at Ekstra er markeret over menuen Vis)
- Sørg for, at dit net har en gitter hver 10 pixel, med 10 underafsnit. Eller noget lignende, så der er en linje mellem hver pixel.
- Deaktiver snapping (Vis> fjern markeringen). Vi ønsker ikke, at ankerpunkter snapper i 1px intervaller, vi ønsker at flytte punkter i pixels.
Pixel hinting typografi
Processen til at lave figurer mod typografi er lidt anderledes, så jeg går igennem begge dele. Ideelt med typografi, vil du kerne din type før eller under din hinting proces. Uanset om pixel hinting bør være en af de sidste ting, du gør.
Først skal du vælge den typografi, du vil pixel hint og lave en kopi af laget, og derefter omdanne det pågældende lag til en form.
Du kan se, at teksten falder ubehageligt ud af gitteret både på den vandrette og den lodrette akse. For at løse dette skal vi forsigtigt pusle hver bogstavs ankerpunkter, indtil de justeres tættere på pixelgitteret, der er lagt ud. Målet er at få formen linjer tæt, hvis ikke direkte på nettet linjer. Zoom ind for at nudge ankerpunkter mere præcist. Mens du gør dette, skal du ofte zoome ud for at sikre, at dine tilpasninger ser godt ud.
Du ønsker ikke at tilpasse sig netværket, da det fjerner fordelene ved anti-aliasing i første omgang. I stedet forsøger du blot at holde tingene konsekvente - kun tillad halvpixel på den ene side af hver akse. For eksempel tillader jeg altid halvpixel til højre og toppen af bogstaverne, mens du tvinger venstre og nederste kantene til at spyle i nettet.
Som du kan se, er "get in" blevet groft justeret, mens "touch" forbliver som det er. Ligesom kiggeri er pixelhinting meget mere et håndværk end en videnskab. Det tager et øje med at se og se, om arbejdet ser bedre ud eller værre efter justering. Lad være med at blive afskrækket, hvis du finder typografisk pixel hinting grov, iterere og fortsæt med at arbejde med det. Hvis dit resultat stadig ser underpar, kan du altid slette laget og kopiere det friske fra originalen igen. Det tager lidt tid at få typografi til at se godt ud, bare fortsæt, og før eller senere vil dit hårde arbejde betale sig.
Pixel hinting vektor figurer
Generelt er pixelhintende former forbeholdt ikoner eller logoer. Igen vil du sørge for, at din form er på den størrelse og den rotation, du vil have det, før du begynder som at justere det senere, kan smide alt dit hårde arbejde. Justering af former er meget nemmere og kræver mindre øje for egen detaljer. Når det er sagt, tager mere komplekse former længere og er sværere at justere, så det er bedst at starte med noget simpelt.
Ovenfor kan du se, at vores pil og cirkel sidder lige lidt, hvor vi gerne vil have dem. De halvpixeler, der opstår ved anti-aliasing, får hele formen til at se sløret ud som følge heraf. Så lad os pusle alt for at falde på nettet lidt bedre.
Sådan der! Ved at justere ankerpunkterne til linje med nettet, slutter vi med et meget skarpere ikon. Det er vigtigt at nævne, at da dette ikon er en cirkel, måtte eventuelle justeringer af bredden også afspejles i højden. Glem også at sørge for, at indersiden af formen også ser godt ud. Hvis du ser på det forrige billede, så bemærker du, at indersiden af cirklen ikke er anti-aliased det samme.
Afslutningsvis
Med arbejdet ovenfor er resultatet et billede, der ser skarpere og mere professionelt ud. Selvfølgelig kan du anvende disse teknikker til meget vigtigere ting end en knap.
Mens den automatiske anti-aliasing udført af din computer ser acceptabel ud, kan det være bedre. Så når det kommer til dit logo eller vigtige ikoner / typografi i rasterform, er pixel-hinting mere end bare en niche-færdighed; indtil den dag, vi alle bruger høj pixel density displays, er det vigtigt.