Photoshop CS6 – Compositions de calques

Pour beaucoup, la fonction « Compositions de Calques » se résume à faire plusieurs versions d’une même maquette.
Mais en fait cette fonction peut devenir une fonction « essentielle » pour tout webdesigner. Elle est encore plus intéressante avec certaines nouvelles fonctionnalités de Adobe Photoshop CS6

Le concept

Pour beaucoup un dossier de travail ressemble à une multitude de fichiers PSD plus ou moins bien rangés et nommés ;-), mais cette -pratique- a beaucoup d’inconvénients : de nombreux fichiers à gérer, pas facile de faire une modification rapide sur l’ensemble du projet, manque de souplesse…

En utilisant la fonction « Compositions de Calques« , votre projet tiendra dans un seul et unique fichier PSD et surtout, il sera beaucoup plus facile de faire des modifications sur l’ensemble du projet très rapidement.

Preuve par l’exemple

L’utilisation de la fonction « Compositions de Calques« , et de la façon dont nous allons l’utiliser, demande un peu de rigueur au début mais avec la pratique cela devient très rapidement facile à utiliser.

Le but donc de cette fonction « Compositions de Calques » est de -regrouper- notre projet dans un seul fichier PSD, un peu comme nous pouvons le faire avec Adobe Fireworks (avec les Pages) ou avec Illustrator (avec les Plans de travail).

Note : inconvénient de cette pratique avec Adobe Photoshop par rapport à Adobe Illustrator et/ou Adobe Fireworks et que tous les écrans de notre projet auront la même taille.

Pour vous familiariser donc avec la fonction « Compositions de Calques » nous allons réaliser la maquette d’une application pour mobile, organisée en 3 écrans :
– la home page
– la page galerie
– la possibilité de prendre une photo.

 

Création du projet

Nous créons un nouveau document (Fichier > Nouveau) en prenant comme paramètre prédéfini : Appareils mobiles en 320x480px (format iPhone non Rétina).

Nous créons un premier calque vide nommé « iPhone » et nous le convertissons en « Objet Dynamique » (clic droit > Convertir en objet dynamique)

Qu’est-ce que Objet Dynamique ?

Un « Objet Dynamique » est un calque que nous pouvons redimensionner, faire pivoter, incliner, y appliquer toutes sortes de filtres… sans perdre les données originales.
Les données d’origine sont toujours accessibles, il suffit de double-cliquer sur le calque, devenu dynamique, pour y accéder.

Note : si vous dupliquez votre Objet Dynamique dans votre projet, toutes les occurrences seront mises à jour après toute modification du calque.

Astuce : Lorsque vous créez un Objet Dynamique, faites le toujours à partir d’un calque vide, ainsi votre Objet Dynamique aura la taille du document car si vous créez un Objet Dynamique à partir d’un élément graphique (comme un rectangle, bitmap….), l’Objet Dynamique aura la taille de cet élément graphique et si vous voulez changer la taille de votre Objet Dynamique pour l’agrandir par la suite (image > Taille de la zone de travail), votre Objet Dynamique n’aura plus la même position sur votre scène principale et vous serez obliger de le repositionner.

Status Bar – iPhone

Nous ajoutons des éléments graphiques d’iPhone à notre Objet Dynamique, pour cela nous utilisons un template que vous pouvez trouver à cette adresse : http://www.teehanlax.com/downloads/iphone-gui-psd/ (éléments non Rétina) et nous utilisons que les éléments pour la barre d’état (Status Bar).

Une fois les éléments copiés et placés correctement en x=0 et y=0, vous pouvez enregistrer et fermer ce document pour revenir sur notre scène principale et voir que la barre d’état (Status Bar) est bien à sa position. Verrouillez le calque.

Astuce : Prenez l’habitude de verrouiller les calques qui sont présents sur toutes les Compositions de pages, d’autant plus si vous ne travaillez plus sur ces calques, cela évitera toute modification ou déplacement accidentel.

Maintenant, nous faisons la même chose pour l’image de fond (Background) et la Barre de Navigation (Top Bar).

Le background

Pour l’image de fond (Background), nous créons un nouveau calque vide nommé « Background » et après l’avoir converti en Objet Dynamique (clic droit > Convertir en objet dynamique) éditez (double-clique sur le calque) ce calque dans lequel nous collons une texture style Jeans. Cette texture occupera la totalité de l’écran.

Enregistrez et fermez votre Objet Dynamique pour revenir sur la scène principale et déplacez le calque « Background » vers le bas pour le positionner en dernier (tout en bas). Verrouillez le.

Barre de Navigation

Pour la « Barre de Navigation » (Top Bar), après avoir créé un nouveau calque vide nommé « Top Bar », l’avoir converti en « Objet Dynamique » et l’avoir édité, nous créons un rectangle avec l’outil Rectangle (Outils > Outil Rectangle) de 320x44px et nous le positionnons à 20px du haut (y=20px) ce qui correspond à la hauteur de la barre d’état.

Note : Essayez de travailler au maximum avec des outils « vectoriels », encore plus quand vous travaillez sur des projets pour mobiles (téléphones, tablettes), vous pourrez utiliser ces éléments dans plusieurs résolutions/tailles sans les détériorer.

Astuce : Autre avantage de travailler avec des Objets Dynamiques à la même taille que la scène, ou suffisamment grands, est de pouvoir positionner correctement les éléments graphiques directement, cela nous évitera de devoir les positionner à nouveau sur la scène principale.

Nous voulons ajouter à cette « Barre de Navigation » du « Bruit » (Filtre > Bruit > Ajout de Bruit). Nous allons donc convertir ce rectangle pour pouvoir l’utiliser avec des filtres dynamiques (Filtre > Convertir pour les filtres dynamiques), toujours pour la même raison, être en mesure d’appliquer un effet sans perdre les données originales.

Dernière étape, organisons ces trois calques pour avoir dans l’ordre (de haut en bas) :
– iPhone
– Top bar
– Background
et nous les verrouillons.

Compositions de calques

Avec la fenêtre « Compositions de calques » (Fenêtre> Compositions de calques), nous allons créer un premier calque « Composition de calques » (icône créer une composition de calque), appelé « Home Page ».

Dans la fenêtre de création vous trouverez trois cases à cocher en plus des champs de saisie :

« Visibilité » = enregistre si un calque/groupe est visible ou masqué.
« Position » = enregistrer la position de chaque calque/groupe.
« Apparence » = enregistrer les styles de calques/groupes et leur mode de fusion

Dans la partie commentaire, vous pouvez ajouter du texte et celui-ci apparaîtra dans la fenêtre « Compositions de calques », sous le calque en question.

Dans la fenêtre « Calques » nous créons un nouveau groupe nommé « HOME », ce groupe contiendra tous les éléments graphiques de la page d’accueil.

Mais revenons jeter un oeil à notre fenêtre de « Compositions de calques » pour voir ce qui vient de se passer en créant ce groupe.
Le calque « Home » est surligné en bleu, normal, nous sommes entrain de travailler sur ce calque, mais l’icône qui se trouve à la gauche du titre du calque n’y est plus, on la retrouve un peu plus haut, devant « Dernier état du document ».
Cela nous indique tout simplement que la « composition de calques » sur laquelle nous sommes entrain de travailler, vient d’être modifiée (pour rappel, nous avons créé un groupe).

Toute la subtilité de la fenêtre « Compositions de calques », réside dans cette icône qu’il faut surveiller régulièrement, dès qu’elle n’est plus en face du calque de composition sélectionné, cela indique qu’une modification a été faite sur cette composition, vous devez donc soit mettre à jour notre calque de composition, pour ne pas perdre les modifications soit re-cliquer à l’emplacement où devait être notre icône pour annuler toutes les modifications.

Note : pour mettre à jour votre Composition vous devez cliquer sur « Mettre à jour la composition de calques », zone rouge 1.

Note : pour annuler les modifications et revenir à l’état précédemment enregistré, cliquez sur l’emplacement de l’icône, zone rouge 2.

Une pause s’impose

Nous savons maintenant à quoi servent les « Objets Dynamiques », ce sont des calques qui contiennent des images et/ou des formes vectorielles, ces calques dynamiques conservent toujours le contenu d’origine, vous pouvez donc apporter toutes les modifications souhaitées sans détruire les datas originaux. Ils font aussi office d’objet de librairie puisqu’on peut les dupliquer dans notre document tout en conservant les données originales, on travaille donc avec des -occurrences- de cet objet dynamique. Mais nous allons voir comment les exploiter un peu plus. 

Nous avons vu, aussi, comment fonctionnent les « Compositions de calques », elles permettent de créer, gérer plusieurs « écrans » d’une création dans un seul fichier Photoshop. Au premier abord cette fonction n’est pas simple à maitriser, il faut resté vigilant et attentif, mais vous prendrez très vite l’habitude de la manipuler. 

Ecran 1 – La home page

Donc notre groupe « Home » a bien été créé, nous vérifions bien que, dans la fenêtre « Compositions de calques », le calque « Home Page » est toujours sélectionné et que l’icône est bien devant le titre (update après la création du groupe « Home »). 

Je vous laisse remplir cette page avec les éléments graphiques que vous souhaitez. N’oubliez pas de bien mettre tous vos éléments graphiques dans le groupe « Home », de faire aussi des mises à jour de votre « composition de calque » et de sauvegarder régulièrement votre travail afin d’étiver toute perte de travail.

Styles de paragraphes et de caractères

Une des principales caractéristiques de cette mise à jour CS6, pour nous Webdesigner, est la possibilité de créer des « Styles de Paragraphes et de Caractères ».
On peut, enfin, changer rapidement les styles de nos H1, H2, paragraphes…
Mais cette nouvelle fonction n’est pas encore optimisée pour travailler dans un flux avec plusieurs PSD, car les styles sont enregistrés directement dans le fichier PSD et il n’y a pas pour le moment de fonction d’exportation des styles, donc, si vous utilisez un même style dans plusieurs PSD, il faut glisser/déposer les styles d’un PSD à l’autre….

Mais cette nouvelle fonctionnalité prend tout son sens si vous utilisez les « Compositions de calques » parce que si vous modifiez une style, ce style sera modifié sur l’ensemble de votre maquette, puisque nous travaillons sur un seul et même fichier PSD !

De notre cas, nous pouvons créer un style, par exemple, pour le titre, My Galleries » de la barre de navigation (Top bar).

 

Toujours plus d’écrans

Nous connaissons maintenant toutes les étapes qu’il faut respecter et appréhender pour créer une « Composition de calques ».
Nous pouvons donc créer l’écran « Gallery ». Pour réaliser cet écran nous allons passer en -mode séquentielle- car c’est la seule manière d’apprendre rapidement à maîtriser la gestion des « Compositions de calques ».

1- Nous créons un nouveau calque « Compositions de calques » que nous nommerons « Gallery Page ».
2- Nous vérifions que c’est bien ce dernier calque qui est sélectionné dans la fenêtre « Compositions de calques ».
3- Dans la fenêtre « Calques » nous créons un nouveau Groupe nommé « Gallery ».
4- Toujours dans la fenêtre « Calques » nous masquons le Groupe « Home ».
5- Puis dans la fenêtre « Compositions de calques », nous faisons la mise à jour du calque « Gallery » afin de bien prendre en compte toutes les modifications réalisées.
6- Toujours dans la fenêtre « Compositions de calques », nous sélectionnons le calque « Home page ».
7- Dans la fenêtre « Calques » nous masquons le Groupe « Gallery ».
8- Nous mettons à jour le calque de compositions « Home Page » dans la fenêtre « Compositions de calques ».
9- Puis toujours dans la fenêtre « Compositions de calques », nous sélectionnons à nouveau le calque « Gallery Page ».
10- Nous pouvons maintenant créer, dans la fenêtre « Calques », dans le Groupe « Gallery », les éléments graphiques de la page « Gallery ».
11- N’oubliez pas de faire une mise à jour régulière de la « Compositions de calques » « Gallery Page ».

Note : Quand vous travaillez avec la fonction « Composition de calques » il y a une différence de gestion de la visibilité entre un Groupe et un Calque, quand vous créez un calque celui-ci sera visible uniquement sur la « Composition de calques » sélectionnée, tandis qu’un Groupe sera visible sur toutes les « Compositions de calques », il faudra donc -passer- sur chaque « Composition de calques » pour afficher ou masquer chaque groupe.

Nos trois écrans sont maintenant terminés, grâce à la fenêtre « Compositions de calques » vous pouvez très facilement passer d’écran à l’autre.

Note : Il arrive qu’une icône « d’avertissement » apparaisse à droite du nom de la « Composition de calques », cela se produit en cas de suppression d’un calque, de fusion d’un calque ou de conversion d’un calque en arrière-plan…
Cliquez sur l’icône d’avertissement pour afficher le message expliquant que la composition de calques ne peut pas être restaurée correctement. Choisissez Effacer pour supprimer l’icône d’avertissement et ne pas modifier les calques restants.

 

Un peu plus loin avec les Objets Dynamiques

Revenons sur nos « Objets Dynamiques », car ils peuvent encore nous rendre quelques services, si vous faites un clique-droit sur un calque dynamique vous aurez accès à menu dans lequel deux fonctions vont nous être très utiles :
– Exporter le contenu…
– Remplacer le contenu…

Exporter le contenu

Tous les calques dynamiques peuvent être exportés afin de pouvoir créer par exemple une -bibliothéque- d’objets. Dans notre cas on peut, par exemple, exporter le calque dynamique nommé « iPhone », qui est la barre d’état (Status Bar) de notre téléphone afin de pouvoir l’utiliser dans d’autres créations pour iPhone.

Remplacer le contenu

La fonction remplacer va nous permettre de remplacer le contenu d’un calque dynamique par un autre.
Par exemple, si on veut présenter notre application dans un environnement pour téléphone Android, la première chose à faire va être de changer cette fameuse barre d’état pour une version Android.
Nous partons du principe que vous avez déjà réalisé d’autres applications pour Android, et que vous possédez donc déjà un fichier, de même taille que notre document, qui comporte tous les éléments graphiques de cette barre d’état pour Android (éléments que vous pouvez télécharger à cette adresse : http://developer.android.com/design/downloads/index.html)…

Après avoir déverrouillé notre calque dynamique « iPhone », faisons un clique-droit sur le calque et nous choisissons la fonction « Remplacer le contenu » et nous allons chercher sur notre ordinateur le fichier -Android- qui va remplacer notre barre iPhone.
Comme le fichier importé à la même taille, que notre barre iPhone, le remplacement se fait sans retouche.
Il ne reste plus qu’à renommer notre calque dynamique en « Android ».
Vous pouvez vérifier avec la fenêtre « Compositions de calques » que la nouvelle barre d’état est bien visible sur tous les écrans.

Conclusion

Les « Compositions de calques » et les « Objets dynamiques » sont des fonctions oubliées (ou si peut utilisées) par les Webdesigner et pourtant elles se révèlent être indispensables dans notre travail.

La fenêtre « Compositions de calques » demande de la rigueur et semble difficile à appréhender, mais vous verrez que très vite son utilisation devient simple et évidente (si si).
La « Compositions de calques » n’est pas aussi souple et puissante que les « Pages » de Adobe Fireworks, mais cette fonction -fait- bien son travail et devient vite indispensable pour tous travaux de webdesign.

Vous doutez encore de l’utilité de ces deux fonctions ? Alors :

Qui n’a jamais perdu ou déformé un calque car il lui a appliqué directement un filtre, une réduction, une déformation…. et on se retrouve dans l’incapacité de retrouver le fichier original ?

Qui n’a jamais eu un dossier avec 10-15 PSD et à qui on demande de changer la couleur de la typo ou la typo elle-même sur l’ensemble du projet ?

Qui n’a jamais rêvé d’avoir une bibliothèque de PSD, facilement utilisable dans d’autres créations ?

….