Förstå skissens exportalternativ

Exportera tillgångar från dina mönster är en vanlig uppgift. Du börjar med att skapa och förbereda din grafik, då väljer du exportformatet, anger dess egenskaper och du är klar. Exportverktygen i Sketch 3 är bland de bästa funktionerna. Sketch 3 hjälper oss faktiskt att exportera innehåll på så många olika sätt som jag är övertygad om att du ska förbättra ditt arbetsflöde genom att läsa den här artikeln.

Vi ska använda några grundläggande exempel för att fullt ut förstå de olika exportalternativen som finns i Sketch 3 och jag hjälper dig att bestämma vilka metoder som är bäst för dig, beroende på vad du arbetar med.

Förresten, om du använder Sketch för mycket av ditt designarbete, kan du spara mycket tid genom att använda några av Sketch mallarna på Envato Market. Du kan ladda ner Sketch-filer med färdiga, anpassningsbara versioner av de mest använda användargränssnittselementen, så att du snabbt kan anpassa dem till dina egna behov, istället för att börja från början varje gång.

Skissmallar

1. Export Basics

Steg 1

Öppna skiss. Vi behöver ett objekt på vår duk så låt oss skapa en vektorform. Gå till Infoga> Form och välj ett av de tillgängliga verktygen. För det här exemplet ska jag skapa en 300x300px fyrkantig användning Infoga> Form> Rektangel (R). 

Kom ihågdu kan rita en slumpmässig rektangel och justera dess egenskaper genom Inspektör panel.

Steg 2

Gå nu till Fil meny. Du borde se att Exportera alternativet har gjorts aktivt. I verktygsfältet kan du klicka på Exportera ikon också, så fortsätt och klicka på den. Du märker några ändringar på duken, i laglistan och inspektionspanelen. Vad har hänt?

Sketch har automatiskt skapat en ny i skivpanelen skiva med samma dimensioner och position på objektet som vi har på duken. Skivor är speciallager som tillåter oss att exportera områden på duken till filer. Allt innehåll inom ett definierat område med ett segment kommer att inkluderas i den filen. Du kan ha så många skivor som du vill använda Infoga> Skiva (S) alternativ. Varje skiva exporteras till en annan fil.

När den presenteras visar knivikonen och den streckade konturen att det aktuella skiktet är en skiva. Du kan ändra dess position, bredd och höjd som något annat objekt i Sketch. Du kan flytta eller skala dem direkt på duken eller genom att använda inspektören för att ändra deras egenskaper.

Inspektionspanelen

Prata om inspektören, ta en titt på det medan du håller den skivan som valts. Som jag redan har sagt kan vi ändra skivposition, bredd och höjd. Men vi kan också se några nya alternativ:

  • Trim genomskinliga pixlar. Slå på det här alternativet om du behöver dina exporterade filer för att ha transparenta pixlar trimmade bort från kanterna. Till exempel, säg att du har en 32x32px-ikon i en 80x80px-skiva. Om du kontrollerar det här alternativet exporteras automatiskt en 32x32px-fil utan att ändra storlek på din skiva. Skissen kommer att trimma bort de genomskinliga pixlarna.
  • Exportera gruppens innehåll endast. Detta är ganska användbart när du skapar komplexa mönster med överlappat innehåll. Vi kan inte slå på nu, så vi lämnar det till nästa exempel.
  • De Alternativ bakgrundsfärg Låt oss välja en bakgrundsfärg för det valda segmentet, fyll i några transparenta pixlar inom det exporterade området.

Intill Exportera etikett hittar vi olika rullgardins- och inmatningsfält:

  • Storlek Låt oss lägga till en multiplikationsfaktor om vi behöver ändra storlek på innehållet som ska exporteras för den här skivan. Sketch 3 kommer med några fördefinierade alternativ och variabler för detta.
  • Skriv in något i Ändelse skriv in om du vill lägga till något i filnamnet för att göra det beskrivande. Till exempel kan du lägga till @ 2x suffix för dubbla bilder.
  • Välj filformat med hjälp av Formatera falla ner. Skissens exporterade exportformat är .png, .jpg, .tIFF, .pdf, .eps och .svg

Som standard är Sketch Export-alternativen inställda Size = 1x (100% originalstorlek), inga suffixer och .png formatera. Lämna dessa alternativ med standardvärden eller spela med dem om du vill.

Tips: Sketch stöder att exportera till godtyckliga storlekar, så oroa dig inte om du behöver saker som 100x export eller 1,75x export. Du kan också skriva värdet på pixlar följt av w för bredd och h för höjd att exportera tillgångar i vilken storlek som helst. Skriv till exempel 60w i exportverktyget ska Sketch exportera din tillgång vid 60px bred och skala höjden i enlighet därmed. Likaså, om du skriver 60 följd av h Skissen ska exportera din tillgång med 60px höjd och skala bredden proportionellt. 

Steg 3

Nu, kom ihåg att behålla din skiva vald, ta en titt på undersidan av inspektionspanelen. Du får se en stor knapp och en mindre bredvid den. Den första kommer att visa dig det slutliga exportsteget. Den andra ger dig några extra alternativ för att direkt bifoga din fil till olika applikationer. Klicka gärna på knapparna för att se vad som händer när du avslutar exportprocessen.

Tips: byt namn på skivskiktet för att automatiskt tilldela ett filnamn till ditt exporterade innehåll.Ett bra knep äratt inkludera ett snedstreck / inom namnet instruerar Sketchatt skapa undermappar för dig. Följande bilder illustrerar punkten tydligare:

Byt namn på skivskiktet för att inkludera ett snedstreck /Exportera det lagetDen resulterande mappstrukturen

2. Ange vad du vill exportera

Steg 1

Öppna export_what_you_wantfil jag har angett som bilaga till den här handledningen. 

Notera: du behöver Sketch 3 för att öppna den, men om du använder en äldre version oroa dig inte. Det ska inte vara svårt att kopiera innehållet själv, men kom ihåg att några av de alternativ vi täcker kanske inte är tillgängliga för dig. Se följande bild för referens:

Du ser några grupperade objekt, en tavla och andra element placerade direkt på duken, utanför tavlan. 

Steg 2

Gå till Arkiv> Exportera. Alternativt kan du klicka på Exportera ikonen i verktygsfältet.

När du klickar på Exportera för första gången antar Sketch att du vill exportera dina tavlor och gör dem exporterbara automatiskt, kasserar alla objekt utanför tavlorna. Du märker också att det finns nej skivlager tillgänglig i lager lista. 

Konstbrädor i skiss 3 kan exporteras direkt utan att behöva lägga till extra skivor. Om du lägger till nya tavlor i ditt dokument, lägg bara till en exportstorlek till dessa tavlor genom att klicka på + ikonen bredvid exportetiketten i inspektör panelen, samtidigt som man håller de valda tavlorna. Nästa gång du klickar på Exportera ikonen, Sketch kommer också att inkludera dessa tavlor.

Steg 3

Låt oss komma tillbaka till vår fil. Nu ska vi exportera ett enda lager. Markera den blå rutan direkt eller genom laglistan. Ta en titt på undersidan av inspektionspanelen: du får se ett nytt alternativ Gör exporten tillgänglig.Klicka på det.

Inspektören uppdaterar för att visa att du ska exportera en bild vid 1x (originalstorlek) utan suffix och som standard i .png formatera.  

Titta på laglistan och notera att ikonen i listan för det blå torget har fått en liten knivikon. Detta anger att lagret kan exporteras. Nästa gång du går till Arkiv> Exportera eller klicka Exportera från verktygsfältet kommer det här nya exporterbara lagret också att visas där, bland dina vanliga skivlager.

Steg 4

Fokusera din uppmärksamhet på den lila torget. Vi ska inte använda Gör exporten tillgänglig alternativ den här gången kommer vi automatiskt skapa en skiva. 

Gå till Infoga> Skiva.Lägg märke till hur markören ändras när du flyttar över objekten på duken. Kom ihåg att knivikonen? Klick den lila torget. En ny skiva kommer att visas med samma position, bredd och höjd!

Tips: Efter samma metod kan du skapa skivor för hela grupper också. Och för enskilda skivor i en grupp, slå på Kommando nyckeln när du sveper över objektet som du vill skära.

Steg 5

Okej, vi har använt skivor och Gör exporten tillgänglig alternativ. Vi har redan sett vad som händer när vi har skyltar ... men vi har inte sett vad som händer med Exportera gruppens innehåll endast alternativet än!

Gå till Infoga> Skiva och flytta markören ovanför de orange och gröna rutorna, de som redan är grupperade. Klicka på dem. Du har just skapat en ny skiva för gruppen. 

Steg 6

Flytta skivskiktet till gruppen orange + grön.

Om du tittar på inspektören när skivan väljs så ser du att Exportera gruppens innehåll endast Alternativet kan väljas nu. Men kolla inte det ännu!

Vid det här tillfället är det ganska användbart att kolla bildförhandsgranskningen för att se vilket innehåll som ska ingå i vår fil. 

Steg 7

Kolla Exportera gruppens innehåll endast alternativ. 

Se skillnaden? Den röda ellipsen har tagits bort från förhandsvisningen. 

När Exportera gruppens innehåll endast ärkontrolleras, kommer skivan bara att exportera skikten i sin egen grupp, och slänga något innehåll utanför det. Lager bakom gruppen kommer också att kasseras. Detta är ett mycket användbart alternativ på stora mönster med många överlappande föremål! 

Tips: om du har många skivor i din lagerlista och inte vill bli störd av dem kan du tillfälligt stänga av dem med hjälp av den lilla knivknappen längst ner på laglistan.

Som vi har visat kan vi exportera innehåll på så många sätt. Vilken ska du välja? Tja, det beror på vad du behöver. Till exempel Gör exporten tillgänglig Alternativet är mycket användbart för export av ikoner eller enskilda lager. Jag rekommenderar att du skapar skivor eller tavlor när du exporterar hela dokumentet (men det är bara ett förslag).

3. Flera exportar i taget

En bra funktion att tänka på när du använder Sketch 3 är att du kan exportera flera bilder samtidigt. Jag menar inte att du kan exportera olika bilder från olika skivor eller tavlor (även om det är möjligt). Vad jag menar är att du kan exportera olika versioner samtidigt från ett enda lager eller skiva.

Steg 1

Lägg till en skiva från turkos kvadraten, eller gör den exporterbar via inspektionspanelen. Oavsett vad du gör bör det sluta med nya exportinställningar med standardvärden i inspektionspanelen. 

Steg 2

Klicka på + ikonen precis ovanför formatrutan. Du har faktiskt bara sagt till Sketch att du vill ha två olika exportfiler, från ett enda lager! Klicka på ikonen så många gånger som du vill få varje storlek eller format du behöver.

Nu kanske du tror att vi har täckt allt som finns att veta om Sketchs exportalternativ, men det finns mer! Här är några extra tips:

5. Direkt Export

Om du drar något lager ur listan till skrivbordet eller i någon annan app exporteras den automatiskt till dig i .png formatera. Håll ner alternativ (⌥) nyckel för att byta till PDF-format när du drar ut.

6. Sketch Generator & Sketch Commands

Vi har pratat om inbyggda funktioner inom Sketch, men det finns en mycket aktiv community därut och utvecklar plugins hela tiden. Sketch Generator, till exempel, är ett helt nytt sätt att exportera innehåll med Sketch. Du bör titta på det här pluginet, särskilt om du tidigare har provat Adobe Generator-funktionen från Photoshop CC.

Sketch Commands är en samling av manuskriptkommandon. Vissa av dem är relaterade till exportuppgifter, så det här är en annan förlängning som jag rekommenderar att du tar en titt på.

Slutsats

Alla de saker jag har täckt under denna handledning kommer att ha beväpnat dig med färdigheterna för att fullt ut förstå hur du exporterar innehåll i Sketch 3. Om du har några frågor om export eller Sketch i allmänhet, lämna bara en kommentar nedan. Jag hjälper gärna till!