Share
Att uppnå pixel perfektion när du utformar UI-element kan vara enkelt tack vare Photoshops "snap to pixels" -funktion. Tyvärr är den här funktionen inte tillgänglig för ellipsverktyget - skapa skarpa pixel-perfekta cirklar kan därför kräva ytterligare detaljerad uppmärksamhet. Jag kommer att släppa in dig på en liten hemlighet som gör "snap to pixels" tillgängligt när du skapar cirklar ...
Med det ökande behovet av mönster som skala, blir utformning med formlag i Photoshop allt viktigare. Formlager är baserade på vektorbanor, vilket gör att de ändrar sin storlek, färg och form ganska enkelt. Men om du inte är försiktig, när du skapar formlag kan de lätt falla bort från pixelnätet, vilket gör att det är suddigt, oprofessionellt design.
Att uppnå pixel-perfektion med formlag är ganska lätt tack vare Photoshops "Snap to Pixels" -funktion för formlag.
Tyvärr, som du kanske vet, är funktionen "snap to pixels" inte tillgänglig för ellipsverktyget.
Om du planerar att skapa ett formlag för de vackra cirkelavatarna i ditt gränssnitt, måste du undersöka precisionen i din cirkel och om den faller på pixelnätet korrekt (kräver repetitiv zoomning och minimala justeringar som kan bli tröttsamma ).
Om det bara fanns "snap to pixels" för cirklar, eller hur? Tja, det finns en snygg liten lösning! Du kan använda "runda rektangelverktyget" för att rita cirklar genom att helt enkelt ge en radie som är minst hälften av cirkeln som du skapar.
Jag vet vad du kanske tänker, "Ett rektangelverktyg för att skapa en cirkel?" Jag vet att det kanske låter konstigt, men lita på mig här.
Kontrollera nu att kryssrutan "Snap to Pixels" är markerad (i CS6 är det här kryssrutan "Justera kanter" eller "Snap Vector Tools och Transforms to Pixel Grid" via inställningarna). Detta kommer att se till att vår rundade rektangel sticks till pixelnätet.
Ange nu ett värde för gränsenradie som är minst hälften av cirkelens dimensioner du vill rita. Eller istället för att matematiken bara anger "1000px", eftersom det är det största värdet Photoshop accepterar (det betyder att du inte kan initialt rita en cirkel som är större än 2000 pixlar, men du kan alltid skala resultatet om det behövs).
Håll ner SHIFT och rita din cirkel! (Hållning SHIFT kommer behålla den avrundade rektangelens proportioner).
Om du skapar en gränsradie som är för liten, då din avrundade rektangel växer, kommer dess dimensioner så småningom att kringgå gränsenradieen, då kommer du att ha en rektangel med rundade kanter.
Se hur lätt det var? Som nämnts tidigare är det enkla tricket att ge den avrundade rektangeln en gränsradie minst hälften av dess dimensioner. Nu kan du enkelt skapa pixel-perfekta, skarpa, skalbara cirklar i Photoshop!
Accentsconagua