Ce guide vous fait visiter le Design Studio pour que vous sachiez où se trouve chaque chose avant de commencer à construire. Il s’adresse à toute personne qui ouvre l’éditeur pour la première fois. À la fin, vous reconnaîtrez la barre d’icônes, le canevas, la barre supérieure, la barre d’outils flottante et les contrôles de zoom, et vous saurez à quoi sert chacun.
À quoi sert le Design Studio
Le Design Studio est l’endroit où vous construisez un modèle de produit. Vous placez du texte, des images, des formes et d’autres éléments sur un canevas, puis vous décidez lesquels un client peut modifier dans la boutique.
Le canevas représente la zone de création active. Vérifiez les dimensions réelles de la surface du produit, le fond perdu, les polices et le résultat de production visé avant de vous fier à un aperçu à l’écran comme à un visuel prêt à imprimer.
Vous pouvez ouvrir le Design Studio de deux façons. Ouvrez-le depuis un produit pour modifier le design de ce produit, ou ouvrez un design autonome et rattachez-le à un produit plus tard.
La barre d’icônes à gauche
La barre d’icônes longe le bord gauche de l’éditeur. Elle permet de passer d’un outil ou d’un panneau à l’autre, parmi ceux que vous utilisez le plus.
Les éléments de la barre apparaissent dans cet ordre :
- Éléments : ajoutez du texte, des formes, des graphismes et des téléversements.
- Calques : voyez et réordonnez tout ce qui est sur le canevas.
- Modèles : partez d’une mise en page réutilisable ou enregistrez-en une.
- Faces : passez d’une face du produit à l’autre, copiez un design de l’une à l’autre et réglez les arrière-plans. Elle s’appelle Tailles pour un produit vendu en plusieurs tailles, et Pages pour un livre.
- Options : choisissez l’aspect que prennent les variantes et les add-ons du produit pour les clients. Leurs choix, leurs prix et leurs photos restent sur la page du produit. Cliquez sur un élément pour ouvrir son panneau ; l’élément cliqué garde une carte blanche. Laissez le pointeur sur un autre élément pour prévisualiser son panneau : cet élément devient gris pendant que vous regardez, et s’éloigner ramène le panneau sur lequel vous avez cliqué ; un clic conserve l’aperçu. Cliquez de nouveau sur l’élément actif pour fermer le panneau.
Un canevas vide indique par où commencer : Texte, Photo et Graphismes en ajoutent un tout de suite, Ajouter des éléments ouvre le panneau avec tout le reste, et Arrière-plan règle la couleur derrière votre création.
Pour rechercher, utilisez la zone de recherche en haut de Éléments, ou appuyez sur Ctrl+K (Cmd+K sur Mac) pour chercher des actions et les calques de votre création. Les options d’affichage du canevas, comme la grille, le magnétisme, les règles et les repères d’impression, se trouvent sous Fichier › Affichage.
La barre supérieure, la barre d’outils flottante et la barre d’état
Trois contrôles entourent le canevas : la barre supérieure au-dessus, une barre d’outils flottante juste sous la barre supérieure, et la barre d’état tout en bas.
La barre supérieure
La barre supérieure regroupe votre navigation et vos contrôles d’enregistrement. De gauche à droite, vous trouvez :
- Une flèche Retour pour quitter l’éditeur.
- Un menu Fichier.
- Le titre du design au centre, sur lequel vous pouvez cliquer pour le renommer sur place, et à côté, l’indication si le produit est dans votre boutique.
- Une pastille Annuler et Rétablir. Après elle, quand quelque chose demande un coup d’œil, le nombre d’avertissements (faces vides, photos en basse résolution) et les polices qui ne se sont pas chargées. Cliquez sur les avertissements pour voir la liste.
- Un bouton Enregistrer à droite. Il affiche Enregistrer quand vous avez des modifications non enregistrées, Enregistrement… pendant que votre travail est stocké, et Enregistré une fois terminé. Si l’enregistrement échoue, un message d’erreur apparaît sous la barre supérieure.
Le volet du formulaire client, ouvert depuis l’onglet sur le bord droit du canevas, montre le formulaire que remplissent les clients. Aperçu vous permet de l’essayer comme un client. Modifier montre le même formulaire avec une petite poignée et un crayon sur chaque champ quand vous le pointez : faites glisser la poignée pour monter ou descendre le champ, ou cliquez sur le crayon pour ouvrir les réglages de ce champ. La flèche ronde, Réinitialiser le formulaire, remet les champs aux valeurs par défaut du design, et ⋯ ouvre les réglages propres au formulaire, comme sa mise en page, ses étapes et l’ordre des champs, dans le panneau Customizer de la barre de gauche. Pour voir le customizer du client en taille réelle, dans sa propre fenêtre, choisissez Fichier › Aperçu client. Vérifiez séparément le parcours publié côté client.
L’éditeur ne fait qu’enregistrer. Votre design est mis en ligne depuis la page du produit, où vous publiez le produit.
La barre d’outils flottante
Une barre d’outils flottante se place entre la barre supérieure et le canevas. Elle comporte toujours les mêmes parties :
- Modifier, en premier pour chaque élément, qui ouvre son panneau de propriétés. Utilisez-le quand un autre panneau, comme Calques, est ouvert.
- Quelques boutons rapides pour ce que vous faites le plus avec l’élément sélectionné. Le texte reçoit sa police, sa taille, sa couleur, le gras et l’alignement. Une photo reçoit Remplacer, Recadrer et Effets. Une carte affiche son lieu. Un bouton qui nomme un réglage, comme le lieu, ouvre le panneau de propriétés directement sur celui-ci.
- Personnalisable, qui indique si les clients peuvent modifier l’élément, et l’active ou le désactive. Il affiche Rendre personnalisable tant qu’il est désactivé, et il est omis pour les éléments que les clients ne peuvent pas modifier.
- Plus, le ⋯ à la fin, avec le même menu qu’un clic droit : dupliquer, verrouiller, ordre des calques, retourner et supprimer.
Un élément verrouillé n’affiche que Verrouillé et, quand vous l’avez verrouillé vous-même, Déverrouiller. Plusieurs éléments sélectionnés reçoivent Aligner, Répartir et Grouper. Quand rien n’est sélectionné, la barre d’outils affiche la couleur d’arrière-plan et la taille du canevas. Pendant le recadrage d’une photo, la barre d’outils est remplacée par Réinitialiser, Annuler et Terminé.
La barre d’état
La barre d’état longe le bas de l’éditeur, avec les faces du produit au milieu. À droite, de gauche à droite :
- Le pourcentage de zoom. Cliquez dessus pour ajuster le canevas à l’écran, chaque fois qu’il sort de la vue ou que vous voulez le recentrer. Pointez-le et un bouton Zoom arrière et un bouton Zoom avant s’ouvrent de part et d’autre.
- Aide, le ?, avec Raccourcis clavier et Aide et chat. Aide et chat ouvre le chat d’assistance, qui n’a pas de bouton flottant dans l’éditeur.
Que les tailles s’affichent en millimètres (mm) ou en pixels (px) est un réglage d’affichage : Fichier › Affichage › Unités.
Suite
Maintenant que vous connaissez l’organisation, ajoutez et mettez en forme du texte pour placer votre premier élément sur le canevas.