Forstå Sketchs eksportalternativer

Det er en felles oppgave å eksportere eiendeler fra designene dine. Du starter med å lage og forberede grafikken, så velger du eksportformatet, angir egenskapene og du er ferdig. Eksportverktøyene i Sketch 3 er blant de beste funksjonene. Faktisk hjelper Sketch 3 oss med å eksportere innhold på så mange forskjellige måter at jeg er overbevist om at du skal forbedre arbeidsflyten din ved å lese denne artikkelen.

Vi skal bruke noen grunnleggende eksempler for å forstå de ulike eksportalternativene som er tilgjengelige i Skisse 3, og jeg hjelper deg med å bestemme hvilke metoder som passer best for deg, avhengig av hva du jobber med.

For øvrig, hvis du bruker Sketch for mye designarbeid, kan du spare mye tid ved å bruke noen av Sketch-maler på Envato Market. Du kan laste ned Sketch-filer med forhåndsdefinerte, tilpassbare versjoner av de mest brukte brukergrensesnittelementene, slik at du raskt kan tilpasse dem til dine egne behov, i stedet for å starte fra scratch hver gang.

Skisse maler

1. Eksport Basics

Trinn 1

Åpne skisse. Vi trenger et objekt på lerretet, så la oss lage en vektorform. Gå til Sett inn> Form og velg ett av de tilgjengelige verktøyene. For dette eksempelet skal jeg lage en 300x300px firkantet med Sett inn> Form> Rektangel (R). 

HuskeDu kan tegne et tilfeldig rektangel og justere egenskapene gjennom Inspektør panel.

Steg 2

Gå nå til Fil Meny. Du bør se at Eksport alternativet har blitt gjort aktivt. I verktøylinjen kan du klikke på Eksport ikon også, så fortsett og klikk den. Du vil legge merke til noen endringer på lerretet, i lagelisten og inspektørpanelet. Hva som har skjedd?

I lagpanelet har Sketch automatisk opprettet en ny skjære med de samme dimensjonene og plasseringen til objektet vi har på lerretet. Skiver er spesiallag som lar oss eksportere områder på lerretet til filer. Alt innhold innenfor et definert område av et stykke, vil bli inkludert i den filen. Du kan ha så mange skiver som du vil bruke Sett inn> Slice (S) alternativ. Hvert stykke vil eksportere til en annen fil.

Når det er til stede, angir knivikonet og den stiplede oversikten at laget er et stykke. Du kan endre posisjon, bredde og høyde som alle andre objekter i Skisse. Du kan flytte eller skala dem direkte på lerretet, eller ved å bruke inspektøren til å endre egenskapene sine.

Inspektørpanelet

Snakker om inspektøren, ta en titt på det mens du holder stykket valgt. Som jeg allerede har sagt, kan vi endre skiveposisjon, bredde og høyde. Men vi kan også se noen nye muligheter:

  • Trim gjennomsiktige piksler. Slå på dette alternativet hvis du trenger dine eksporterte filer for å få gjennomsiktige piksler trimmet bort fra kantene. For eksempel, si at du har et 32x32px-ikon inne i et 80x80px-stykke. Ved å sjekke dette alternativet eksporteres en 32x32px-fil automatisk uten å endre størrelsen på skiven. Skisse vil trimme bort de gjennomsiktige pikslene.
  • Eksporter gruppeinnhold bare. Dette er ganske nyttig når du lager komplekse motiver med overlappende innhold. Vi kan ikke slå den på akkurat nå, så vi lar det gå til neste eksempel.
  • De Bakgrunnsfarge alternativ Lar oss velge en bakgrunnsfarge for det valgte stykket, fyll inn eventuelle gjennomsiktige piksler i det eksporterte området.

Ved siden av Eksport Etikett vi finner forskjellige rullegardin og inntastingsfelter:

  • Størrelse La oss legge til en multiplikasjonsfaktor hvis vi må endre størrelsen på innholdet som skal eksporteres for denne delen. Skisse 3 kommer med noen forhåndsdefinerte alternativer og variabler for dette.
  • Skriv inn noe i Suffiks skriv inn hvis du vil legge til noe i filnavnet for å gjøre det beskrivende. For eksempel kan du legge til @ 2x suffiks for dobbel størrelse bilder.
  • Velg filformatet ved hjelp av Format fall ned. Sketchs støttede eksportformater er .png, .jpg, .tiff, .pdf, .eps og .svg

Som standard er skisseeksportalternativene satt til Størrelse = 1x (100% original størrelse), ingen suffiks og .png format. La disse alternativene være standardverdier eller spill med dem hvis du vil.

Tips: Skisse støtter eksport til vilkårlige størrelser, så vær ikke bekymret hvis du trenger ting som 100x eksport eller 1,75x eksport. Du kan også skrive verdien av piksler etterfulgt av w for bredde og h for høyde å eksportere eiendeler til enhver størrelse. Skriv for eksempel 60W I eksportverktøyet vil Sketch eksportere eiendelen din på 60px bred og skala høyden tilsvarende. Like, hvis du skriver inn 60 etterfulgt av h Skisse vil eksportere aktiva med 60px høyde og skala bredden proporsjonalt. 

Trinn 3

Nå, husk å holde stykket valgt, ta en titt på bunnen av inspeksjonspanelet. Du ser en stor knapp og en mindre en ved siden av den. Den første vil vise deg det endelige eksporttrinnet. Den andre gir deg noen ekstra muligheter for direkte å legge filen til forskjellige applikasjoner. Du er velkommen til å klikke på knappene for å se hva som skjer når du fullfører eksportprosessen.

Tips: endre navn på skivelaget for å automatisk tildele et filnavn til det eksporterte innholdet ditt.Et fint triks erå inkludere et skråstrek / i navnet, instruerer Sketchå lage undermapper for deg. Følgende bilder illustrerer punktet tydeligere:

Gi nytt navn til skivelaget for å inkludere en skråstrek /Eksporter det lagetDen resulterende mappestrukturen

2. Angi hva du vil eksportere

Trinn 1

Åpne export_what_you_wantfil jeg har gitt som vedlegg til denne opplæringen. 

Merk: du trenger Sketch 3 for å åpne den, men hvis du bruker en eldre versjon, ikke bekymre deg. Det bør ikke være for vanskelig å replikere innholdet selv, men husk at noen av alternativene vi dekker kanskje ikke er tilgjengelige for deg. Se følgende bilde for referanse:

Du ser noen grupperte objekter, et tavla og andre elementer plassert direkte på lerretet, utenfor tavlen. 

Steg 2

Gå til Fil> Eksporter. Alternativt kan du klikke på Eksport ikonet i verktøylinjen.

Når du klikker på Eksporter for første gang, antar Sketch at du vil eksportere dine kunstbrett og vil gjøre dem eksporterbare automatisk, kaste bort alle objekter utenfor tavlene. Du vil også merke at det er nei skive lag tilgjengelig i lag liste. 

Kunstbrett i Skisse 3 kan eksporteres direkte uten å måtte legge til ekstra skiver. Hvis du legger til nye kunstbrett i dokumentet ditt, legger du bare til en eksportstørrelse til disse kunstbrettene ved å klikke på + ikon ved siden av eksportetiketten i inspektør panelet, mens du holder de valgte kunstbrettene. Neste gang du klikker på Eksport ikonet, Sketch vil også inkludere disse tavler.

Trinn 3

La oss komme tilbake til vår fil. Nå skal vi eksportere ett enkelt lag. Velg det blå firkanten direkte, eller gjennom laglisten. Ta en titt på bunnen av inspeksjonspanelet: Du får se et nytt alternativ Gjør eksportable.Trykk på det.

Inspektøren oppdaterer for å vise at du vil eksportere ett bilde ved 1x (originalstørrelse) uten suffiks, og som standard i .png format.  

Se på lagelisten og merk at ikonet i listen for det blå firkantlag har fått et lite knivikon. Dette er å indikere at laget kan eksporteres. Neste gang du går til Fil> Eksporter eller klikk Eksport fra verktøylinjen vil dette nye eksporterbare laget også vises der, blant dine vanlige skivelag.

Trinn 4

Fokuser oppmerksomheten på det lilla torget. Vi skal ikke bruke Gjør eksportable alternativ denne gangen, vi skal automatisk lage et stykke. 

Gå til Sett inn> Slice.Legg merke til hvordan markøren endres når du beveger deg over objektene på lerretet. Husk at knivikonet? Klikk den lilla torget. Et nytt stykke vil vises med samme posisjon, bredde og høyde!

Tips: Etter samme metode kan du lage skiver for hele gruppene også. Og for individuelle stykker i en gruppe, trykk på Kommando nøkkel når du svinger over objektet du vil bli skåret.

Trinn 5

Ok, vi har brukt skiver og Gjør eksportable alternativ. Vi har allerede sett hva som skjer når vi har tavler ... men vi har ikke sett hva som skjer med Eksporter gruppeinnhold bare alternativet ennå!

Gå til Sett inn> Slice og flytt markøren over oransje og grønne rutene, de som allerede er gruppert. Klikk på dem. Du har nettopp opprettet et nytt stykke for gruppen. 

Trinn 6

Flytt skivelaget til gruppen oransje + grønn.

Hvis du ser på inspektøren når skiven er valgt, vil du se at Eksporter gruppeinnhold bare Alternativet kan velges nå. Men ikke sjekk det enda!

På dette punktet i saken er det ganske nyttig å sjekke bildeforhåndsvisningen for å se hvilket innhold som skal inkluderes i vår fil. 

Trinn 7

Undersøk Eksporter gruppeinnhold bare alternativ. 

Se forskjellen? Den røde ellipsen er fjernet fra forhåndsvisningen. 

Når Eksporter gruppeinnhold bare ersjekket, vil skiven bare eksportere lagene i sin egen gruppe, kaste ut noe innhold utenfor det. Lag bak gruppen vil bli kassert også. Dette er et veldig nyttig alternativ på store design med mange overlappende objekter! 

Tips: hvis du har mange stykker i lagelisten din og ikke vil bli plaget av dem, kan du midlertidig slå dem av med den lille knivknappen nederst på lagelisten.

Som vi har demonstrert, kan vi eksportere innhold på så mange måter. Hvilken skal du velge? Vel, det avhenger av hva du trenger. For eksempel Gjør eksportable Alternativet er veldig nyttig for eksporterende ikoner eller enkeltlag. Jeg anbefaler at du lager skiver eller tavler når du eksporterer hele dokumentet (men det er bare et forslag).

3. Flere eksport på en gang

En flott funksjon å vurdere når du bruker Sketch 3, er at du kan eksportere flere bilder samtidig. Jeg mener ikke at du kan eksportere forskjellige bilder fra forskjellige skiver eller tavler (selv om det er mulig). Det jeg mener er at du kan eksportere forskjellige versjoner samtidig fra ett enkelt lag eller stykke.

Trinn 1

Legg til et stykke fra turkisfirkanten, eller gjør det eksporterbart gjennom inspeksjonspanelet. Uansett hva du gjør, bør det ende opp med å ha nye eksportinnstillinger med standardverdier i inspeksjonspanelet. 

Steg 2

Klikk på + ikonet rett over formatet dropdown. Du har faktisk bare fortalt Sketch at du vil ha to forskjellige eksportfiler, fra ett enkelt lag! Klikk på ikonet så mange ganger som du vil få hver størrelse eller format du trenger.

Nå kan du tro at vi har dekket alt som er å vite om Sketchs eksportalternativer, men det er mer! Her er noen ekstra tips:

5. Direkte eksport

Hvis du drar et lag ut av listen til skrivebordet eller i en annen app, eksporteres den automatisk for deg i .png format. Hold nede alternativ (⌥) nøkkel for å bytte til PDF-format når du drar ut.

6. Skiss Generator & Sketch Commands

Vi har snakket om innfødte funksjoner innen Sketch, men det er et veldig aktivt samfunn der ute og utvikler plugins hele tiden. Sketch Generator, for eksempel, er en helt ny måte å eksportere innhold ved hjelp av Sketch. Du bør se på dette pluginet, spesielt hvis du tidligere har prøvd Adobe Generator-funksjonen fra Photoshop CC.

Sketch Commands er en samling av skriptkommandoer. Noen av dem er relatert til eksportoppgaver, så dette er en annen utvidelse jeg vil anbefale deg å ta en titt på.

Konklusjon

Alle tingene jeg har dekket under denne opplæringen, vil ha bevæpnet deg med ferdighetene til å forstå hvordan du eksporterer innhold i Sketch 3. Hvis du har spørsmål om eksport, eller Skisse generelt, bare legg igjen en kommentar nedenfor. Jeg vil gjerne hjelpe!