Créer plusieurs pages avec Photoshop

Publié le dans Articles. Mots-clés : , .

Il n’aura échappé à personne que Photoshop est nul pour faire des maquettes d’un site web. Quand il s’agit de faire une page, on s’en sort. Quand on commence à faire plusieurs pages pour un même site, on commence à s’arracher les cheveux !

L’enfer de la gestion de plusieurs pages en PSD

La plupart du temps on commence par créer notre super maquette de page d’accueil. Puis au moment de faire une page secondaire, deux façons de faire se dégagent :

  • On duplique notre PSD de page d’accueil pour faire un PSD par page.
  • On crée un groupe de calques par page, sur le même PSD.

Malheureusement, aucune de ces solutions n’est simple à gérer à long terme.

  • Lorsqu’on duplique le PSD, la moindre modification donne envie de sauter par la fenêtre et génère immanquablement des erreurs et incohérences entre les différents fichiers.
  • Lorsqu’on crée un groupe de calques pour chaque page, on arrive très rapidement à une taille de fichier énorme et une impressionnante arborescence de calques. On est au final ralenti dès lors qu’on commence à naviguer dedans.

Quelle alternative ?

Pour m’épargner les désagréments ci-dessus, la méthode que j’ai décidé d’adopter est toute bête : j’utilise les objets dynamiques.

Les objets dynamiques, qu’est-ce que c’est ?
Tout graphiste/designer qui se respecte utilise les objets dynamiques, ils permettent d’intégrer dans son PSD un objet graphique que l’on pourra modifier sans altérer la source de l’objet.

C’est notamment très utile lorsqu’on importe une forme vectorielle depuis Illustrator. En insérant ma forme vectorielle sous forme d’objet dynamique, je peux la modifier comme n’importe quel calque, lui ajouter des effets, jouer avec les filtres, la déformer… sans que ma forme d’origine ne soit modifiée.
Si je souhaite modifier ma forme vectorielle, un double clic sur l’objet dynamique qui la contient ouvrira ma forme d’origine dans Illustrator. Je peux ainsi la modifier et le changement de ma forme est pris en compte dans mon PSD automatiquement, sans perdre les effets qui auront été appliqués à l’objet dynamique.

Généralement, on utilise cette fonction pour insérer des formes vectorielles, des photographies ou des illustrations.
J’ai juste poussé le principe jusqu’au bout en l’appliquant à des PSD complets ! 😀

Inclure un PSD dans un PSD

Ma méthode est la suivante :

  1. Je crée mon PSD initial, généralement la page d’accueil. Je fais donc la maquette comme j’ai l’habitude de le faire : je crée la page complète.
  2. J’organise les blocs de ma page par groupe de calques (je le fais personnellement dès le départ, mais si ce n’est pas le cas, il est temps de s’y mettre à ce moment). J’ai donc un groupe « header », un groupe « footer », et ainsi de suite.
  3. C’est à partir de là que j’applique ma méthode : je crée un objet dynamique pour chaque groupe de calques qui sera récurrent sur toutes les pages de mon site.

Pour créer un objet dynamique, il suffit de faire un clic-droit sur le groupe à convertir dans la liste des calques, et choisir l’option « Convertir en objet dynamique ».

Mon groupe de calques est donc converti en objet dynamique.

Il me suffit de double-cliquer sur ce nouveau calque pour qu’un nouveau fichier s’ouvre, contenant mes calques originaux. À ce stade cependant, il y a quelques petits points à améliorer :

  • En l’état mon objet dynamique est totalement inclu dans mon fichier d’origine. Je ne peux pas l’importer dans un autre PSD.
  • En ouvrant l’objet dynamique, vous pourrez voir que ce fichier inclu est au format PSB. Ce format est destiné aux fichiers très volumineux. Dans le cas présent, ce n’est pas forcément utile.

Vous l’aurez peut-être deviné, ce qui m’intéresse est d’avoir un fichier PSD indépendant que je puisse « appeler » dans plusieurs fichiers PSD. C’est parti pour les derniers réglages :

  1. Ayant ouvert mon objet dynamique, je suis dans le fichier PSB. Je commence donc par « Enregistrer sous » mon PSB pour créer un PSD indépendant de ma maquette.
    Astuce à suivre selon vos préférences : pour me retrouver facilement dans mes différents PSD, je préfixe avec un tiret-bas (_) les PSD qui seront inclus comme objet dynamique. J’ai donc par exemple des fichiers « _header.psd » et « _footer.psd ».
  2. Une fois que mon PSD externe est créé, j’effectue donc mes modifications dans ce fichier. Pour prendre en compte ces changements dans ma maquette, il suffit simplement de faire un clic-droit sur l’objet dynamique correspondant (dans la fenêtre des calques) et de sélectionner l’option « Remplacer le contenu… ».

Il n’y a plus qu’à choisir votre PSD et hop ! Les modifications apportées au PSD s’appliquent à votre maquette aussitôt ! 😀

Conclusion

Je vous ai décris le processus pour 1 seule maquette ici. Ça peut paraître un peu long présenté textuellement, mais dès le moment où on doit travailler sur plus de 2 ou 3 pages, le gain de temps est évident ! Le temps pris pour effectuer une modification sur mes éléments récurrents ne change pas, mais le temps nécessaire à l’application de ces changements sur les PSD de toutes les pages est drastiquement réduit. Un simple clic-droit puis une sélection de fichier, et la maquette est actualisée, sans risque d’erreurs ou d’oublis. 🙂

13 commentaires sur « Créer plusieurs pages avec Photoshop »

  1. Gaël a répondu le

    Je n’y avais jamais pensé mais c’est vrai que c’est une super idée !!

    Je m’en étais toujours servi pour les objets vectoriels ( à éditer en .ai ) mais effectivement, on peut gérer un « thème » en psd – à l’instar des CMS actuels.

    Je sens que je vais m’y mettre 😀

    Répondre
  2. Kent1 a répondu le

    Comme le dit Gaël, l’utilisation des objets vectoriels est bien pratique et c’était fait naturellement.
    Même si je ne fais pas de webdesign, je pique l’astuce car elle est aussi applicable pour des compositions graphiques et surtout pour des déclinaisons graphiques. Thx for the tip !!

    Répondre
    1. Luc (Rédacteur) a répondu le

      Heureux de pouvoir apporter une astuce qui aide 🙂

  3. Audrey a répondu le

    Quelle riche idée et quel gain de temps ! un vrai bonheur.
    Comme Gaël, je m’en servais surtout pour les objets vectoriels édités en .ai, mais grâce à cet article, je l’applique systématiquement.
    Merci beaucoup Luc pour cette astuce.

    Répondre
  4. michael a répondu le

    Super astuce! je n’avais jamais pensé à cette solution pour les éléments récurrents. Mais j’ai une question, comment fais-tu pour la maquette finale que tu donnes à ton intégrateur ou ton développeur ? Tu lui as appris à utiliser les objets dynamiques ou tu fais l’intégration toi même ? Une fois que ton PSD est validé par le client, on passe à la préparation du PSD pour l’intégrateur. Avec ton astuce, cela me semble compliqué de ressortir les éléments récurrents présents dans des objets dynamiques pour les coller dans le PSD d’une page par exemple…

    Répondre
    1. Luc (Rédacteur) a répondu le

      J’ai de la chance, j’intègre moi-même. 🙂

      Cependant, je pense qu’un intégrateur qui récupère les PSD n’aura pas de mal à comprendre la logique car c’est une astuce que j’ai trouvée en pensant avec mon cerveau d’intégrateur.
      Lorsqu’on intègre une page, on fait 1 fichier à part pour chaque élément récurrent (header, footer…), qu’on vient appeler sur l’ensemble des pages. Cette logique de découpage correspond donc parfaitement.
      Donc même si je n’ai pas eu l’occasion de l’éprouver, je pense que si ton intégrateur a l’habitude de recevoir des PSD dont il exporte lui-même les images, il ne devrait pas être choqué par cette organisation. Il suffit juste de lui expliquer les objets dynamiques mais il devrait vite saisir. 🙂

      Ça m’intéresse d’ailleurs d’avoir un retour sur un tel mode de fonctionnement (designer qui crée les PSD et intégrateur qui les récupère et gère l’export). Je me plais à croire que l’intégrateur serait plutôt content de ce système, car ça rentre vraiment dans la logique de l’intégration.

      Enfin, je n’ai pas trop compris ta dernière phrase :
      « Avec ton astuce, cela me semble compliqué de ressortir les éléments récurrents présents dans des objets dynamiques pour les coller dans le PSD d’une page par exemple… »
      L’idée d’utiliser les objets dynamiques est d’y intégrer les objets récurrents, qui sont donc sur toutes les pages (ou au moins plusieurs pages). Du coup je ne comprends pas trop ce que tu entends par « les coller dans le PSD d’une page »…

    2. michael a répondu le

      En effet si tu intègres toi même, c’est plus simple. Je vais tester ton astuce dans le cadre d’une vraie prod avec un intégrateur qui récupéra mon PSD et je lui expliquerai la logique. Je reviendrais ici te faire part de mon test grandeur nature, promis 🙂

      Par cette phrase : « Avec ton astuce, cela me semble compliqué de ressortir les éléments récurrents présents dans des objets dynamiques pour les coller dans le PSD d’une page par exemple… », je voulais dire ouvrir par exemple le PSD header et drag & droper les calques du header dans le PSD home pour retrouvé un PSD « classique » afin que l’intégrateur ne soit pas perdu face à un PSD contenant principalement que des objets dynamiques 🙂

    3. Luc (Rédacteur) a répondu le

      OK ! Effectivement à part le drag & drop de calques, je ne vois pas trop comment faire. Avec l’inconvénient de devoir aligner les calques sur la maquette derrière. :-s

    4. michael a répondu le

      Exactement, c’est une prise de tête de devoir tout réaligner. C’est pour ça que ta méthode me plait énormément 🙂

  5. michael a répondu le

    Hello!

    Retour sur mon expérience de ta méthode. Je dois dire que dans ma petite entreprise, nous avons adopté cette solution. J’ai mis un peu de temps pour habituer l’intégrateur et le dev senior, mais finalement, cela nous aide bien et nous fait gagner pas mal de temps 🙂

    Répondre
    1. Luc (Rédacteur) a répondu le

      Content de voir que ça fonctionne à plusieurs aussi ! Merci pour ton retour. 🙂

  6. Pingback : Ma checklist qualité du web designer | w3qualité

  7. mag a répondu le

    tip top merci !

    Répondre

Laisser un commentaire