10 tip til præcis design i Sketch

Med Sketch får du det bedste fra begge verdener: skalerbare vektorer og præcise pixelkontroller. De værktøjer, du finder i Sketch, hjælper dig med at skabe skarpe kanter og definerede, afbalancerede konturer, som er grundlaget for et godt design.

Skitse kan automatisk tilpasse dine figurer til pixelkanter og giver dig også mulighed for at få vist og redigere hver pixel for at sikre, at din eksport er skarp. Dette er især vigtigt, når du forbereder aktiver til de forskellige skærmstørrelser, pixeltætheder og tilgængelige platforme.



Når du arbejder med vektorformer og eksporterer aktiver, kan du sikre dig, at alle former og lag er justeret til dokumentets pixelgitter for at undgå de slørede kanter, der kan skyldes brøktal.



Ved at holde øje med inspektøren og udnytte værktøjer som Pixel Fitting og Pixel Zoom kan præcis redigering let opnås. I denne vejledning vil vi udforske nogle af mine yndlingsværktøjer til design med pixelperfektion.

01. Forudindstillede tegnebrætter

Når jeg designer til mobil, skal jeg altid huske på de forskellige skærmstørrelser og opløsninger. Omkring tidspunktet for den originale iPhone var der kun en skærmstørrelse og kun en opløsning: et punkt svarede til en pixel. I dag, med Retina-skærme på iPhone og de forskellige Android-pixeltætheder, ser tingene mere komplekse ud.



Skitsedesignværktøjer

Skitse har almindelige tegnebrætstørrelser indbygget

Men med Sketch's forudindstillede tegnebrætter, lidt planlægning og nogle enkle matematik er det en leg at forberede aktiver til flere skærmstørrelser og pixeltætheder.

02. Design ved 1x

Da Apple introducerede den første Retina-iPhone, begyndte mange designere med det samme at designe i 2x opløsning og nedskalere til 1x for ældre telefoner som en eftertanke. Men da iPhone 6 Plus ankom, blev dette problematisk.



kan jeg bruge enhver skrifttype til mit virksomhedslogo

Skitsedesignværktøjer

Eksport af aktiver i forskellige opløsninger tager sekunder

Når alt kommer til alt, hvis du designer noget pixel præcist ved 2x, er chancerne, hvis du skalerer det op med 1,5x, vil det ende på en brøkposition. Mange designere er gået tilbage til at designe 1x, for når vektordimensioner skaleres med 2 eller 3, er du garanteret, at de ikke ender som brøkcifre.

03. Inspektør

Den første måde at registrere, om dine designs er præcise, er at være opmærksom på deres værdier for position og størrelse. Inspektøren er det vigtigste kommandocenter for dit Sketch-dokument. Den indeholder alle egenskaber og detaljer for en valgt form eller et lag. Dette er dit sted at spotte ufuldkommenheder i form af brøktal.

04. Positions- og størrelsesværdier

Brøktal forårsager gengivelse af underpixler - hovedårsagen til, at dit eksporterede bitmap-aktiv muligvis har slørede kanter. Du kan rette dette manuelt: Du skal bare redigere værdierne Position og størrelse til fulde tal.

Skitsedesignværktøjer

Brøktal resulterer i slørede kanter

Arbejde med figurer inden for grupper kan være kedeligt, men med cmd + Click kan du vælge en hvilken som helst form direkte og redigere dens værdier.

05. Vis pixels

Tilsyneladende glatte vektorkurver og kanter kan være vildledende. Ved at aktivere Vis pixel kan du se hver enkelt pixel i dit dokument. Denne indstilling kan aktiveres ved at gå til Vis>
Lærred> Vis pixel (skift + P).

Det, du ser, svarer til at eksportere billedet til PNG og derefter zoome ind. Bemærk, at når du er på 100 procent zoom (faktisk størrelse), er der ingen forskel mellem disse to tilstande, men når du zoomer længere ind, er pixels vil være synlige.

06. Vis pixelgitter

Hvis du vil have et tip af, hvordan dit design vil se ud ved eksport, men ikke vil se på store slørede pixels, så er pixelzoom din ven. Sørg for, at Vis pixelrist er aktiveret ved at gå til Vis> Lærred> Vis pixelrist (Skift + X).

hvordan man laver en brøkdel i indesign

Show Pixels Grid giver dig mulighed for at skelne mellem fuzzy pixels i lav kontrast, som ellers ikke kunne ses. Når det kombineres med Vis pixel, vil eventuelle kanter, der ikke stemmer overens med pixelgitteret, være synlige.

07. Rund til nærmeste pixelkant

Omtales som den bedste skjulte funktion i skitse, løser runde til nærmeste pixelkant mange mangler ved pixeljustering. Når du har set en vektorform med underpixelværdier, kan du vælge formen og derefter vælge Lag> Rund til nærmeste pixelkant.

Skitsedesignværktøjer

Indstillinger for pixelafrunding i redigeringstilstand

Skitse justerer automatisk kanterne med pixelgitteret. Dette fungerer for både position og størrelsesværdier. Denne funktion giver en hurtig måde at sikre, at dine designs er konsistente, især når du importerer ikoner.

for at udføre kunsten at ridse skal du

08. Rediger vektorpunkter

Hvis din figur ikke er justeret som ønsket, kan du redigere de enkelte vektorpunkter ved at vælge formen og klikke på Rediger i værktøjslinjen. Dette åbner dine vektorredigeringsindstillinger i Inspektøren, hvor du kan skifte mellem fire forskellige punkttilstande og vælge en pixelafrundingsindstilling.

09. Runde til fulde pixels

Pixelpræcision er god, når det er nødvendigt, men du behøver ikke begrænse dig selv. For eksempel, når du designer små ikoner, kan du deaktivere pixel afrunding præference for fuldstændig frihed til punktbevægelse. Men hvis du vil sikre, at formens kanter er ensartede, kan det være muligt at aktivere runde til fulde (eller halv) pixels.

10. Pixel-tilpasning

En global indstilling, der sikrer pixelpræcision fra starten, er Pixel Fitting-indstillingen, der findes i Skitse> Indstillinger ...> fanen Generelt> Pixelfitting. Denne præference sikrer, at ethvert lag, du indsætter eller ændrer størrelse, ender på en kant med fuld pixel (med undtagelse af rotation).

Skitsedesignværktøjer

Du finder indstillinger for Pixel-tilpasning i Skitses generelle præferencer

Hvis du er frustreret over den manglende pixelgitterfrihed, du har, kan du deaktivere Pixel Fitting, når det er nødvendigt.

Design for pixelperfektion er en vigtig praksis for mange designere. Denne form for præcision går langt, især når du vil fremtidssikre dine designs til ren og skarp gengivelse. Ikke desto mindre kan du helt sikkert bryde denne regel, når du ønsker fuldstændig fri bevægelighed.

Det er det, jeg elsker ved Sketch: det giver en unik blanding af fleksibilitet og præcis pixelkontrol. Hvis du ikke har prøvet Sketch, skal du downloade den gratis prøveperiode nu.

Denne artikel blev oprindeligt offentliggjort i netmagasin udgave 278.