Pixelperfectie realiseren bij het ontwerpen van UI-elementen kan heel eenvoudig zijn dankzij de "snap to pixels" -functie van Photoshop. Helaas is deze functie niet beschikbaar voor het ellipsgereedschap - het creëren van heldere, pixel-perfecte cirkels kan daarom extra aandacht vereisen voor detail. Ik ga je een klein geheim vertellen dat "snap to pixels" beschikbaar maakt bij het maken van cirkels ...
Met de toenemende behoefte aan ontwerpen die schalen, wordt ontwerpen met vormlagen in photoshop steeds belangrijker. Vormlagen zijn gebaseerd op vectorpaden, waardoor het wijzigen van hun grootte, kleur en vorm vrij eenvoudig is. Als u echter niet voorzichtig bent, kunt u bij het maken van vormlagen gemakkelijk van het pixelraster vallen, wat zorgt voor wazig, onprofessioneel ontwerp.
Het bereiken van pixel-perfectie met vormlagen is vrij eenvoudig, dankzij Photoshop's "Snap to Pixels" -functie voor vormlagen.
Helaas is, zoals u wellicht al weet, de functie "Snap to pixels" niet beschikbaar voor het ellipsgereedschap.
Als je van plan bent om een vormlaag te maken voor die mooie cirkelavatars in je interface, moet je de precisie van je cirkel onderzoeken en of deze correct op het pixelraster valt (herhalende zoomlenzen en minuscule aanpassingen vereisen, die vermoeiend kunnen worden) ).
Als er alleen maar "snap to pixels" waren voor cirkels, toch? Nou, er is een nette kleine oplossing! U kunt de "afgeronde rechthoek" -tool gebruiken om cirkels te tekenen door eenvoudig een straal op te geven die minstens de helft is van de cirkel die u aan het maken bent.
Ik weet wat je misschien denkt: "Een rechthoek gereedschap om een cirkel te maken?" Ik weet dat het misschien raar klinkt, maar vertrouw me hier.
Zorg er nu voor dat het selectievakje "Snap to pixels" gemarkeerd is (in CS6 is dit het selectievakje "Randen uitlijnen", of "Snap Vector Tools en Transforms to Pixel Grid" via de voorkeuren). Dit zorgt ervoor dat onze afgeronde rechthoek aan het pixelraster blijft plakken.
Voer nu een waarde in voor de grensradius die ten minste de helft van de afmetingen van de cirkel is die u wilt tekenen. Of voer in plaats van de wiskunde gewoon "1000px" in, want dat is de grootste waarde die Photoshop accepteert (dit betekent dat u niet kunt eerste teken een cirkel groter dan 2000 pixels, maar je kunt het resultaat altijd opschalen als dat nodig is).
Houd SHIFT ingedrukt en teken je cirkel! (Door SHIFT ingedrukt te houden blijven de verhoudingen van de afgeronde rechthoek behouden).
Als u een te kleine straal creëert, terwijl uw afgeronde rechthoek groter wordt, omzeilt deze uiteindelijk de randstraal, waarna u een rechthoek met afgeronde randen krijgt.
Zie je hoe gemakkelijk dat was? Zoals eerder vermeld, is de eenvoudige truc om de afgeronde rechthoek een randstraal te geven die minstens de helft van de afmetingen heeft. Nu kunt u gemakkelijk pixel-perfecte, heldere, schaalbare cirkels maken in Photoshop!