Share
Esportare risorse dai propri progetti è un'attività comune. Si inizia creando e preparando la grafica, quindi si sceglie il formato di esportazione, si impostano le sue proprietà e il gioco è fatto. Gli strumenti di esportazione in Sketch 3 sono tra le sue migliori caratteristiche. In effetti, Sketch 3 ci aiuta ad esportare i contenuti in così tanti modi diversi che sono convinto che migliorerai il tuo flusso di lavoro leggendo questo articolo.
Utilizzeremo alcuni esempi di base per comprendere appieno le diverse opzioni di esportazione disponibili in Sketch 3 e ti aiuterò a decidere quali sono i metodi migliori per te, a seconda di cosa stai lavorando.
A proposito, se utilizzi Sketch per un sacco di lavori di progettazione, puoi risparmiare molto tempo utilizzando alcuni modelli di Sketch su Envato Market. Puoi scaricare i file dello schizzo con versioni pre-modificate e personalizzabili degli elementi dell'interfaccia utente più comuni, in modo da poterli adattare rapidamente alle tue esigenze, piuttosto che ricominciare da capo ogni volta.
Modelli di schizzoApri schizzo. Abbiamo bisogno di un oggetto sulla nostra tela quindi creiamo una forma vettoriale. Vai a Inserisci> Forma e selezionare uno degli strumenti disponibili. Per questo esempio ho intenzione di creare un 300x300px quadrato usando Inserisci> Forma> Rettangolo (R).
Ricordapuoi disegnare un rettangolo casuale e regolarne le proprietà attraverso Ispettore pannello.
Ora vai al File menu. Dovresti vedere che il Esportare l'opzione è stata attivata. Nella barra degli strumenti puoi fare clic su Esportare icona, quindi vai avanti e fai clic. Noterai alcune modifiche nell'area di disegno, nell'elenco dei livelli e nel pannello dell'ispettore. Cos'è successo?
Nel pannello dei livelli, Sketch ne ha creato automaticamente una nuova fetta con le stesse dimensioni e posizione dell'oggetto che abbiamo sulla tela. Le slice sono livelli speciali che ci consentono di esportare aree sulla tela in file. Tutto il contenuto all'interno di un'area definita da una sezione, sarà incluso in quel file. Puoi avere quante fette vuoi usando il Inserisci> Slice (S) opzione. Ogni sezione verrà esportata in un file diverso.
Quando presenti, l'icona del coltello e il contorno tratteggiato indicano che il livello in questione è una sezione. Puoi cambiare posizione, larghezza e altezza come qualsiasi altro oggetto in Sketch. Puoi spostarli o ridimensionarli direttamente sull'area di disegno o utilizzando l'ispettore per modificarne le proprietà.
Parlando dell'ispettore, dai un'occhiata mentre si tiene la fetta selezionata. Come ho già detto, possiamo cambiare la posizione della fetta, la larghezza e l'altezza. Ma possiamo anche vedere alcune nuove opzioni:
Accanto al Esportare etichetta troviamo diversi campi a discesa e di input:
Accentsconagua
@ 2x suffisso per immagini doppie..png, .jpg, .bisticcio, .PDF, .eps e .svg. Per impostazione predefinita, le opzioni di esportazione dello schizzo sono impostate su Size = 1x (100% originale), nessun suffisso e .png formato. Lascia queste opzioni con i valori predefiniti o gioca con loro se vuoi.
Mancia: Sketch supporta l'esportazione di dimensioni arbitrarie, quindi non preoccuparti se hai bisogno di cose come esportazione 100x o esportazione 1.75x. Inoltre puoi digitare il valore dei pixel seguiti da w per larghezza e h per altezza per esportare beni di qualsiasi dimensione. Ad esempio, digitare 60w nello strumento di esportazione e Sketch esporterà la tua risorsa a 60px di larghezza e ridimensionerà l'altezza di conseguenza. Allo stesso modo, se si digita 60 seguito da h Sketch esporterà il tuo asset con un'altezza di 60px e ridimensiona proporzionalmente la larghezza.
Ora, ricordando di mantenere selezionata la tua sezione, dai un'occhiata alla parte inferiore del pannello dell'ispettore. Vedrai un pulsante grande e uno più piccolo accanto ad esso. Il primo ti mostrerà la fase di esportazione finale. L'altro ti offre alcune opzioni extra per collegare direttamente il tuo file a diverse applicazioni. Sentiti libero di cliccare sui pulsanti per vedere cosa succede quando finisci il processo di esportazione.
Mancia: rinominare il livello slice per assegnare automaticamente un nome file al contenuto esportato.Un bel trucco èincludere una barra / all'interno del nome, istruendo Sketchper creare sottocartelle per te. Le seguenti immagini illustrano il punto più chiaramente:
Rinominare il livello slice per includere una barra /
Esporta quel livello
La struttura della cartella risultanteApri il export_what_you_wantfile che ho fornito come allegato a questo tutorial.
Nota: avrai bisogno di Sketch 3 per aprirlo, ma se usi una versione precedente non preoccuparti. Non dovrebbe essere troppo difficile replicare il contenuto da solo, ma ricorda che alcune delle opzioni che copriamo potrebbero non essere disponibili per te. Vedi la seguente immagine per riferimento:
Vedrai alcuni oggetti raggruppati, una tavola da disegno e altri elementi posizionati direttamente sulla tela, fuori dalla tavola da disegno.
Vai a File> Esporta. In alternativa è possibile fare clic sul Esportare icona nella barra degli strumenti.
Quando fai clic su Esporta per la prima volta, Sketch presume che tu voglia esportare le tue tavole da disegno e le renderà esportabili automaticamente, scartando tutti gli oggetti al di fuori le tavole da disegno. Noterai anche che non c'è strato di strati disponibile in strato elenco.
Le tavole da disegno in Sketch 3 possono essere esportate direttamente senza bisogno di aggiungere fette extra. Se aggiungi nuove tavole da disegno al tuo documento, aggiungi una dimensione di esportazione a queste tavole da disegno facendo clic su + icona accanto all'etichetta di esportazione nel ispettore pannello, mantenendo le tavole da disegno selezionate. La prossima volta che fai clic sul Esportare icona, lo schizzo includerà anche quelle tavole da disegno.
Torniamo al nostro file. Ora esporteremo un singolo livello. Seleziona direttamente il quadrato blu o attraverso l'elenco dei livelli. Dai un'occhiata alla parte inferiore del pannello dell'ispettore: vedrai una nuova opzione Rendere esportabile.Cliccalo.
L'ispettore si aggiornerà per mostrarti che esporterai un'immagine a 1x (dimensione originale) senza suffisso e, per impostazione predefinita, in .png formato.
Osserva l'elenco dei livelli e nota che l'icona nella lista per il livello quadrato blu ha ricevuto un'icona a forma di coltello. Questo per indicare che lo strato è esportabile. La prossima volta che vai File> Esporta o clicca Esportare dalla barra degli strumenti, questo nuovo layer esportabile verrà visualizzato anche lì, tra i tuoi livelli di slice regolari.
Focalizza la tua attenzione sul quadrato viola. Non useremo il Rendere esportabile opzione questa volta, creeremo automaticamente una sezione.
Vai a Inserisci> Slice.Nota come il cursore cambia quando ti sposti sopra gli oggetti sulla tela. Ricorda quell'icona del coltello? Clic il quadrato viola. Una nuova fetta apparirà con la stessa posizione, larghezza e altezza!
Mancia: seguendo lo stesso metodo puoi creare sezioni anche per interi gruppi. E per le singole fette all'interno di un gruppo, premi il tasto Comando chiave quando si passa il mouse sopra l'oggetto che si desidera affettare.
Ok, abbiamo usato le fette e il Rendere esportabile opzione. Abbiamo già visto cosa succede quando abbiamo le tavole da disegno ... ma non abbiamo visto cosa succede con il Esporta solo contenuti di gruppo opzione ancora!
Vai a Inserisci> Slice e sposta il cursore sopra i quadrati arancioni e verdi, quelli che sono già raggruppati. Cliccali Hai appena creato una nuova sezione per il gruppo.
Sposta il livello fetta nel gruppo arancione + verde.
Se dai un'occhiata all'ispettore quando la fetta è selezionata vedrai che il Esporta solo contenuti di gruppo l'opzione può essere selezionata ora. Ma non controllare ancora!
A questo punto del procedimento è molto utile controllare l'anteprima dell'immagine per vedere quali contenuti saranno inclusi nel nostro file.
Controlla il Esporta solo contenuti di gruppo opzione.
Vedi la differenza? L'ellisse rossa è stata rimossa dall'anteprima.
quando Esporta solo contenuti di gruppo èselezionato, la sezione esporterà solo i livelli all'interno del proprio gruppo, scartando qualsiasi contenuto al di fuori di esso. Anche gli strati dietro il gruppo verranno scartati. Questa è un'opzione molto utile su progetti di grandi dimensioni con molti oggetti sovrapposti!
Mancia: se hai un sacco di sezioni nella tua lista di livelli e non vuoi essere disturbato da loro, puoi disattivarle temporaneamente usando il pulsante piccolo coltello nella parte inferiore dell'elenco dei livelli.
Come abbiamo dimostrato, possiamo esportare i contenuti in tanti modi. Quale dovresti scegliere? Bene, dipende da ciò di cui hai bisogno. Ad esempio il Rendere esportabile l'opzione è molto utile per esportare icone o singoli layer. Ti consiglio di creare sezioni o tavole da disegno quando esporti l'intero documento (ma questo è solo un suggerimento).
Una grande caratteristica da considerare quando si utilizza Sketch 3 è che è possibile esportare più immagini contemporaneamente. Non voglio dire che puoi esportare immagini diverse da sezioni o tavole da disegno diverse (anche se è possibile). Quello che voglio dire è che puoi esportare diverse versioni contemporaneamente da un singolo livello o slice.
Aggiungi una fetta dal quadrato turchese o rendila esportabile tramite il pannello di controllo. Qualunque cosa tu faccia, dovrebbe finire per avere nuove impostazioni di esportazione con valori predefiniti nel pannello dell'ispettore.
Clicca il + icona appena sopra il menu a discesa del formato. In pratica hai appena detto a Sketch che vuoi due diversi file di esportazione, da un unico livello! Fare clic sull'icona tutte le volte che si desidera ottenere tutte le dimensioni o il formato necessari.
Ora, potresti pensare che abbiamo coperto tutto ciò che c'è da sapere sulle opzioni di esportazione di Sketch, ma c'è di più! Ecco alcuni suggerimenti extra:
Trascinando qualsiasi livello fuori dall'elenco sul desktop, o in qualsiasi altra app, lo esporterà automaticamente per te .png formato. Tenere premuto il tasto opzione (⌥) chiave per passare al formato PDF durante il trascinamento.
Abbiamo parlato delle funzionalità native di Sketch, ma c'è una comunità molto attiva là fuori a sviluppare plugin tutto il tempo. Sketch Generator, ad esempio, è un modo completamente nuovo di esportare contenuti utilizzando Sketch. Dovresti dare un'occhiata a questo plugin in particolare se hai già provato la funzione Adobe Generator da Photoshop CC.
I comandi di schizzo sono una raccolta di comandi di script. Alcuni di questi sono legati alle attività di esportazione, quindi questa è un'altra estensione che ti consiglio di dare un'occhiata.
Tutte le cose che ho trattato durante questo tutorial ti hanno fornito le competenze necessarie per comprendere appieno come esportare i contenuti in Sketch 3. Se hai domande sull'esportazione o su Sketch in generale, lascia un commento qui sotto. Sarò felice di aiutare!
