Share
Vad du ska skapaSkiss, gjord av de trevliga på Bohemian Coding, är ett utmärkt program för gränssnittsdesign. Denna handledning på nybörjarnivå introducerar dig för att designa med Sketch. Du behöver inte någon tidigare erfarenhet av programmet, bara lite ledig tid att spendera något nytt.
Jag ska visa dig hur du ställer in en enkel tavla, hur man skapar former med hjälp av grundläggande verktyg, booleska operationer, inspektionspanelen och laglistan. Vi får se hur du byter egenskaper, organiserar lager, importerar bilder och andra användbara aspekter av en Sketchdesigners arbetsflöde.
Låt oss börja med att skapa ett nytt dokument. Har du redan öppnat Sketch 3? Okej, det är allt du behöver göra! Låt mig förklara; Som standard erbjuder Sketch dig en oändlig duk som du kan arbeta på. Du kan börja skapa element utan rädsla för att du saknar utrymme.
Låt oss gå ett steg längre och skapa en tavla. Konstbrädor gör att du kan skapa fasta ramar på Sketchs oändliga duk.
För att skapa en ny tavla, gå till Sätt in> Artboard (EN) från verktygsfältet eller huvudmenyn.Klicka och dra in i Sketch's canvas. Du kommer att märka hur Sketch visar bredden och höjdvärdena som du gör. Skapa en 600 x 800px ritytan.
Tips: Vi kan skapa så många skyltar som behövs. Vi kan också byta namn på tavlan på Laglista till vänster om skärmen, eller ändra dess position och dimensioner med hjälp av Inspektör panel till höger. Radera tavlor genom att slå på Supr eller Radera nyckeln när tavlan är vald.
Till exempel, låt oss använda Inspektör att ändra positionen på tavlan till X = 0 Y = 0. Alternativt kan du helt enkelt dra in tavlan till den positionen.
Tips: Gå till Visa> Visa rutnät för att aktivera standardnätet som följer med Sketch. Det kommer att hjälpa positionera objekt exakt hur du vill ha dem.
Nu ska vi byta färgpapper. Om du gör det kommer du att hjälpa till med följande steg. Välj din tavla och kolla på Inspektör panel. Kolla Bakgrundsfärg alternativet och klicka på färgfönstret till höger. En färgplockare visas som visar olika färgalternativ och egenskaper. Välj den färg du vill ha. Det spelar ingen roll vilken färg du väljer, men i det här fallet väljer vi en varm grå.
Din tavla är klar och du är redo att börja med den grundläggande layouten!
Gå till Infoga> Form> Rektangel (R). Skapa en 360 x 500px rektangel på din tavla. Precis som med att skapa skivor kan du rita en slumpmässig rektangel och anpassa dess egenskaper genom Inspektör panel. Visa rutnätet för att göra det enklare!
Efter att ha valt rektangeln, ta en titt på Inspektör panel. Ta bort formens kant genom att avmarkera den. Klicka på Fylla prov och sätt det till vit. Vi kan ställa avrundade hörn i Inspektör panel också; flytta Radie skjutreglaget till höger eller typ 10 i inmatningsfältet.
Skapa en 40 x 40px cirkel med Infoga> Form> Oval. Kom ihåg att du kan rita en slumpmässig cirkel och använda Inspektör att ändra dess egenskaper. Nu flytta den till mitten av din rektangel. Använd Zoomverktyget på Toolbar om du behöver zooma in.
Skapa en annan cirkel, den här gången 20 x 20 px. Rikta in den i den första cirkeln, i mitten. När du flyttar det kommer du att se några smarta guider som hjälper dig att justera objekt.
För att säkerställa att ditt innehåll är upprättat korrekt, håll ner alternativ (⌥) tangent på tangentbordet. Skiss hjälper dig att få exakta pixelmätningar som visar avstånd mellan objekt. Till exempel:
Det här är så stor hjälp! Tack Sketch!
Nu ska vi vända våra två cirkelobjekt till en enda "ring". Välj båda cirklarna direkt eller genom Laglista. Gå till Toolbar och klicka på subtrahera.
Vi har nu en ny komplex form:
Markera det här nya objektet och välj också din rektangel. Klicka nu Union för att få den slutliga formen.
Vad gjorde vi här? När vi behöver en icke-standardform måste vi skapa det själv. Vi kunde rita det med pennverktyget, men ofta är en komplex form lätt att bryta ner i mer vanliga former. Vi kan använda booleska operationer för det. Skiss kommer med union, subtrahera, korsas och skillnad booleska operationer för att få olika komplexa former gjorda av subpaths.
Dessa alternativ är icke-förstörande operationer så att vi enkelt kan ändra subpaths (basic shapes) egenskaper genom att välja dem på Laglista. När du har en form med flera delbanor i din duk kan du titta på laglistan. Du kommer att se en upplysnings-pil till vänster och om du utökar det kommer du att se en lista över underrubriker för din form. På höger sida kan du välja en booleskt drift för varje delväg individuellt om du vill ändra den.
Vår grundläggande form är nästan klar! Se till att din form förblir vald, titta på Inspektör panel, välj skuggor och ställa in dess egenskaper enligt följande: Färg> R = 38 G = 30 B = 10 Alfa = 50, X = O, Y = 20, Blur = 20 och Spread = 0. I slutet skulle din form se ut så här:
Ett inloggningsformulär skulle vara inget utan inmatningsfält och knappar, så låt oss göra några!
Tips: Du kan låsa din huvudform för att undvika misstag och oväntade rörelser. Välj det och gå till Ordna> Låslager. Ett litet hänglås på lagerlistan informerar dig vilka föremål som är låsta.
Använda Rektangelverktyg (R), skapa en 280 x 50px form, ta bort gränsen, sätt fyllfärgen på R = 239 G = 87 B = 46, Radie = 2 och placera det enligt bilden nedan.
Skapa en annan 280 x 70px form, fyll den med vit, radie = 2, uppsättning gräns tjocklek till 1 och gräns färg till R = 234 G = 234 B = 234. Flytta den till toppen av den orange rektangeln, dra den 10px uppåt. Duplicera denna form (Kontroll-D), välj kopian och dra den till en annan 80px upp.
Skapa nu lite 20 x 20px fyrkantig användning Rektangelverktyg (R). Fyll den med vit och set Radie = 2 , gräns tjocklek=1 och gräns färg till R = 234 G = 234 B = 234. Flytta det 10px nedanför den orange rektangeln. Din tavla ska se ut så här:
Okej, nu ska vi krydda inloggningsformuläret med några textelement för etiketter och platshållare. Välj Textverktyg (T) och sedan kan du klicka var som helst i duken för att infoga ditt textlag. Du får se att text läggs till och väljas så att du kan börja skriva omedelbart. Du kommer märka att inspektören har ändrats för att visa dig alla egenskaper som gäller för text.
Tips: Du kan också klicka och dra för att skapa en textruta med en fast storlek. När texten blir för stor för att passa inuti lådan, kommer den att ändra storlek nedåt, i motsats till en vanlig textruta som ökar bredden för att passa innehållet.
Lägg till texten "USERNAME" och gå till Inspektör panel för att ställa in dess egenskaper. Använd Montserrat typsnitt, Vikt = vanlig, Size = 11, Spacing = 1, Färg> R = 204 G = 204 B = 204.
Välj om Typverktyg (T) och lägg till "Armando" (eller vad du vill) inmatningstext. Den här gången använder du dessa värden för att ställa in dess egenskaper: Montserrat typsnitt, Vikt = vanlig, Size = 24, Spacing = 0, Färg> R = 113 G = 87 B = 44. Välj båda bitarna av text och placera dem enligt nedan:
Det sorterar ut vår platshållare och inmatningstext för det första fältet. För det andra, duplicera textlagren och flytta dem över den andra rektangeln 80px ner. Ändra textinnehållet till "PASSWORD" och "*******".
Lägg till några nya textlager och använd attributen enligt nedan. Du kommer behöva Open Sans typsnitt.
Du kommer märka att länken "Glömt ditt lösenord" är understrukit. För att uppnå denna effekt klicka på Textalternativsknappen för att avslöja dekorationseffekter. Välj den andra, medan textlagret är valt.
Nu är resultatet:
För närvarande bör vi titta på laglistan. Det kan vara en bra idé att börja organisera och byta namn på dem rektangel former eller helt enkelt gruppera element. Byt namn på objekt genom att dubbelklicka på dem, eller högerklicka och välj Döpa om alternativ. För att skapa en laggrupp väljer du bara ett eller flera lager och klickar sedan på Grupp ikon i Toolbar. Du kan också dra objekt mellan grupper i laglistan som du kan förvänta dig.
Huvudsyftet är att byta en rostig lagerlista till något mer elegant och organiserat. Tänk på det, inte bara när du följer den här handledningen utan i varje projekt du är inblandad i.
Vi har redan skapat de element vi behöver i vår inloggningsruta. Det är dags att lägga till en logotyp.
Öppna logo_icon.svg Jag har tillhandahållit som bilaga till denna handledning. Fokusera nu på Layer listpanelen. Du kommer att se hur ikonen gjordes med olika vägar som vi enkelt kan redigera.
Använda Rektangelverktyg (R), skapa en 30 x 60px forma och placera det enligt bilden nedan. Det är inte nödvändigt att placera det 100% perfekt vid denna tidpunkt. Kom ihåg att du kan använda rutnätet och alternativ (⌥) tangent på tangentbordet när du flyttar. På så sätt visar Sketch dig exakta avstånd.
Nu på Laglista, dra vägskiktet i "Shape" -gruppen. Lägg den på toppen. Du kommer att få en ny sammansatt form genom att göra detta. Det är kraften hos booleska operationer och vektorformer i Sketch!
Kommer du ihåg när vi pratade om de små ikonerna till höger om dina underrutter? Vi kan välja olika booleska operationer för varje delväg individuellt. Så låt oss ändra den första till subtrahera och den andra till Skillnad.
Lätt steg. Se till att din nya sammansatta form fortfarande är vald. Gå till Layer> Banor> Flatten. Då har du förlorat dina underskott och deras redigeringsmöjligheter, men nästa steg blir enklare nu.
Håll din form vald. Gå till Toolbar och klicka på Redigera ikon. Du kommer att märka några ändringar i Inspektör panel och själva formen. Välj alla vektorpunkter genom att dra på duken.
Fokusera på Inspektör panel och set Corners till 5. Klick Fyll to avslöja alternativfönstret och välj den andra typen av fyllning, Linjär gradient. Du kommer att se två prickar kopplade av en linje som lägger över ditt lager. Varje prick på linjen representerar ett färgstopp längs lutningen.
För att ändra färgen på en av stoppen, klicka på den i duken. Du ser att färgväljaren i inspektören uppdaterar färgen på det stoppet. Välj ett nytt värde i denna färgplockare och du får se resultatet. Vi vet att vi kan justera den första färgen till R = 245 G = 166 B = 35 och den andra till R = 239 G = 87 B = 46. Du kan också ändra färger direkt på färgplockaren också.
Det här är vår sista form:
Kopiera formen och klistra in den i ditt inloggningsformulär.
Din logotyp är nästan klar, så lägg till lite generisk text nu. Skriv vad du vill, men för den här handledningen har jag använt "myapp" och följande position och egenskaper:
Vår inloggningsblankett är klar!
Skiss låter oss arbeta med bitmappsbilder samt vektorobjekt. För bakgrunden kommer jag att välja en bild från Unsplash. Fantastisk fotografering där! Jag väljer den här laget av Nick West.
Gå nu tillbaka till ditt dokument. Välj din tavla på Laglista panel och gå till Infoga> Bild för att välja bilden. Varning: den här bilden är enorm! Vi kommer att minska det lite genom att gå till Inspektör panel och ändra dess dimensioner till något mer hanterbart som 1280 x 876px. Placera den på X = 0 Y = 0 och se till att det ärlängst ner i din lagerlista.
Tips: Om du importerar bilder samtidigt som du har valt en tavla kommer du att få din bild automatiskt maskerad med hjälp av måtten på tavlan. Flytta skiktet utanför listgruppen för att avmaskera det. Läs mer om maskering av objekt i den officiella dokumentationen.
I Sketch kan vi finjustera färgerna på en befintlig bild med hjälp av Färgjustering panel som ligger i Inspektör. Vi kan ändra mättnad, ljusstyrka och kontrast. Uppsättning Mättnad till 0 och Kontrast till 1,9.
Skapa nu en 600 x 800px rektangel med Infoga> Form> Rektangel (R). Placera den vid X= 0 Y = 0. På Laglista Flytta formskiktet strax över bildskiktet. Duplicera det och sätt rektanglarna på följande sätt: för den första rektangeln Opacitet = 100%, Blandning = Multiplicera, Färg> R = 173 G = 166 B = 152. För den andra (precis ovanför den första) uppsättningen Opacitet = 50%, Blandning = Normal, Färg> R = 173 G = 166 B = 152.
Så här ska det se ut.
Jag hoppas att du har haft den här handledningen ...
Eftersom du skapar ett användargränssnitt, kan du lägga till några extra detaljer till ditt inloggningsformulär mycket användbart, tycker du inte? Formgränssnitt har många aspekter; olika tillstånd och feedback. Alla tekniker som jag har täckt under denna handledning kommer att ha beväpnat dig med färdigheterna att göra några extra element som följande:
Tror du att du kan göra det? Om du fastnar eller du behöver fråga mig något, lämna bara en kommentar eller hitta mig på Twitter. Jag ser fram emot att se hur du går vidare!
Accentsconagua