Share
Å oppnå piksel perfeksjon når du utformer UI-elementer kan være enkelt takket være Photoshops "snap to pixels" -funksjon. Dessverre er denne funksjonen ikke tilgjengelig for ellipseverktøyet - å skape skarpe, piksel-perfekte sirkler kan derfor kreve ytterligere oppmerksomhet på detaljer. Jeg kommer til å gi deg en liten hemmelighet som vil gjøre "snap to pixels" tilgjengelig når du oppretter sirkler ...
Med det økende behovet for design som skaleres, blir utforming med formlag i photoshop stadig viktigere. Formlag er basert på vektorbaner, noe som gjør at størrelsen, fargen og formen blir ganske enkle. Men hvis du ikke er forsiktig, når du lager formlag, kan de lett falle av pikselruten, noe som gjør for uklart, uprofesjonelt design.
Å oppnå piksel-perfeksjon med formlag er ganske enkelt, takket være Photoshops "Snap to Pixels" -funksjon for formlag.
Dessverre, som du kanskje allerede vet, er funksjonen "snap to pixels" ikke tilgjengelig for ellipseverktøyet.
Hvis du planlegger å lage et formlag for de vakre sirkelavatatene i grensesnittet ditt, må du undersøke nøyaktigheten av sirkelen din og om den faller på pikselruten på riktig måte (krever repetitiv zooming og tynne justeringer, noe som kan bli slitsomt ).
Hvis bare det var "snap to pixels" for sirkler, ikke sant? Vel, det er en fin liten løsning! Du kan bruke "avrundet rektangulært verktøy" for å tegne sirkler ved bare å gi en radius som er minst halvparten av sirkelen du lager.
Jeg vet hva du kanskje tenker, "Et rektangelverktøy for å lage en sirkel?" Jeg vet at det høres kanskje rart ut, men stole på meg her.
Kontroller at kryssruten "Snap to Pixels" er markert (i CS6 er dette avmerkingsboksen "Juster kantene", eller "Snap Vector Tools og Transforms to Pixel Grid" via innstillingene). Dette vil sørge for at vårt avrundede rektangel stikker til pikselruten.
Skriv inn en verdi for grenseradiusen som er minst halvparten av sirkelen du vil tegne. Eller i stedet for å gjøre matematikken bare skriv inn "1000px", da det er den største verdien Photoshop vil akseptere (det betyr at du ikke kan i utgangspunktet tegne en sirkel større enn 2000 piksler, men du kan alltid skalere resultatet opp hvis det er nødvendig).
Hold nede SHIFT og trek sirkelen din! (Hold SHIFT vil beholde det avrundede rektangelets proporsjoner).
Hvis du lager en grense radius som er for liten, da det runde rektangelet vokser, vil dimensjonene til slutt gå forbi grenseradiusen, hvoretter du får et rektangel med avrundede kanter.
Se hvor lett det var? Som nevnt tidligere, er det enkle trikset å gi det avrundede rektangel en kantradius på minst halvparten av dimensjonens størrelse. Nå kan du enkelt lage pixel-perfekte, skarpe, skalerbare sirkler i Photoshop!
Accentsconagua