Quick Tips: Lage Crisp, Pixel Perfect Circles i Photoshop

Oppnå pixel perfeksjon når designe UI elementer kan være enkelt, takket være Photoshops "snap til piksler" -funksjonen. Dessverre er ikke denne funksjonen tilgjengelig for ellipsen verktøy - skape skarpe, pikselperfekt sirkler kan derfor kreve ekstra oppmerksomhet på detaljer. Jeg kommer til å fortelle deg om en liten hemmelighet som vil gjøre "snap til piksler" tilgjengelig når du oppretter sirkler ..

formlag og «Lås til Pixels"
< p> med det økende behovet for design som målestokk, designe med formlag i photoshop blir mer og mer viktig. Formlag er basert på vektorbaner, noe som gjør endrer sin størrelse, farge og form ganske enkel. Men hvis du ikke er forsiktig, når du oppretter formlag de kan lett falle av pixel-grid, som gir uklare, uprofesjonell design.

Oppnå piksel-perfeksjon med formlag er ganske enkelt, takket Photoshop er "Snap til piksler" funksjon for formlag.

Dessverre som du kanskje allerede vet, "snap til piksler" funksjonen er ikke tilgjengelig for ellipse-verktøyet.

Hvis du planlegger på å skape et formlag for de vakre sirkel avatarer i grensesnittet, må du undersøke presisjonen i sirkelen, og om den faller på pixel-grid riktig (som krever repeterende zooming og ørsmå justeringer, noe som kan bli kjedelig).

Hvis bare det var "snap til piksler" for sirkler, ikke sant? Vel, det er en pen liten løsning! Du kan bruke "avrundet rektangel verktøy" for å tegne sirkler ved ganske enkelt å gi en radius som er minst halvparten av størrelsen på sirkelen skaper du

Trinn 1:. Grab Avrundet rektangel Tool

jeg vet hva du kan tenke, "et rektangel verktøy for å lage en sirkel?" Jeg vet det kan høres rart ut, men tro meg her

Trinn 2:. Sjekk «Lås til piksler"

Nå sikre at "snap til piksler" boksen er markert (i CS6 dette er den "Justere Edges" boksen, eller "Snap Vector Verktøy og Transforms til pixel Grid" via preferanser). Dette vil sikre at våre avrundet rektangel pinner til pixel grid

Trinn 3:. Angi en (stor) Border Radius

Nå oppgir en verdi for radius grensen som er minst halvparten av dimensjoner av sirkelen du ønsker å tegne. Eller, i stedet for å gjøre regnestykket bare skrive inn "1000 piksler", som det er den største verdien Photoshop vil akseptere (dette betyr at du ikke kan utgangspunktet
tegne en sirkel som er større enn 2000 piksler, men du kan alltid skalere resultatet opp om nødvendig)

Trinn 4:. Tegn ditt Crisp, Pixel-Perfect Circle

Hold nede SHIFT og tegne din sirkel! (Hold SHIFT vil beholde avrundet rektangel proporsjoner).

Hvis du oppretter en radius grensen som er for liten, som avrundet rektangel vokser dens dimensjoner vil til slutt omgå radius grensen, og da har du et rektangel med avrundede kanter.

Det er det!

Se hvor enkelt det var? Som nevnt før, er den enkle triks for å gi avrundet rektangel en radius grensen minst halvparten av sine dimensjoner. Nå kan du enkelt lage pixel-perfekt, skarpe, skalerbare sirkler i Photoshop