Share
Hva du skal skapeSkisse, laget av de hyggelige folkene på Bohemian Coding, er et utmerket program for grensesnittdesign. Denne nybegynnerveiledningen vil introdusere deg til å designe med Sketch. Du trenger ikke noen tidligere erfaring med programmet, bare litt ledig tid til å bruke å lære noe nytt.
Jeg vil vise deg hvordan du konfigurerer en enkel tavla, hvordan du oppretter figurer ved hjelp av grunnleggende verktøy, boolske operasjoner, inspeksjonspanelet og laglisten. Vi ser hvordan du endrer egenskaper, organiserer lag, importerer bilder og andre nyttige aspekter av en sketchdesigners arbeidsflyt.
La oss begynne med å lage et nytt dokument. Har du allerede åpnet Sketch 3? Ok, det er alt du trenger å gjøre! La meg forklare; Som standard tilbyr Sketch deg et uendelig lerret som du skal arbeide på. Du kan begynne å lage elementer uten frykt for å gå tom for plass.
La oss gå et skritt videre og lage et tavla. Kunstbrett lar deg lage faste rammer på Sketch's uendelige lerret.
For å lage et nytt tavla, gå til Sett inn> Artboard (EN) fra verktøylinjen eller hovedmenyen.Klikk og dra inne Sketchs lerret. Du vil merke hvordan Sketch viser bredde- og høydeverdiene som du gjør. Lage en 600 x 800px artboard.
Tips: Vi kan lage så mange tavler etter behov. Vi kan også endre artikkelnavnet på Lagliste til venstre for skjermen, eller endre posisjon og dimensjoner ved hjelp av Inspektør panelet til høyre. Slett tavler ved å trykke på Supr eller Slett nøkkel når tavla er valgt.
For eksempel, la oss bruke Inspektør å bytte tavlaposisjon til X = 0 Y = 0. Alternativt kan du bare dra artikkelen til den posisjonen.
Tips: Gå til Vis> Vis rutenett for å aktivere standard grid som følger med Sketch. Det vil hjelpe posisjonere objektene nøyaktig hvordan du vil ha dem.
Nå skal vi endre fargeplaten. Å gjøre det, vil hjelpe deg med følgende trinn. Velg din tavle og ta en titt på Inspektør panel. Undersøk Bakgrunnsfarge alternativet og klikk fargeprøven til høyre. En fargeplukker vises som viser oss forskjellige fargevalg og egenskaper. Velg fargen du vil ha. Det spiller ingen rolle hvilken farge du velger, men i dette tilfellet velger vi en varm grå.
Din tavle er ferdig, og du er klar til å begynne med grunnleggende layout!
Gå til Sett inn> Form> Rektangel (R). Lage en 360 x 500px rektangel på tavla. Akkurat som med å lage kunsttavler, kan du tegne et tilfeldig rektangel og justere egenskapene gjennom Inspektør panel. Vis rutenettet for å gjøre det enklere!
Etter å ha valgt rektangelet, ta en titt på Inspektør panel. Fjern formens grense ved å fjerne merket av det. Klikk på Fylle prøv og sett den til hvit. Vi kan sette avrundede hjørner i Inspektør panelet også; Flytt Radius skyvekontrollen til høyre eller type 10 i inntastingsfeltet.
Lage en 40 x 40px sirkel med Sett inn> Form> Oval. Husk at du kan tegne en tilfeldig sirkel og bruke Inspektør å endre sine egenskaper. Flytt den nå til midten av rektangelet. Bruke Zoomverktøy på verktøylinje hvis du trenger å zoome inn.
Opprett en annen sirkel, denne gangen 20 x 20 px. Juster den inn i den første sirkelen, i midten. Når du flytter den, vil du se noen smarte guider for å hjelpe deg med å justere objekter.
Faktisk, for å sikre at innholdet ditt er lined opp riktig, hold nede alternativ (⌥) tast på tastaturet. Skisse vil hjelpe deg med å få nøyaktige pixelmålinger som viser avstander mellom objekter. For eksempel:
Dette er en så stor hjelp! Takk skisse!
Nå skal vi snu våre to sirkelobjekter til en enkelt "ring". Velg begge sirkler direkte, eller gjennom Lagliste. Gå til verktøylinje og klikk på subtrahere.
Vi har nå en ny kompleks form:
Velg dette nye objektet og velg også ditt rektangel. Klikk nå Union for å få den endelige formen.
Hva gjorde vi her? Når vi trenger en ikke-standard form, må vi lage den av oss selv. Vi kunne tegne det med pennverktøyet, men ofte er en kompleks form lett å bryte ned i flere vanlige former. Vi kan bruke boolske operasjoner for det. Sketch kommer med union, trekke fra, krysse og forskjell boolske operasjoner for å få forskjellige komplekse former laget av underruter.
Disse alternativene er ikke-destruktiv operasjoner slik at vi enkelt kan endre subpaths (basic shapes) egenskaper ved å velge dem på Lagliste. Når du har en form med flere underruter i lerretet, ta en titt på laglisten. Du vil se en avslørende pil til venstre, og hvis du utvider det, vil du se en liste over underruter for din form. På høyre side kan du velge en boolesk operasjon for hver understi individuelt hvis du vil endre den.
Vår grunnleggende form er nesten ferdig! Pass på at formen din forblir valgt, se til Inspektør panel, velg Shadows og sett egenskapene som følger: Farge> R = 38 G = 30 B = 10 Alfa = 50, X = 0, Y = 20, Blur = 20 og Spread = 0. Til slutt skal formen din se slik ut:
Et innloggingsskjema ville ikke være noe uten å skrive inn felt og knapper, så la oss få noe!
Tips: Du kan låse hovedformen din for å unngå feil og uventede bevegelser. Velg den og gå til Ordne> Låse lag. En liten hengelås på lagslisten informerer deg hvilke objekter som er låst.
Bruker Rektangelverktøy (R), lage en 280 x 50px form, fjern grensen, sett fyllfarge til R = 239 G = 87 B = 46, Radius = 2 og legg det som vist i bildet nedenfor.
Lag en annen 280 x 70px form, fyll den med hvitt, radius = 2, sett grense tykkelse til 1 og grensefarge til R = 234 G = 234 B = 234. Flytt den til toppen av det oransje rektangelet, dra det 10 px opp. Dupliser denne formen (Kontroll-D), velg kopien og dra den til en annen 80px opp.
Lag nå litt 20 x 20px firkantet med Rektangelverktøy (R). Fyll den med hvitt og sett Radius = 2 , grense tykkelse=1 og grensefarge til R = 234 G = 234 B = 234. Flytt den 10px under oransje rektangel. Din tavle bør se slik ut:
Ok, nå skal vi krydre innloggingsskjemaet med noen tekstelementer for etiketter og plassholdere. Velg Tekstverktøy (T) og så kan du klikke hvor som helst i lerretet for å sette inn tekstlaget. Du vil se at teksten blir lagt til og valgt slik at du kan begynne å skrive umiddelbart. Du vil legge merke til at inspektøren har endret seg for å vise deg alle egenskapene som gjelder for tekst.
Tips: Du kan også klikke og dra for å lage en tekstboks med en fast størrelse. Når teksten blir for stor til å passe inn i esken, vil den endre størrelsen nedover, i motsetning til en vanlig tekstboks som øker bredden for å passe innholdet.
Legg til "USERNAME" -teksten og gå til Inspektør panel for å angi sine egenskaper. Bruke Montserrat skrifttype, Vekt = Vanlig, Størrelse = 11, Spacing = 1, Farge> R = 204 G = 204 B = 204.
Vellgjør Typeverktøy (T) og legg til "Armando" (eller hva du vil) inndatatekst. Denne gangen bruker disse verdiene til å angi sine egenskaper: Montserrat skrifttype, Vekt = Vanlig, Størrelse = 24, Spacing = 0, Farge> R = 113 G = 87 B = 44. Velg begge deler av teksten og plasser dem som vist nedenfor:
Det sorterer ut plassholderen og inntastingsteksten for det første feltet. For det andre, dupliser tekstlagene og flytt dem over det andre rektangel 80px ned. Endre tekstinnholdet til "PASSWORD" og "*******".
Legg til noen nye tekstlag og bruk attributter som vist nedenfor. Du vil trenge Åpne Sans skrifttype.
Du vil merke at linken "Glemt passordet ditt" er understreket. For å oppnå denne effekten, klikk på Tekstalternativer-knappen å avsløre dekorative effekter. Velg den andre, mens tekstlaget er valgt.
Nå, resultatet:
For øyeblikket bør vi ta en titt på laglisten. Det kan være en god idé å begynne å organisere og omdøpe dem rektangel former eller enkelt å gruppere elementer. Gi nytt navn til objekter ved å dobbeltklikke på dem, eller høyreklikk og velg Gi nytt navn alternativ. For å opprette en laggruppe velg bare ett eller flere lag, og klikk deretter på Gruppe ikonet i verktøylinje. Du kan også dra objekter mellom grupper i laglisten som du ville forvente.
Hovedmålet er å bytte en rotete lageliste til noe mer elegant og organisert. Ta det i betraktning, ikke bare mens du følger denne opplæringen, men i hvert prosjekt du er involvert i.
Vi har allerede opprettet elementene vi trenger i innloggingsboksen. Det er på tide å legge til en logotype.
Åpne logo_icon.svg Jeg har gitt som vedlegg til denne opplæringen. Nå fokuserer du på Layer-listepanelet. Du vil se hvordan ikonet ble laget ved hjelp av forskjellige baner vi kan redigere enkelt.
Bruker Rektangelverktøy (R), lage en 30 x 60px form og plasser den som vist på bildet nedenfor. Det er ikke nødvendig å plassere det 100% perfekt på dette tidspunktet. Husk at du kan bruke rutenettet og alternativ (⌥) tast på tastaturet når du flytter. På denne måten viser Sketch deg nøyaktige avstander.
Nå på Lagliste, dra banen i "Shape" -gruppen. Sett den på toppen. Du får en ny sammensatt form ved å gjøre dette. Det er kraften til boolske operasjoner og vektorformer i Sketch!
Husker du når vi snakket om de små ikonene til høyre side av dine underruter? Vi kan velge forskjellige boolske operasjoner for hver delbane individuelt. Så la oss bytte den første til subtrahere og den andre til Forskjell.
Lett trinn. Pass på at den nye sammensatte formen fortsatt er valgt. Gå til Layer> Stier> Flatten. Da har du mistet underruter og deres redigeringsfunksjoner, men neste trinn blir lettere nå.
Hold formen din valgt. Gå til verktøylinje og klikk på Redigere ikon. Du vil legge merke til noen endringer i Inspektør panel og selve formen. Velg alle vektorpoengene ved å dra på lerretet.
Fokus på Inspektør panel og sett Corners til 5. Klikk Fyll to avslør alternativvinduet og velg den andre typen fylling, Lineær gradient. Du vil se to punkter som er koblet til av en linje som legger laget over. Hver prikk på linjen representerer et fargestopp langs gradienten.
For å endre fargen på en av stoppene, klikk på den i lerretet. Du ser at fargevalgeren i inspektøren oppdaterer fargen til stoppet. Velg en ny verdi i denne fargeplukkeren, og du får se resultatet. Å vite at vi kan justere den første farge til R = 245 G = 166 B = 35 og den andre til R = 239 G = 87 B = 46. Du kan også endre farger direkte på fargeplukkeren også.
Dette er vår siste form:
Kopier formen og lim den inn i innloggingsskjemaet.
Din logotype er nesten ferdig, så legg til litt generisk tekst nå. Skriv hva du vil, men for denne opplæringen har jeg brukt "myapp" og følgende posisjon og egenskaper:
Vårt innloggingsskjema er ferdig!
Skisse tillater oss å arbeide med bitmap-bilder og vektorobjekter. For bakgrunnen skal jeg velge et bilde fra Unsplash. Fantastisk fotografering der! Jeg henter denne laget av Nick West.
Gå nå tilbake til dokumentet ditt. Velg din tavle på Lagliste panel og gå til Sett inn> Bilde for å velge bildet. Advarsel: dette bildet er stort! Vi kommer til å redusere det litt ved å gå til Inspektør panel og endre dimensjonene til noe mer overkommelig som 1280 x 876px. Stilling det på X = 0 Y = 0 og sørg for at det erpå bunnen av laglisten din.
Tips: Hvis du importerer bilder mens du holder en artikkel valgt, vil du få bildet ditt automatisk maskert ved hjelp av artboard dimensjonene. Flytt laget utenfor kunstbrettgruppen for å deaktivere det. Lær mer om maskeringsobjekter i den offisielle dokumentasjonen.
I Sketch kan vi finjustere fargene til et eksisterende bilde ved hjelp av Fargejustering panelet ligger i Inspektør. Vi kan endre metning, lysstyrke og kontrast. Sett metning til 0 og Kontrast til 1,9.
Opprett nå en 600 x 800px rektangel bruker Sett inn> Form> Rektangel (R). Plasser den på X= 0 Y = 0. På Lagliste Flytt formlaget over bildet lag. Dupliser det og sett rektangulæregenskapene som følger: for det første rektangel-settet Opacity = 100%, Blending = Multiply, Farge> R = 173 G = 166 B = 152. For den andre (like over den første) sett Opasitet = 50%, Blanding = Normal, Farge> R = 173 G = 166 B = 152.
Slik ser det ut.
Jeg håper du har hatt denne opplæringen ...
Siden du lager et brukergrensesnitt, legger du til noen ekstra detaljer til påloggingsskjemaet ditt, kan du være veldig nyttig, tror du ikke? Skjema grensesnitt har mange aspekter; forskjellige stater og tilbakemelding. Alle teknikkene jeg har dekket under denne opplæringen vil ha bevæpnet deg med ferdighetene til å lage noen ekstra elementer som følgende:
Tror du kan gjøre det? Hvis du sitter fast, eller du må spørre meg om noe, bare legg igjen en kommentar eller finn meg på Twitter. Jeg gleder meg til å se hvordan du går videre!
Accentsconagua