Extraction Creative Cloud est une nouvelle fonctionnalité gratuite du service Actifs Creative Cloud, qui vous permet d’utiliser votre navigateur pour accéder à un fichier PSD, y compris à ses calques et groupes de calques. Elle est particulièrement utile pour les designers et développeurs Web, qui peuvent ainsi partager des fichiers PSD, accéder à des informations de conception et télécharger des actifs prêts à l’emploi. A l’aide du module Extraction, vous pouvez effectuer les opérations suivantes sur un fichier PSD dans le navigateur :

  • Copier le texte et le code CSS
  • Obtenir des informations sur les couleurs, les dégradés et les polices
  • Mesurer la distance entre différents éléments
  • Enregistrer des actifs d’image optimisés pour la production

Si vous êtes un développeur ou designer Web utilisant des fichiers PSD, Extraction Creative Cloud simplifie radicalement le passage de la conception au code en réduisant le nombre d’étapes fastidieuses et d’échanges inutiles.

Remarque :

le module Extraction fonctionne en lecture seule ; vous ne pouvez pas l’utiliser pour modifier des fichiers PSD.

Extraction d’informations de style

  1. Connectez-vous au site Web de Creative Cloud.
  2. Accédez à la section Actifs de votre compte Creative Cloud.
  3. Chargez un fichier PSD, soit en effectuant un glisser-déposer dans la zone Fichiers, soit à l’aide de l’option Sélectionner un fichier. Vous pouvez également accéder à un fichier PSD chargé précédemment.
  4. Cliquez sur la miniature du fichier PSD pour l’ouvrir dans la vue Extraction.
Le fichier s’ouvre dans la vue Extraction.

La vue Extraction vous permet d’interagir avec un fichier PSD directement dans le navigateur. Vous pouvez ainsi explorer la hiérarchie des calques, afficher différentes compositions de calques et extraire des portions du PSD en tant que nouveaux fichiers images. Lorsque vous cliquez sur un élément dans l’aperçu du PSD, le calque correspondant est sélectionné et les informations associées s’affichent. Une fois que vous avez sélectionné un élément, vous pouvez réaliser les opérations suivantes :

Affichage et copie des coordonnées et des dimensions d’un élément

Lorsque vous cliquez sur un élément précis du fichier PSD, le panneau d’information s’affiche. Celui-ci indique les dimensions de l’élément en largeur et en hauteur, ainsi que les coordonnées x et y du calque de l’élément dans la conception.

Coordonnées et dimensions d’un élément de conception affichées en pixels (px)
Coordonnées et dimensions d’un élément de conception affichées en pourcentages (%)

Remarque :

Cliquez sur une valeur, par exemple L, H, X ou Y, pour la copier dans le Presse-papiers.

Dans Extraction, les mesures peuvent être affichées en pixels ou en pourcentages. Si vous avez sélectionné un élément, les mesures de hauteur et de largeur en pourcentages sont relatives à la largeur et la hauteur totales de la conception PSD. Si deux éléments, dont l’un est entièrement compris dans l’autre, sont sélectionnés, la largeur et la hauteur de l’élément interne sont indiquées par rapport aux dimensions de l’élément externe.

Les mesures de l’élément interne sont affichées relativement aux mesures de l’élément externe.

Remarque :

Cliquez sur une valeur pour la copier dans le Presse-papiers

Affichage de la distance entre deux éléments

Pour connaître la distance entre deux éléments, maintenez la touche Maj enfoncée et cliquez sur les éléments en question. Il peut être très utile de connaître la distance entre deux éléments lorsque vous devez définir des informations de marge ou de remplissage.

Distance entre deux éléments

Copie du code CSS

Lorsqu’un élément est sélectionné dans la composition PSD, vous pouvez copier son code CSS en cliquant sur Copier le code CSS dans le panneau d’information bleu. Vous pouvez également consulter et copier le code CSS depuis l’Inspecteur CSS.

Affichage du code CSS

Remarque :

le module Extraction prend en charge les préprocesseurs. Dans l’onglet Styles, cliquez sur  (flèche vers le bas) en regard de l’intitulé CSS pour afficher les options relatives à l’utilisation des préprocesseurs CSS.

Option pour l’utilisation des préprocesseurs CSS

Copie du texte

Si l’élément sélectionné contient du texte, cliquez sur Copier le texte pour le copier dans le Presse-papiers.

Copie du texte sélectionné dans le presse-papiers

Affichage et copie des informations de polices, de couleurs et de dégradés

Vous pouvez afficher et copier les informations relatives aux polices, couleurs et dégradés utilisés dans le document de conception (PSD) en ouvrant le panneau Styles. Lorsque vous consultez ces informations, cliquez sur une taille de police, une couleur ou un nuancier de dégradé pour copier la valeur correspondante dans le presse-papiers.

Exemple de valeur de dégradé de couleur

Lorsque vous sélectionnez un élément, le texte et les styles de couleur utilisés sont mis en surbrillance dans le panneau Styles.

Remarque :

Grâce à l’intégration d’Adobe Typekit, le module Extraction vous permet d’accéder à des milliers de polices d’excellente qualité. L’icône Typekit () figure en regard des polices Typekit dans le panneau Styles. Lorsque vous cliquez sur cette icône, le module Extraction ouvre la page correspondant à la police sur Typekit.

Pour utiliser une police compatible Web, ajoutez-la à un kit dans Typekit, puis intégrez un lien vers ce kit dans votre code de production.

Informations relatives aux polices et couleurs de l’élément sélectionné

Utilisation du sélecteur de couleurs

Le sélecteur de couleurs () vous permet d’identifier rapidement la couleur d’un élément de la conception.

  • Sélectionnez l’outil Sélecteur de couleurs, puis cliquez sur n’importe quel point de votre conception. Le sélecteur de couleurs détecte la couleur et l’ajoute en tant que nuance dans le panneau Styles. Il est alors très simple d’afficher et de copier les informations CSS de la couleur.
Outil Sélecteur de couleurs

Extraction d’actifs d’image

Avec Extraction Creative Cloud, vous pouvez sélectionner un ou plusieurs calques dans le fichier PSD et les extraire en tant qu’actif d’image. Les actifs peuvent être extraits en tant qu’images PNG 8 bits, PNG 32 bits, JPG ou SVG.

Extraction d’un actif d’image

Dans le panneau d’information bleu d’un élément, cliquez sur l’icône  et effectuez les opérations suivantes :

  1. Vérifiez les paramètres de l’actif d’image. Si nécessaire, sélectionnez un autre format d’image pris en charge (PNG, JPG ou SVG).
  2. Si vous générez un actif JPG, définissez la qualité de l’actif d’image.
  3. Si nécessaire, sélectionnez une option de dimensionnement. Par exemple, sélectionnez Echelle 2x. Les échelles disponibles pour les actifs vont de 0,1× à 5×.
  4. Cliquez sur Enregistrer.
  5. Recherchez l’actif généré dans le panneau Actifs. Les actifs sont également disponibles dans un nouveau dossier, créé aux côtés du fichier PSD dans la vue Actifs Creative Cloud. Le dossier créé porte le nom -assets. Par exemple, pour un fichier appelé adventure.psd, le dossier d’actifs portera le nom adventure-assets.

    Lorsque vous cliquez sur la vignette d’une image dans le panneau Actifs, cet actif est téléchargé sur votre machine locale.
Panneau Actifs

Remarque :

lorsque vous êtes connecté et consultez un fichier PSD via le service Actifs Creative Cloud, vous avez accès à des fonctionnalités avancées pour l’extraction d’actifs. Chaque fois que vous téléchargez un actif, il est ajouté au panneau Actifs et au dossier .psd_assets du service Actifs Creative Cloud. Vous pouvez cliquer sur la vignette d’une image dans le panneau Actifs pour télécharger l’actif correspondant en local sur votre ordinateur.

Le panneau Actifs n’est pas disponible si vous cliquez sur un lien envoyé par un autre utilisateur pour consulter un fichier PSD. Dans ce cas, vous pouvez utiliser le plug-in Extraction normalement, mais les actifs se téléchargent immédiatement sur votre ordinateur lorsque vous cliquez sur l’icône . Servez-vous alors du gestionnaire de téléchargement du navigateur pour retrouver les actifs sur votre disque local.

Utilisation des calques

Le panneau Calques affiche tous les calques et groupes de calques de la conception PSD. Dans la mesure où Extraction Creative Cloud est une fonctionnalité en lecture seule, les modifications apportées aux calques ne sont pas enregistrées au niveau du fichier PSD.

Le panneau Calques vous permet d’afficher ou de masquer des calques, de sélectionner des éléments et d’extraire des actifs. 

Extraction de calques ou de groupes de calques en tant qu’actifs d’image

Vous pouvez extraire un calque ou un groupe de calques du fichier PSD en tant qu’actif d’image. Procédez comme suit :

  1. Cliquez sur le panneau Calques pour afficher la hiérarchie des calques du fichier PSD.
Hiérarchie de calques

Remarque :

Il est possible de sélectionner plusieurs calques dans la hiérarchie et de les exporter en tant que nouvelle image comprenant l’ensemble de la sélection. 

  1. Examinez et parcourez la hiérarchie de calques. 
    • Pour développer un groupe de calques, cliquez sur l’icône de dossier () en regard de celui-ci.
    • Cliquez sur un élément pour mettre en surbrillance le calque ou groupe de calques correspondant dans le panneau Calques.
  2. Sélectionnez le calque ou groupe de calques à extraire en tant qu’actif d’image. Pour sélectionner plusieurs calques, maintenez la touche Commande (Mac) ou Ctrl (Windows) enfoncée. Si vous sélectionnez plusieurs objets, ceux-ci sont extraits sous la forme d’un actif unique contenant les calques ou groupes sélectionnés.
  3. Cliquez sur l’icône  en regard du calque ou du groupe de calques. Si vous avez sélectionné plusieurs calques ou groupes de calques, cliquez sur l’icône  en regard d’un des calques sélectionnés.
  4. Entrez le nom du nouvel actif d’image.
  5. Sélectionnez un format d’actif d’image (PNG 8 bits avec transparence Alpha, PNG 32 bits, JPG ou SVG).
  6. (Facultatif) Si vous générez un actif d’image JPG, vous pouvez spécifier sa qualité.
  7. Cliquez sur Enregistrer
  8. Recherchez l’actif généré dans le panneau Actifs. Les actifs sont également disponibles dans un nouveau dossier, créé aux côtés du fichier PSD dans le service Actifs Creative Cloud.

Remarque :

l’option Réinitialiser les calques rétablit l’affichage des calques selon l’état d’origine de la conception.

Masquer un calque ou un groupe de calques

Pour masquer ou afficher un calque ou un groupe de calque, cliquez sur l’icône en forme d’œil () correspondante dans le panneau Calques.

Utilisation de compositions de calques

Le module Extraction Creative Cloud vous permet d’afficher différentes compositions de calques Photoshop. Si vous chargez un fichier PSD pour Extraction qui contient des compositions de calques, vous pourrez constater la présence d’un menu contextuel en haut du PSD. Ce menu comporte toutes les compositions de calques figurant dans le PSD, ainsi qu’une sélection intitulée Dernier état du document. Celle-ci correspond au dernier état du fichier dans Photoshop, avant qu’il ne soit enregistré puis envoyé vers Creative Cloud. Cet état peut correspondre ou non à une composition de calques.

Utilisation de compositions de calques dans le module Extraction

Partage de fichiers

Lorsque vous consultez un fichier PSD dans l’onglet Extraction, vous pouvez le partager à l’aide de la fonction de partage de Creative Cloud. Les utilisateurs avec qui vous partagez ce fichier peuvent en extraire les actifs et les mesures, même s’ils ne sont pas connectés à Creative Cloud.

Pour plus de détails, consultez la page Partage de fichiers et de dossiers.

Donnez votre avis

En cas de question, de problème à signaler ou pour tout autre commentaire, n’hésitez pas à publier un message sur le forum Extraction pour PSD.

FAQ

Le module Extraction prend-il en charge les balises Photoshop Generator ?

Oui. Dans la mesure du possible, les paramètres appliqués durant l’extraction d’un actif d’image correspondent par défaut aux balises du générateur spécifiées dans le nom de calque correspondant.

Puis-je modifier un fichier PSD à l’aide du module Extraction ?

Non. Extraction fonctionne en lecture seule.

Certains caractères sont-ils interdits dans les noms de PSD ou d’actif ?

Les caractères spéciaux | " ? < > / \ ; * et : ne sont pas pris en charge dans les noms de fichier PSD ou d’actif d’image.

Qui peut accéder aux fichiers PSD que j’ai chargés ?

Les fichiers que vous chargez dans le module Extraction ne sont accessibles qu’à partir de votre compte Creative Cloud.

Si vous souhaitez partager un fichier PSD, vous pouvez le rendre public et partager le lien. Si l’option Extraction est activée lors du partage, tout utilisateur disposant du lien peut afficher votre fichier PSD dans Extraction et en extraire des actifs.

Le module Extraction fonctionne-t-il avec des fichiers PSD utilisant l’espace colorimétrique CMJN ?

Non. Convertissez les fichiers PSD CMJN vers l’espace colorimétrique RVB avant de les charger dans le module Extraction.

En dehors de PSD, existe-t-il d’autres formats de fichier pris en charge ?

Non. A l’heure actuelle, seuls les fichiers PSD sont pris en charge.

Existe-t-il des restrictions quant aux fichiers PSD qu’Extraction peut traiter ?

Le module Extraction est conçu pour les fichiers PSD créés dans Photoshop. L’utilisation du module Extraction avec des fichiers PSD de plus de 2 Go ou contenant plus de 1 000 calques n’est pas conseillée.

Quelle est la différence entre Extraction et Adobe Generator pour Photoshop CC ?

Generator et Extraction sont deux services conçus pour faciliter la tâche des designers et des développeurs dans le cadre de conversions de compositions en code. Generator extrait des actifs d’image dans Photoshop CC, tandis qu’Extraction fonctionne directement dans le navigateur en tant que service Creative Cloud. Il est possible d’utiliser le module Extraction sans installer ni exécuter Photoshop.

Par ailleurs, dans Extraction, vous pouvez créer un actif unique à partir de plusieurs calques.

Est-il nécessaire de disposer d’un abonnement Creative Cloud pour pouvoir utiliser Extraction ?

Tout utilisateur disposant d’un compte Creative Cloud, payant ou gratuit, peut charger des fichiers PSD dans le service Actifs Creative Cloud et utiliser le module Extraction.

Si vous partagez un lien Extraction, le destinataire n’a pas besoin de se connecter à un compte Creative Cloud pour extraire des actifs et des mesures de vos fichiers PSD.

Pourquoi certains dégradés ou couleurs ne figurent-ils pas dans le panneau Styles du module Extraction ?

Cela est souvent dû au fait que ces couleurs et dégradés sont des remplissages matriciels non pris en charge par le module Extraction. Si votre fichier PSD comporte ce type de remplissage, utilisez le sélecteur de couleurs pour identifier les couleurs, puis ajoutez les nuanciers obtenus au panneau Styles.

Existe-t-il des restrictions quant au code CSS que le module Extraction peut fournir pour les dégradés ?

Oui, certains types de dégradés ne peuvent pas être convertis en CSS, à moins d’utiliser des astuces spécifiques. Actuellement, le module Extraction ne permet pas d’obtenir un code CSS précis pour les dégradés de type incliné, réfléchi, en losange et de forme éclatée. Cependant, les dégradés de type linéaire et radial sont pris en charge.

Pourquoi l’aperçu de mon fichier PSD dans la vue Extraction ne correspond-il pas à ce que je vois dans Photoshop ?

Il peut y avoir des différences de rendu entre Extraction et Photoshop. Si vous constatez de telles différences, n’hésitez pas à nous le signaler.

Pour ce faire, publiez un message sur notre forum en décrivant ce que vous voyez, ou même une image montrant cette différence, et nous tenterons de résoudre le problème.

Puis-je utiliser le module Extraction sur des périphériques mobiles ?

Sur les périphériques mobiles, il est possible d’afficher un aperçu de votre fichier PSD, ainsi que certains styles comme les couleurs, les polices et les dégradés. En revanche, vous ne pouvez pas interagir avec le fichier PSD comme vous le feriez sur un ordinateur de bureau.

Puis-je télécharger tous mes actifs en une fois ?

Actuellement, le module Extraction ne permet pas de télécharger tous vos actifs simultanément. Vous devez extraire et télécharger chaque actif séparément.

Puis-je télécharger tout le code CSS d’une conception en une fois ?

A l’heure actuelle, le module Extraction ne permet pas de télécharger tout le code CSS d’une conception en une fois. Vous devez sélectionner les éléments un par un et copier leur code CSS dans votre code de production.

Si vous souhaitez demander cette fonctionnalité, publiez un message sur notre forum en indiquant ce qui vous conviendrait le mieux pour la sortie CSS.

J’ai partagé mon fichier PSD mais le destinataire ne voit pas l’onglet Extraction. Pourquoi ?

Si vous avez partagé un fichier PSD avant la sortie d’Extraction fin août 2014, l’onglet correspondant ne sera pas disponible dans ce PSD. Pour l’activer, procédez comme suit :

Cette option active le module Extraction sans pour autant modifier votre URL publique.

  1. Dans la boîte de dialogue Envoyer le lien, ouvrez la section Options avancées.
  2. Vérifiez que la case Activer le module Extraction est cochée.

Quelle est la différence entre Project Parfait et Extraction ?

Project Parfait est le service lancé par Adobe sous forme de version bêta, pour présenter les flux de travaux maintenant visibles dans Extraction. Le module Extraction reprend toutes les fonctionnalités de Project Parfait, auxquelles sont venues s’ajouter quelques autres options. Maintenant que la version officielle de Project Parfait a été introduite dans Creative Cloud, il ne sera bientôt plus possible d’utiliser le service Project Parfait pour extraire les informations et les actifs d’un PSD. 

Qu’en est-il des PSD que j’avais chargés dans Project Parfait ?

Si vous avez utilisé Project Parfait et souhaitez récupérer les fichiers sur lesquels vous avez travaillé, vous avez jusqu’à la fin de l’année 2014 pour le faire. 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne