Designerens guide till Pixel Hinting
Pixel-perfekta ikoner och typografi sticker ut bland publiken online. Självklart vill vi alla sträva efter ett sådant raffinerat arbete, men ibland, även efter försöket, hamnar vi ändå lite lite ... mindre. Pixel Hinting är en av de färdigheter som tar en automatisk funktion och förbättrar resultatet. Trots den ultrahöga upplösningen av bildskärmar idag, som Apples näthinnan visar, behöver vi fortfarande "fake" släta kurvor så att vi inte hamnar med en pixelerad röra.
Många konstruktörer och utvecklare flyttar mer mot SVG och vektorbaserade tillvägagångssätt nu. med stödet blir det bara bättre om dagen. Men likväl har vektorbaserade lösningar en lång väg att gå innan de är mogna nog att använda i produktionen. SVG är utmärkt för att visa vektorformer, men inte så varmt när du resizing dessa former. Så som allt annat där ute, finns det en tid och plats för varje lösning.
Vad är vektorer?
Vektorer är väsentligen gjorda resultat av den matematiska representationen av en form. När du ser något på skärmen beror det på att datorn har gjort dessa objekt och bundet dem till pixlarna på din bildskärm. Därefter har datorn också fattat beslut om vad som borde och bör inte visas som hela pixlar. Till exempel har bokstaven "D" både en perfekt rak linje och en krökt.
Som du kan se, är den krökta linjen på "D" ganska pixelerad, utan att eliminera aliasing. Så för att kompensera, när vektorformer görs är de vanligtvis anti-aliased för att ge ett mer ... robust utseende. Istället för att endast visa pixlar som faller inom vektorgraden helt, skärs pixlarna gradvis ut. Det här trickar din hjärna till att se en jämnare linje i böjda former som inte klämmer fast till pixelnätet perfekt.
Ovan kan du se hur den gjorda "D" ges vad som kallas halvpixlar för att hjälpa till att ta bort den skarpa pixelationen. Men samma sak introducerar också ett problem: datorer är hemska att räkna ut vad som är visuellt tilltalande. Så samtidigt som du lägger till dessa halvpixlar gör de rundade hörnen så fantastiska, det gör också den övre / nedre innerlinjen ser suddig ut. Den automatiska anti-aliasing som uppstår när en vektorform görs slutar med att göra de flesta delar av former och typografi ser bra ut, men lämnar andra i en ännu sämre kvalitet än den började med.
Hej pixel antydning
Nu när du har en kort bakgrund på vektorgrader och hur de fungerar, låt oss hoppa in i det verkliga arbetet. Pixelhinting innebär att man flyttar vektorns ankarpunkter för att vila på pixelgränserna på ett mer estetiskt tilltalande sätt. Göra de raka linjerna mer perfekta, samtidigt som de lämnar halvpixlarna till kurvorna. Vanligtvis används pixelhinting på typografi och former för rasterbilder (logotyper, ikoner, branding etc.). Nu, viktigast av allt, för att korrekt anpassa din vektor måste det vara i storlek och form du vill ha den. När du har pixel antydde ditt arbete, kan det rotera eller ändra storlek på det - och förmodligen skulle du kasta allt som fungerar bort genom att automatiskt mot-aliasing det igen. Innan vi börjar, se till att följande inställningar justeras (jag använder Photoshop för den här uppgiften):
- Slå på ditt pixelnät (Visa> Visa> Rutnät, se till att Extra är markerat ovanför Visa-menyn)
- Se till att ditt rutnät har en räckvidd var 10 pixlar, med 10 underavdelningar. Eller något liknande så att det finns en linje mellan varje pixel.
- Inaktivera snapping (Visa> avmarkera snap). Vi vill inte ha ankarpunkter som snappar vid 1px steg, vi vill flytta punkter i pixlar.
Pixel hinting typografi
Processen för att göra former mot typografi är lite annorlunda, så jag ska gå igenom båda. Helst med typografi vill du kärna din typ före eller under din antydningsprocess. Oavsett, pixelhinting bör vara en av de sista sakerna du gör.
Välj först typografi du vill pixelhint och gör en kopia av skiktet och omvandla sedan det här skiktet till en form.
Du kan se att texten faller obehagligt ur rutnätet, både på den horisontella och den vertikala axeln. För att åtgärda detta ska vi försiktigt knyta varje bokstavs ankarpunkter tills de inriktar sig närmare på pixelnätet som ligger ut. Målet är att få formen linjerna nära, om inte direkt på, raderna. Zooma in för att nudge ankarpunkterna mer exakt. Medan du gör det här, zoomar du ofta ut för att se till att dina justeringar ser bra ut.
Du vill inte överensstämma exakt med nätet, eftersom det tar bort fördelarna med anti-aliasing i första hand. Istället försöker du helt enkelt hålla sakerna konsekventa - bara tillåta halvpixlar på ena sidan av varje axel. Till exempel tillåter jag alltid halvpixlar till höger och övre bokstäver, samtidigt som de vänstra och nedre kanterna spolas i rutnätet.
Som du kan se har "get in" justerats grovt, medan "touch" kvarstår som det är. Precis som kerning är pixelhinting mycket mer en hantverk än en vetenskap. Det är angeläget att se och se om arbetet ser bättre ut eller sämre efter justering. Bli inte avskräckt om du hittar typografisk pixelhinting grov, iterera och fortsätt att arbeta med det. Om resultatet fortfarande ser underpar, kan du alltid ta bort lagret och kopiera friskt från originalet igen. Det tar lite tid att få typografi särskilt för att se bra ut, fortsätt fortsätta och förr eller senare kommer ditt hårda arbete att löna sig.
Pixelhintande vektorformer
I allmänhet är pixelformade former reserverade för ikoner eller logotyper. Återigen vill du se till att din form är i storlek och rotation du vill ha innan du börjar som att justera den senare kan kasta bort allt ditt hårda arbete. Justering av former är mycket enklare och kräver mindre av ett öga för egen detalj. Det sägs att mer komplexa former tar längre tid och är svårare att anpassa sig, så det är bäst att börja med något enkelt.
Ovan kan du se att vår pil och cirkel sitter bara lite där vi vill gilla dem. Halvpixlarna som skapas av anti-aliasing orsakar att hela formen ser ut som suddig som ett resultat. Så låt oss knyta allt för att falla på gallret lite bättre.
Där går vi! Genom att justera ankarpunkterna så att de stämmer överens med gallret slutar vi med en mycket skarpare ikon. Det är viktigt att nämna att eftersom denna ikon är en cirkel, måste eventuella justeringar av bredden också speglas till höjden också. Också glöm inte att se till att inuti formen ser bra ut och konsekvent också. Om du tittar på den föregående bilden ser du att insidan av cirkeln inte är anti-aliased samma.
Sammanfattningsvis
Med arbetet ovan är resultatet en bild som ser skarpare och professionellare ut. Naturligtvis kan du använda dessa tekniker till mycket viktigare saker än en knapp.
Medan den automatiska anti-aliasing som görs på din dator ser acceptabel ut, kan det vara bättre. Så när det gäller din logotyp eller viktiga ikoner / typografi i rasterform, är pixelhinting mer än bara en nischkunskap; tills den dag vi alla använder hög pixeldensitetsdisplayer är det viktigt.