Utilisateurs de Photoshop : tout ce qu’il faut savoir pour démarrer avec Adobe XD

Si vous utilisez Photoshop mais n’avez pas encore testé Adobe XD, c’est le moment idéal pour vous lancer. La version d’XD du mois de mars vous donne en effet la possibilité de relier facilement vos créations Photoshop, puis de les transformer en prototypes web et d’application interactifs. Outre une interface intuitive optimisant le workflow entre les deux applications, vous avez à votre disposition des options pour partager vos designs et recueillir rapidement des commentaires.

Avec le concours de Paul Trani, Senior Creative Cloud Evanglist chez Adobe, nous avons le plaisir de vous présenter quelques étapes simples pour importer vos fichiers Photoshop dans Adobe XD et tirer pleinement parti d’un workflow multi-applications. Donnez une nouvelle dimension à vos créations Photoshop.

Prise en main : accès à vos fichiers PSD dans Adobe XD

  1. Si vous n’avez pas installé Adobe XD, téléchargez-le maintenant.
  2. Démarrez un nouveau design, et choisissez Fichier > Ouvrir. Accédez au fichier PSD de votre choix, puis cliquez sur Ouvrir.
  3. Les calques, effets, groupes et masques de votre fichier Photoshop sont automatiquement importés dans Adobe XD, avec une grande fidélité. Vous pouvez ainsi manipuler vos contenus PSD directement dans l’application, et vous en servir pour créer des arrières-plans, des icônes, etc. Voici la liste des éléments pris en charge à l’ouverture d’un fichier Photoshop dans XD.
  4. Utilisez les outils d’Adobe XD pour élaborer le design de votre application ou site web. Passez en mode Prototype, puis reliez les écrans pour créer un prototype entièrement interactif.
  5. Découvrez comment vos créations Photoshop prennent vie sous forme de prototypes web et d’application entièrement interactifs.

« Une fois que vous avez ouvert votre fichier PSD dans XD, vous pouvez vous lancer dans le prototypage et commencer à relier plusieurs écrans entre eux. Chaque calque étant importé séparément, tout reste parfaitement clair et structuré », explique Paul Trani.

Copiez-collez vos créations Photoshop dans Adobe XD

Pour accéder encore plus rapidement à vos créations Photoshop dans Adobe XD, vous pouvez tout simplement les copier-coller dans l’application. Libre à vous de limiter la copie aux calques d’une image Photoshop ou de copier l’intégralité de votre design sous forme d’image unique où tous les calques sont fusionnés. Voici la procédure à suivre pour copier un élément Photoshop et le coller dans Adobe XD :

  1. Dans Photoshop, activez l’outil Rectangle de sélection, puis sélectionnez le contenu que vous souhaitez copier dans XD.
  2. Choisissez **Édition > Copier **pour copier le contenu du calque actif, ou **Édition > Copier avec fusion **pour copier celui de tous les calques de la zone sélectionnée.
  3. Ouvrez Adobe XD, puis cliquez sur **Édition > Coller **pour coller le calque ou le design complet sous forme d’image bitmap.

Importez des éléments Photoshop dans Adobe XD via les Bibliothèques Creative Cloud

L’un des moyens les plus simples de travailler avec Photoshop et XD consiste à importer vos éléments de création Photoshop dans une Bibliothèque Creative Cloud, puis à les manipuler dans Adobe XD à partir de cette même bibliothèque. Non seulement vous pouvez réutiliser facilement vos contenus Photoshop pour un prototype de site web ou d’application dans XD, mais vous pouvez aussi les modifier dans Photoshop et voir automatiquement les changements dans Adobe XD. Voici la procédure à suivre pour importer vos contenus Photoshop dans une Bibliothèque Creative Cloud et y accéder dans Adobe XD :

  1. Sélectionnez le contenu Photoshop à importer. Dans le panneau Bibliothèques situé à droite de l’interface, cliquez sur le signe Plus (+). Avant de cliquer sur Ajouter, vérifiez que la case à cocher Graphique est bien activée.
  2. Dans Adobe XD, choisissez Fichier > Ouvrir les bibliothèques CC. Faites glisser votre élément Photoshop vers votre projet Adobe XD.
  3. L’actif étant désormais lié, toutes les modifications que vous lui apporterez dans Photoshop seront automatiquement répercutées dans Adobe XD.

« Les Bibliothèques Creative Cloud sont très pratiques car je peux sélectionner directement un élément en cliquant dessus avec le bouton droit de la souris, le modifier dans Photoshop pour ajuster l’arrière-plan, puis repasser dans XD une fois les réglages terminés. Lorsque vous avez 15 plans de travail différents, ce lien dynamique vous simplifie considérablement la tâche », confie Paul Trani.

En savoir plus sur les Bibliothèques Creative Cloud dans XD

Créez rapidement des expériences multi-écrans à partir de contenus Photoshop

Si vous travaillez beaucoup dans Photoshop, il est fort probable que vous soyez souvent amené à régler divers éléments visuels. Après avoir importé ces éléments dans Adobe XD, vous pouvez gagner du temps en tirant parti de la puissante fonction Grille de répétition. Concrètement, elle vous permet de créer un groupe d’objets pouvant inclure votre design Photoshop. Les changements apportés à un plan de travail sont automatiquement appliqués à tous les autres.

« La Grille de répétition est un outil vraiment intuitif pour créer un design et l’agrémenter d’icônes ou de boutons. Imaginez le nombre de copier-coller qu’il faudrait effectuer dans Photoshop pour répéter cinq éléments différents d’un plan de travail à l’autre. Dans l’application XD, vous pouvez très facilement créer des expériences homogènes avec de multiples plans de travail reprenant vos contenus Photoshop », déclare Paul Trani.

Pour bénéficier d’un tutoriel détaillé sur l’utilisation de la Grille de répétition d’Adobe XD, consultez notre article de blog intitulé Exploring Repeat Grid in Adobe XD (en anglais), puis testez cet outil sur vos propres designs.

Collectez aisément des commentaires sur vos créations Photoshop

L’avantage avec l’application de design et de prototypage Adobe XD, c’est que vous pouvez partager vos créations via des liens et collecter aisément les commentaires. D’où l’intérêt de l’utiliser également pour recueillir des avis sur vos compositions Photoshop.

Après avoir relié vos différents plans de travail, vous pouvez partager votre prototype interactif en cliquant sur le bouton Partager dans l’angle supérieur droit d’Adobe XD, puis en choisissant Publier le prototype. Il vous suffit ensuite de cliquer sur le bouton **Créer un lien public **pour générer une URL et la communiquer aux personnes de votre choix. Celles-ci pourront alors annoter votre design et mettre en évidence certains de ses aspects.

« Si je dispose de ce lien et souhaite donner mon avis sur un projet Photoshop, je peux épingler mes commentaires sur les parties du prototype Adobe XD correspondant au contenu Photoshop. Par exemple, un client peut demander d’appliquer du vert et épingler son commentaire en haut à gauche de l’objet concerné. De son côté, le designer peut suivre et traiter chaque demande, et si les éléments sont dynamiquement liés, il peut facilement repasser dans Photoshop et actualiser le lien par la suite », explique Paul Trani.

C’est également un excellent moyen de collaborer avec les développeurs, qui peuvent accéder à toutes les spécifications du design à partir du lien publié.

Toutes les ressources indispensables pour réussir dans Adobe XD

L’utilisation conjointe de Photoshop et d’Adobe XD présente de nombreux avantages, à commencer par la possibilité de créer aisément des designs époustouflants et de les transformer en prototypes web et d’application interactifs. Voici quelques ressources supplémentaires qui vous aideront à démarrer avec Adobe XD :

« Les utilisateurs de Photoshop ne devraient avoir aucun mal à se familiariser avec XD. Les outils sont vraiment très intuitifs. Si vous connaissez Photoshop, vous serez à l’aise avec XD », précise Paul Trani.

****

Kits d’icônes gratuits.

Les célèbres designers Anton & Irene, Büro Destruct and Lance Wyman ont créé pour vous 3 kits gratuits exclusifs. Lisez notre blog et téléchargez les kits gratuitements.

Participez au concours #IconContestXD et gagnez un voyage à Adobe MAX à Los Angeles.

Adobe a lancé un concours de design unique autour de Adobe XD. Nous vous invitons à utiliser l’un des trois kits d’icônes gratuits pour créer un prototype d’application web ou mobile, qui mettra en avant les meilleures adresses de votre ville. Voici toutes les informations pour participer au concours – faites vite, le concours se termine le 15 mars !

**Pour recevoir des informations sur l’expérience utilisateur directement par e-mail, abonnez-vous à la **newsletter d’Adobe consacrée au design d’expérience.