Share
Hva du skal skapeDenne opplæringen vil vise deg hvordan du organiserer en stilguide ved hjelp av Sketch. I tillegg vil det lære deg noen kjernevner for å bruke Sketch i andre situasjoner. Vi vil gå over alt fra å sette opp typografi, ved hjelp av ulike gridtyper, til beste praksis for bruk av "symboler" og "delte stiler".
Ved å sette gjenbrukbare typestiler i Sketch, sparer du mye tid. Med tekstverktøyet valgt vil du se en liten boks til høyre i appen som lar deg sette alle typer stilarter som fontfamilie, skrifttypevekt og jevn tegnavstand.
La oss se hvordan vi kan bruke den i vårt eget stiledokument.
Hver gang jeg jobber med typografi, liker jeg å bruke ekte kopi (i motsetning til generisk fillerkopi). Jeg tror det gjør designopplevelsen enklere, og det gir sluttresultatet mer kontekst og ekte stemme.
Begynn med de forskjellige teksttyper som designet ditt vil ha. I denne filen har vi fire overskrifter, ikke seks, da vi ikke trenger så mange.
Merk: Hver av disse er et separat tekstobjekt.
Det er tilrådelig å sette lag i riktig rekkefølgeDet første elementet som skal utformes er underrubrikken, som går sammen med H1, men mer på det senere. Sketch har ingen innstilling for å diktere karakteren "case", så for å få underrubrikken til å bli stor må jeg skrive det som sådan manuelt.
Gjør dette der det er relevant for hvert tekstelement du har. Ikke bekymre deg for avstand på tavla, men vi vil gå over det senere.
Du kan lage gjenbrukbare tekststiler på to måter. Velg først en tekst med stilen du liker, og klikk deretter Ingen tekststil fra toppen av typen innstillinger til høyre. Velg deretter Opprett ny tekststil fra stoppestedet.
Merk: For å overføre disse stilene til annen filer kopierer og limer inn de ønskede tekstobjektene, og stilene overføres automatisk.
Den andre måten å opprette en tekststil i Skisse, er å opprette den nye tekststilen i nedtrekksmenyen, som du så over, og deretter legge til stylingen for den stilen. Det spiller ingen rolle hvilken som kommer først. Det som betyr noe er at du forstår at enhver endring i stylingen av en tekststil vil påvirke alle de andre tekstelementene som bruker den stilen. Derfor, hvis jeg endret fargen på Mini-overskriften, ville det gjenspeile denne endringen på hvert enkelt element.
Det er ingen enkel måte å justere styling på for forskjellige skjermstørrelser. Mitt nåværende arbeid er å skape separate tekststiler for mobile skjermer i tillegg til skrivebordsstiler.
Det er tre referanser for målinger i Sketch: grid, layout og lineal. La oss gå over alle tre veldig raskt og se hvordan de skal brukes. Med det gjort, snakker vi om å bruke dem for å sette opp sidens layout.
For å veksle linjalvisningen, trykk ctrl + r (lett å huske). Herskere bør ikke brukes som hoved- form av grid i Sketch, de to andre alternativene er mye bedre egnet for det. Bruk linjalen til å justere ting eller for å dobbeltsjekke justering som i skjermbildet nedenfor.
På samme måte som linjalen, trykker du på rutenettet ctrl + G. Gitteret er et system med firkanter som du kan justere siden av. Jeg bruker dem til layouter som ikke nødvendigvis holder seg til en typisk sentrert nettside stil. Den gode tingen om rutenettet i Sketch er at den dekker hele tavlen (hvis du øker størrelsen på tavlen, vil nettverket vokse).
Du kan angi størrelsen på Grid-enhetene for å være noe. Du kan også markere et sett med rader, standard er hver 10..
For å skifte layoutet trykker du på (gjett) ctrl + l. Dette er noe mer komplisert når det gjelder alle de forskjellige datapunktene du trenger å gi, men det gir deg et perfekt tilpasset layoutrutenett; perfekt for å designe nettsteder!
Vårt rutenett er basert på enheter på 30px, så alle tallene du ser på skjermbildet nedenfor, gjenspeiler det. Når du vet hva nettverket ditt er, legg det inn i Oppsettinnstillinger.
Hvis du ikke vet hva nettverket ditt skal være, bruk Oppsettinnstillinger å leke rundt - det holder proporsjonene og omberegner alt for deg. Si for eksempel at jeg vil at mitt layout skal bruke elleve kolonner i stedet for tolv, men likevel beholde totalbredden. Hvis jeg reduserer kolonnene, vil Sketch gi meg oppdaterte kolonne- og rennbredder. Spill rundt, se hva som skjer.
Nedsiden med grids i Sketch er at du ikke kan få et nytt rutenett for nye tavler. Kanskje det er bra, men det er ikke hvordan jeg pleier å jobbe. Hvis jeg har to kunstbrett ved siden av, hvorav en er for skrivebordet og den andre for mobil, er det umulig å jobbe på dem samtidig. Dette er hvor sider Komme til nytte. Hvis du har Lagliste se åpent, du kan se opp øverst noe som heter sider.
Sider er veldig nyttige, fordi de tillater et ekstra lag med å designe i et enkelt dokument. Du kan endre grid og layout på sider, og de vil forbli de samme innenfor den aktuelle siden.
Du har kanskje lagt merke til i mine skjermbilder at min typografi ikke er justert til rutenettene. Å ha rutenettlinjer betyr ikke at ting som tidligere var der, vil justere seg magnetisk. Når du endrer plasseringen av nettene dine, må du justere elementene dine tilbake til det. Typografi er annerledes fordi den ikke starter eller slutter der hele elementets område er. Du kan plassere grunnlinjen for typografi, men du vil ha i forhold til rutenettet. Det er opp til deg. Jeg legger den på toppen av linjene. Så la meg tilpasse det til deg.
Som du kan se, tilpasser det mobile avsnittet ikke; Linjens høyde er 24px. Den trenger derfor sin egen side og grid layout. Men for formålet med denne gjennomgangen kan det forbli feiljustert.
La oss ta en titt på hvordan du lagrer farger i Sketch, slik at du kan bruke dem på nytt.
La oss si at jeg vil gjerne legge til en lilla serie for å bruke som aksenter i denne designen. Jeg kopierer og limer inn den grønne raden og velger en lilla. For å gjøre ting mye raskere bestemte jeg meg for lette nyanser av lilla ved å endre opaciteten til de opprinnelige fargene til henholdsvis 70%, 50% og 20%.
Hva du gjør neste for å få fargen, er å bruke Color Eyedrop Tool og velg den nye fargen. Ikke glem å endre opaciteten tilbake til 100%.
Deretter bruker du den lille + nederst i fargeprøverene for å lagre fargen på Sketch-paletten. Forskjellen mellom Globale farger og Dokumentfarger er som deres navn antyder, vil globale farger bli lagret i Skisse for å gjenbrukes i alle andre Sketch-filer du åpner mens dokumentfarger bare forblir innenfor det spesifikke dokumentet.
Jeg har en rekke enkle brukergrensesnittelementer i Sketch-filen.
Jeg holder dem her slik at jeg raskt kan kopiere de jeg trenger til de nye designene jeg jobber med. Jeg skal vise deg hvordan du lager delte stiler og symboler for gjenbruk.
Felles stiler er stylingene du kan bruke igjen. For eksempel består den aktive / fokuserte inngangen av tre komponenter, etikettteksten, inntastingsteksten og inntastingsboksen.
Rektangelet har en bestemt stil, den har en hvit bakgrunn, en enkelt pikselblå kant og lyseblå indre skygge. Det er noe som kan gjenbrukes hvis du jobber med flere innganger.
På høyre side over alle stilene jeg nettopp har beskrevet, kan du se tekst som sier Ingen delt stil. Du kan lagre disse stilegenskapene på samme måte som vi lagret tekst styling for våre overskrifter. Lagre det og bruk det så mye du vil. Men husk at hvis du endrer et aspekt av den lagrede stilen i fremtiden, vil det påvirke hvert element som deler denne stilen.
Jeg bruker denne funksjonen for mange forskjellige stiler, som feilinngangstilstand og til og med mine tre knapper (den blå, den svarte og den hvite).
Symboler er en flott funksjon i Sketch som jeg bruker mye. Symboler er gjenkjennelige av deres lilla mappe i Lagliste som jeg ikke har åpent på mine skjermbilder. For å bytte visningen, gå til Vis> Vis lagliste eller trykk Kommando + Alternativ + 1.
La oss gjøre innspillet jeg brukte i Delte stiler som eksemplet for Symbol også. La oss først gjøre det til en gruppe. For å gjøre det, trykk Kommando + G.
For å gjøre det til et symbol kan du bruke ikonet øverst til venstre i Sketch app. Du kan også bruke samme område for å lagre en delt stil for å lagre en gruppe som et symbol også. Når du gjør det, nevner du det.
Et symbol skiller seg fra den andre gjenbrukbare stylingen ved at det er en gruppe av elementer du kan oppdatere over, i stedet for en enkelt stil som farge på inngangsrektangel eller tekststilen på etiketten. Symboler beholder avstand og dimensjonering av disse elementene når du bruker dem igjen.
En annen kul funksjon av Symboler, at du kan velge hvilket tekstelement du vil bruke på nytt, dvs. at den faktiske teksten forblir den samme, eller du kan utelukke tekstverdien til et valgt tekstelement. Dette er en fantastisk funksjon som jeg elsker. Det ville være ubrukelig å gjenbruke symbolene mine hvis jeg ikke kunne endre navn på "Fornavn" og det andre til "Etternavn".
Disse funksjonene hjelper deg med å lage dine egne stilguider i Sketch. Last ned kildefilene og spill av med det som er bygget. Jeg gleder meg til å høre forslag til forbedringer! Og hvis du leter etter mer inspirasjon til å jobbe med Sketch, ta en titt på Sketch-filkategorien på Envato Market.
Accentsconagua