De Ontwerper's Guide to Pixel Hinting
Pixel-perfecte pictogrammen en typografie opvallen tussen de menigte online. Uiteraard willen we allemaal streven naar dergelijk verfijnd werk, maar soms komen we zelfs na het proberen toch iets minder ... minder. Pixel Hinting is een van de vaardigheden die een automatische functie vereist en de resultaten ervan verbetert. Ondanks de ultrahoge resolutie van schermen van vandaag, zoals de retina-displays van Apple, moeten we nog steeds vloeiende lijnen nabootsen, anders krijgen we een gepixelde puinhoop.
Veel ontwerpers en ontwikkelaars evolueren nu meer naar SVG en vectorgebaseerde benaderingen; met de ondersteuning alleen maar beter met de dag. Maar toch hebben vectorgebaseerde oplossingen nog een lange weg te gaan voordat ze volwassen genoeg zijn om te gebruiken in de productie. SVG is geweldig voor het weergeven van vectorvormen, maar niet zo heet bij het wijzigen van de grootte van die vormen. Dus zoals alles wat er is, is er een tijd en plaats voor elke oplossing.
Wat zijn vectoren?
Vectoren zijn in wezen resultaten van de wiskundige weergave van een vorm. Wanneer u iets op uw scherm ziet, komt dat omdat uw computer die objecten heeft gerenderd en ze heeft gebonden aan de pixels op uw scherm. Daarbij heeft uw computer ook beslissingen genomen over wat wel en niet als volledige pixels moet worden weergegeven. Bijvoorbeeld, de hoofdletter "D" heeft zowel een perfect rechte lijn als een gebogen letter.
Zoals u kunt zien, is zonder anti-aliasing de gebogen lijn op de "D" vrij korrelig. Dus om te compenseren, wanneer vectorvormen worden gerenderd, zijn ze meestal anti-aliased om een meer robuuste uitstraling te bieden. In plaats van alleen pixels weer te geven die volledig binnen de vectoromtrek vallen, worden pixels geleidelijk grijs weergegeven. Dit zorgt ervoor dat je hersenen een vloeiendere lijn zien op gebogen vormen die niet perfect in het pixelraster klikken.
Hierboven ziet u hoe de gerenderde "D" halfpixels krijgt om de rafelige pixels te verwijderen. Deze zelfde functie introduceert echter ook een probleem: computers zijn vreselijk in het uitvinden van wat visueel aantrekkelijk is. Dus terwijl het toevoegen van deze halve pixels de afgeronde hoeken er fantastisch doet uitzien, maakt het ook dat de boven / onderkant binnenlijn er vaag uitziet. De automatische anti-aliasing die optreedt wanneer een vectorvorm wordt gerenderd, zorgt ervoor dat de meeste vormen van vormen en typografie er geweldig uitzien, maar laat anderen met een nog slechtere kwaliteit dan waarmee ze begonnen zijn.
Hallo, pixelhinting.
Nu je een korte achtergrond hebt over vectorvormen en hoe ze werken, laten we het echte werk ingaan. Pixel-hints impliceren dat de ankerpunten van de vector op een meer esthetische manier op de randen van de pixel worden geplaatst. Maak die rechte lijnen perfecter, terwijl je de halve pixels nog steeds in de bochten laat. Meestal wordt pixelhints gebruikt op typografie en vormen voor rasterafbeeldingen (logo's, pictogrammen, branding, enz.). Nu, belangrijker nog, om je vector goed aan te passen, moet hij in de gewenste grootte en vorm zijn. Als je pixel een hint naar je werk geeft, kan roteren of het formaat ervan veranderen - en dat zou waarschijnlijk al dat werk weggooien door het automatisch opnieuw te anti-aliasen. Voordat we aan de slag gaan, moet je controleren of de volgende instellingen zijn aangepast (ik zal Photoshop voor deze taak gebruiken):
- Schakel uw pixelraster in (Weergave> Tonen> Raster, zorg er ook voor dat Extra's zijn aangevinkt boven het Show-menu)
- Zorg ervoor dat uw raster elke 10 pixels een rasterlijn heeft met 10 onderverdelingen. Of iets dergelijks, zodat er een lijn is tussen elke pixel.
- Snapping uitschakelen (Beeld> Deselecteer snap). We willen niet dat ankerpunten met stappen van 1px snappen, we willen punten verplaatsen binnen pixels.
Pixel typografische hint
Het proces voor het maken van vormen versus typografie is iets anders, dus ik zal je door beide heen leiden. In het ideale geval met typografie, wilt u uw type kerncoderen vóór of tijdens uw hintproces. Hoe dan ook, pixelhints moeten een van de laatste dingen zijn die je doet.
Selecteer eerst de typografie waarvan u een pixelhint wilt maken en maak een kopie van de laag en transformeer die laag vervolgens in een vorm.
U kunt zien dat de tekst onhandig van het raster valt, zowel op de horizontale als de verticale as. Om dit te verhelpen, zullen we de ankerpunten van elke letter voorzichtig verschuiven totdat deze beter aansluiten op het opgestelde pixelraster. Het doel is om de vormlijnen dicht bij elkaar te krijgen, zo niet rechtstreeks, op de rasterlijnen. Zoom in om ankerpunten nauwkeuriger aan te duwen. Terwijl u dit doet, zoomt u vaak uit om ervoor te zorgen dat uw aanpassingen er goed uitzien.
U wilt niet precies aan het grid voldoen, omdat dat de voordelen van anti-aliasing in de eerste plaats wegneemt. Probeer in plaats daarvan eenvoudig de zaken consistent te houden - pas aan elke kant van elke as slechts een halve pixel toe. Ik laat bijvoorbeeld altijd halve pixels rechts en bovenaan letters toe, terwijl de linker- en onderkant naar het raster worden gedwongen.
Zoals je kunt zien, is het "instappen" ongeveer aangepast, terwijl de "aanraking" blijft zoals hij is. Net als kerning is pixelhints veel meer een ambacht dan een wetenschap. Er is een scherp oog voor nodig om te kijken en te onderscheiden of het werk er na correctie beter of slechter uitziet. Wees niet ontmoedigd als je typografische pixelhints ruw vindt, itereert en ermee blijft werken. Als uw resultaat er nog steeds ondermaats uitziet, kunt u de laag altijd verwijderen en opnieuw kopiëren van het origineel. Het kost wat tijd om met name typografie er goed uit te laten zien, gewoon door te gaan en vroeg of laat zal je harde werk zijn vruchten afwerpen.
Pixel hinting vectorvormen
Over het algemeen zijn pixel-hint-vormen gereserveerd voor pictogrammen of logo's. Nogmaals, je wilt er zeker van zijn dat je vorm de grootte en rotatie heeft die je wilt voordat je begint, want het later aanpassen zou al je harde werk kunnen weggooien. Het aanpassen van vormen is een stuk eenvoudiger en vereist minder oog voor intrinsieke details. Dat gezegd hebbende, meer complexe vormen duren langer en zijn moeilijker aan te passen, dus het is het beste om te beginnen met iets eenvoudigs.
Hierboven zie je dat onze pijl en cirkel net iets afwijken van de plaats waar we ze graag zouden willen hebben. De half-pixels gemaakt door anti-aliasing zorgen ervoor dat de hele vorm er wazig uitziet. Dus laten we alles aansturen om een beetje beter op de grid te vallen.
Daar gaan we! Door de ankerpunten aan te passen om op één lijn te komen met het raster, krijgen we een veel scherper pictogram. Het is belangrijk om te vermelden dat aangezien dit pictogram een cirkel is, aanpassingen aan de breedte ook naar de hoogte moeten worden gespiegeld. Vergeet ook niet om ervoor te zorgen dat de binnenkant van de vorm er goed en consistent uitziet. Als u naar de vorige afbeelding kijkt, ziet u dat de binnenkant van de cirkel niet anti-aliased hetzelfde is.
Ten slotte
Met het bovenstaande werk is het resultaat een beeld dat er scherper en professioneler uitziet. Natuurlijk kun je deze technieken toepassen op veel belangrijker dingen dan een knop.
Hoewel de automatische anti-aliasing die door uw computer wordt gedaan, acceptabel lijkt, kan dit beter zijn. Dus als het gaat om uw logo of belangrijke pictogrammen / typografie in rastervorm, is pixelhinting meer dan alleen een nichevaardigheid; Tot de dag dat we allemaal displays met hoge pixeldichtheid gebruiken, is het essentieel.