Share
L'exportation d'actifs à partir de vos conceptions est une tâche courante. Vous commencez par créer et préparer vos graphiques, puis vous choisissez le format d'exportation, définissez ses propriétés et vous avez terminé. Les outils d’exportation de Sketch 3 font partie de ses meilleures fonctionnalités. En fait, Sketch 3 nous aide à exporter du contenu de tant de façons différentes que je suis convaincu que vous allez améliorer votre flux de travail en lisant cet article..
Nous allons utiliser quelques exemples de base pour bien comprendre les différentes options d’exportation disponibles dans Sketch 3 et je vous aiderai à choisir les méthodes qui vous conviennent le mieux, en fonction de vos travaux..
Soit dit en passant, si vous utilisez Sketch pour une grande partie de votre travail de conception, vous pouvez gagner beaucoup de temps en utilisant certains des modèles de Sketch disponibles sur Envato Market. Vous pouvez télécharger des fichiers Sketch avec des versions prédéfinies et personnalisables des éléments de l'interface utilisateur les plus couramment utilisés, afin de pouvoir les adapter rapidement à vos propres besoins, au lieu de recommencer à zéro à chaque fois..
Modèles d'esquisseOuvrir Sketch. Nous avons besoin d’un objet sur notre toile, créons donc une forme vectorielle. Aller à Insérer> Forme et sélectionnez l'un des outils disponibles. Pour cet exemple, je vais créer un 300x300px carré en utilisant Insertion> Forme> Rectangle (R).
Rappelles toivous pouvez dessiner un rectangle au hasard et ajuster ses propriétés à travers le Inspecteur panneau.
Allez maintenant au Fichier menu. Vous devriez voir que le Exportation l'option a été activée. Dans la barre d’outils, vous pouvez cliquer sur le bouton Exportation icône aussi, alors allez-y et cliquez dessus. Vous remarquerez quelques modifications sur le canevas, dans la liste des calques et dans le panneau de l'inspecteur. Que s'est-il passé?
Dans le panneau Calque, Sketch a automatiquement créé un nouveau tranche avec les mêmes dimensions et la position de l'objet que nous avons sur la toile. Les tranches sont des couches spéciales qui nous permettent d'exporter des zones du canevas vers des fichiers. Tout le contenu d'une zone définie dans une zone définie sera inclus dans ce fichier. Vous pouvez avoir autant de tranches que vous voulez en utilisant le bouton Insérer> Tranche (S) option. Chaque tranche exportera vers un fichier différent.
Lorsqu'ils sont présents, l'icône du couteau et le contour en pointillé indiquent que le calque en question est une tranche. Vous pouvez modifier sa position, sa largeur et sa hauteur comme tout autre objet de Sketch. Vous pouvez les déplacer ou les redimensionner directement sur la toile, ou en utilisant l'inspecteur pour modifier leurs propriétés..
En parlant de l'inspecteur, jetez un coup d'œil tout en maintenant la tranche sélectionnée. Comme je l'ai déjà dit, nous pouvons modifier la position, la largeur et la hauteur de la tranche. Mais nous pouvons aussi voir de nouvelles options:
À côté de la Exportation étiquette nous trouvons différents champs de liste déroulante et d'entrée:
Accentsconagua
@ 2x suffixe pour les images en taille double..png, .jpg, .tiff, .pdf, .EPS et .svg. Par défaut, les options d’exportation d’esquisse sont définies sur Taille = 1x (Taille originale 100%), pas de suffixe et .png format. Laissez ces options avec les valeurs par défaut ou jouez avec elles si vous voulez.
Pointe: Sketch prend en charge l'exportation vers des tailles arbitraires. Ne vous inquiétez donc pas si vous avez besoin d'éléments tels que l'exportation 100x ou 1.75x. Aussi, vous pouvez taper la valeur de pixels suivie de w pour la largeur et h pour la hauteur pour exporter des actifs de toute taille. Par exemple, tapez 60w Dans l'outil d'exportation, Sketch exporte votre actif à une largeur de 60 px et adapte la hauteur en conséquence. De même, si vous tapez 60 suivi par h Sketch exportera votre bien avec une hauteur de 60 px et redimensionnera la largeur proportionnellement.
Maintenant, n'oubliez pas de garder votre tranche sélectionnée, jetez un coup d'œil à la partie inférieure du panneau de l'inspecteur. Vous verrez un gros bouton et un plus petit à côté. Le premier vous montrera l'étape finale de l'exportation. L'autre vous donne quelques options supplémentaires pour attacher directement votre fichier à différentes applications. N'hésitez pas à cliquer sur les boutons pour voir ce qui se passe lorsque vous avez terminé le processus d'exportation.
Pointe: renommer le calque de tranche pour attribuer automatiquement un nom de fichier au contenu exporté.Un bon truc estinclure une barre oblique / dans le nom, donnant des instructions à Sketchcréer des sous-dossiers pour vous. Les images suivantes illustrent ce point plus clairement:
Renommez le calque de tranche pour inclure une barre oblique /
Exporter ce calque
La structure de dossier résultanteOuvrez le exporter_que_vous_vousfichier que j'ai fourni en pièce jointe à ce tutoriel.
Remarque: vous aurez besoin de Sketch 3 pour l’ouvrir, mais ne vous inquiétez pas si vous utilisez une version plus ancienne. Il ne devrait pas être trop difficile de reproduire le contenu vous-même, mais souvenez-vous que certaines des options que nous couvrons ne sont peut-être pas disponibles. Voir l'image suivante pour référence:
Vous verrez des objets groupés, une planche graphique et d’autres éléments placés directement sur la toile, en dehors de la planche graphique..
Aller à Fichier> Exporter. Sinon, vous pouvez cliquer sur le Exportation icône dans la barre d'outils.
Lorsque vous cliquez sur Exporter pour la première fois, Sketch supposera que vous souhaitez exporter vos planches d’art et les rendre automatiquement exportables, en supprimant tous les objets. à l'extérieur les planches d'art. Vous remarquerez également qu'il n'y a pas couche de tranche disponible dans le couche liste.
Les planches d’art de Sketch 3 peuvent être directement exportées sans qu’il soit nécessaire d’ajouter des tranches. Si vous ajoutez de nouvelles planches à votre document, ajoutez simplement une taille d'exportation à ces planches en cliquant sur le bouton + icône à côté de l'étiquette d'exportation dans le inspecteur panneau, tout en conservant les planches sélectionnées. La prochaine fois que vous cliquez sur le Exportation Sketch inclura également ces planches.
Revenons à notre dossier. Nous allons maintenant exporter une seule couche. Sélectionnez le carré bleu directement ou dans la liste des calques. Regardez au bas du panneau de l'inspecteur: vous verrez une nouvelle option Rendre exportable.Cliquez dessus.
L’inspecteur se mettra à jour pour vous montrer que vous exportez une image au format 1x (taille originale) sans suffixe et, par défaut, .png format.
Examinez la liste des calques et notez que l’icône dans la liste du calque carré bleu a reçu une petite icône de couteau. Cela indique que la couche est exportable. La prochaine fois que vous allez à Fichier> Exporter ou cliquez Exportation depuis la barre d’outils, ce nouveau calque exportable s’affichera également parmi vos calques de découpes habituels.
Concentrez votre attention sur le carré violet. Nous n'allons pas utiliser le Rendre exportable option cette fois, nous allons créer automatiquement une tranche.
Aller à Insérer> Trancher.Remarquez comment le curseur change lorsque vous vous déplacez au-dessus des objets du canevas. Rappelez-vous cette icône de couteau? Cliquez sur le carré violet. Une nouvelle tranche apparaîtra avec la même position, la même largeur et la même hauteur!
Pointe: En suivant la même méthode, vous pouvez également créer des tranches pour des groupes entiers. Et pour des tranches individuelles à l’intérieur d’un groupe, appuyez sur le bouton Commander touche en survolant l'objet que vous voulez trancher.
Ok, nous avons utilisé des tranches et le Rendre exportable option. Nous avons déjà vu ce qui se passe quand nous avons des planches d’art… mais nous n’avons pas vu ce qui se passe avec le Exporter le contenu du groupe uniquement option encore!
Aller à Insérer> Trancher et déplacez le curseur au-dessus des carrés orange et vert, ceux qui sont déjà groupés. Cliquez dessus. Vous venez de créer une nouvelle tranche pour le groupe..
Déplacer le calque de tranche dans le groupe orange + vert.
Si vous consultez l'inspecteur lorsque la tranche est sélectionnée, vous verrez que le Exporter le contenu du groupe uniquement l'option peut être sélectionnée maintenant. Mais ne le vérifiez pas encore!
À ce stade de la procédure, il est très utile de vérifier l'aperçu de l'image pour voir quel contenu sera inclus dans notre fichier..
Vérifier la Exporter le contenu du groupe uniquement option.
Regarde la différence? L'ellipse rouge a été supprimée de l'aperçu.
Quand Exporter le contenu du groupe uniquement estSi cette case est cochée, la tranche exportera uniquement les calques de son propre groupe, en supprimant tout contenu en dehors de celui-ci. Les calques situés derrière le groupe seront également rejetés. Ceci est une option très utile sur les grands modèles avec beaucoup d'objets qui se chevauchent!
Pointe: si vous avez beaucoup de tranches dans votre liste de calques et que vous ne voulez pas en être dérangé, vous pouvez les désactiver temporairement à l'aide du petit bouton du couteau situé en bas de la liste des calques..
Comme nous l'avons démontré, nous pouvons exporter du contenu de nombreuses façons. Lequel devriez-vous choisir? Cela dépend de ce dont vous avez besoin. Par exemple le Rendre exportable Cette option est très utile pour exporter des icônes ou des calques simples. Je vous recommande de créer des coupes ou des planches lors de l'exportation de votre document entier (mais ce n'est qu'une suggestion).
Une fonctionnalité intéressante à prendre en compte lors de l’utilisation de Sketch 3 est la possibilité d’exporter plusieurs images à la fois. Je ne veux pas dire que vous pouvez exporter différentes images à partir de différentes tranches ou planches d’art (bien que ce soit possible). Ce que je veux dire, c'est que vous pouvez exporter différentes versions simultanément à partir d'un seul calque ou d'une seule tranche.
Ajoutez une tranche du carré turquoise ou rendez-la exportable via le panneau de l'inspecteur. Quoi que vous fassiez, de nouveaux paramètres d'exportation avec des valeurs par défaut dans le panneau de l'inspecteur devraient apparaître..
Clique le + l'icône juste au-dessus du menu déroulant du format. En fait, vous venez juste de dire à Sketch que vous voulez deux fichiers d’exportation différents, d’un seul calque! Cliquez sur l'icône autant de fois que vous le souhaitez pour obtenir toutes les tailles et tous les formats dont vous avez besoin..
Vous pensez peut-être que nous avons couvert tout ce qu'il y a à savoir sur les options d'exportation de Sketch, mais il y a plus encore! Voici quelques conseils supplémentaires:
Glisser n'importe quel calque de la liste sur le bureau ou dans une autre application l'exportera automatiquement pour vous .png format. Maintenez la option (⌥) touche pour passer au format PDF en glissant.
Nous avons parlé de fonctionnalités natives dans Sketch, mais il existe une communauté très active qui développe des plug-ins tout le temps. Sketch Generator, par exemple, est une toute nouvelle façon d’exporter du contenu à l’aide de Sketch. Vous devriez jeter un coup d'œil à ce plugin, en particulier si vous avez déjà essayé la fonction Adobe Generator de Photoshop CC.
Les commandes d'esquisse sont un ensemble de commandes de script. Certains d'entre eux sont liés aux tâches d'exportation, c'est donc une autre extension que je vous recommande de consulter.
Tout ce que j'ai présenté dans ce didacticiel vous permettra de bien comprendre comment exporter du contenu dans Sketch 3. Si vous avez des questions sur l'exportation, ou sur Sketch en général, laissez un commentaire ci-dessous. Je serai heureux d'aider!
