Adobe Photoshop CS6 : Améliorations pour le Web et les concepteurs d’interface utilisateur

Photoshop CS6 a été salué comme une amélioration énorme pour le web et les concepteurs d’interface utilisateur. Je vais partager avec vous certaines des fonctionnalités que Photoshop CS6 Beta a à offrir et démontrer comment elles peuvent vous aider dans votre web ou processus de création d’interface utilisateur.

Introduction

Quand je me suis réveillé le 26 mars 2012, c’était comme n’importe quel autre ordinaire lundi matin. J’étais toujours à moitié endormi et récupérait de ma gueule de bois de fin de semaine. Puis, comme d’habitude, j’ai vérifié Twitter et c’est là que j’ai remarqué un tweet peu brillant qui bientôt m'a vite réveillé. Il était marqué qu’Adobe avait sorti la bêta de Photoshop CS6.

Maintenant je suis sûr que je n'ai pas le seul à être un peu trop excité à ce sujet (OK je l’admets, je suis un geek). Je veux dire, je travaille avec Photoshop tous les jours et je passe probablement beaucoup plus de temps et vois beaucoup plus de son interface utilisateur que je ne vois ma propre famille. J'ai vite étudié les 65 nouvelles fonctionnalités que je pouvais utiliser. Je me suis vite aperçus que c'est l'une des meilleures mises à jour pour les concepteurs web et d'interface utilisateur j’ai rencontrées.

La nouvelle Interface

Cela fait à peu près deux ans depuis qu'Adobe a enfin publié une mise à jour Photoshop et avec cette mise à jour vient une toute nouvelle interface. Adobe a montré un peu d’amour à son interface utilisateur et je dois dire que je suis impressionné. Vous avez la possibilité de choisir parmi quatre couleurs gris pour que vous puissiez régler le contraste de l’interface à vos besoins. Pour définir ces vous pouvez les trouver dans Préférences > Interface.

Nouvelles bordures

Une des plus grandes questions que j’ai eu envie de demander à Adobe pendant une longue période est « Pourquoi n’y a-t-il aucune option pour ajouter des pointillés ou des bordures pointillées ? ». C’est probablement l’une des techniques plus populaires utilisés dans la conception web moderne en ce moment et c'était jusqu'à maintenant un long processus qui consistait à hacher de lignes ou en utilisant la touche '-' pour créer une série de « points ».

Eh bien, Adobe a certainement réalisé cela et a mis en place un outil pour nous permettre de les créer avec facilité et flexibilité.

Les points peuvent être ajoutés à n’importe quelle forme ou chemin et viennent avec plusieurs options de points qui fonctionnent de façon similaire au panneau des options de points dans Illustrator.

• Aligner - cela vous permet de choisir si vous voulez les points alignés à l’intérieur, à l’extérieur ou au centre de la forme.
• Espaces - cette option vous permet de choisir si vous souhaitez que les lignes de points aient des extrémités carrées (Butt Cap), semi-circulaires (Round Cap) ou carrées au-delà du point de trajectoire (Square Cap).
• Coins - Cela vous permet de choisir comment vous souhaitez que les coins s'affichent. Les options sont Milter, Rouded et Bevel.

Styles de paragraphe

Vous avez reçu votre dernière conception du client. Le PSD contient dix dossiers avec chaque dossier contenant une conception de page pour le site. C’est un gros fichier et le client veut changer la police de titre sur chaque page et vous demande si vous pouvez aussi le faire un peu plus grand afin qu’il devienne plus lisible. Il s’agit d’une modification assez simple, mais c’est l’une de ces modifications qui peut être assez répétitive; chercher tous les dossiers, changer chaque titre individuellement peut prendre plus longtemps que prévu.

Photoshop CS6 introduit le « style de paragraphe » rendre plus faciles les modifications telles que celles-ci. Avec des styles de paragraphe, vous pouvez manipuler efficacement le texte comme vous le feriez en CSS en créant un ensemble de propriétés pour chaque style. Vous pouvez configurer des tags "H1-6" et des tags "p" ou n’importe quel autres modèle que vous pourriez souhaiter. Lorsque le texte a été créé, vous pouvez simplement sélectionner le style souhaité dans Fenêtre > Styles de paragraphe. Cette option fonctionne de manière similaire à celles d'Adobe InDesign, mais est parfaite pour ce genre de scénario.

Lorem Ipsum arrive dans Cs6

Il arrive souvent que les idées les plus simples soient généralement les plus réussies et c’est vrai pour cette nouvelle fonctionnalité particulière de Photoshop CS6. Combien de fois avez-vous dû quitter Photoshop pour prendre du texte factice de lorem ipsum sur le web ? Eh bien maintenant vous n’avez plus à le faire. Vous pouvez simplement coller quelques lorem ipsum à partir du bas du menu texte.

Il s’agit d’une bonne fonctionnalité, mais mon seul bémol serait de le rendre plus maniable vec un raccourci clavier - même taper le mot « lorem » et taper entrée serait vraiment génial ! Ceci peut être contourné, à l’aide d’actions et de raccourcis clavier, mais quand même.

Les couleurs avec hashtag

Si vous effectuez du développement front-end sur les sites que vous créez alors je suis sûr que vous passez beaucoup de temps en allez-retours entre Photoshop et votre éditeur de code choisi. Probablement juste pour obtenir les références de couleur à valeur hexadécimale. Le problème avant, c’était que le champ de valeur hexadécimale du sélecteur de couleurs dans Photoshop précédent n’acceptait pas le symbole de hash (#).

Cela posait des problèmes lorsque vous essayiez de faire correspondre les couleurs sur le web et faisiez souvent des  trajets entre votre inspecteur web, votre éditeur de code et Photoshop. Dans Photoshop CS6 joue bien et accepte le hashtag. Un autre gain peu de temps qui fait toute la différence.

Nouvelles options de document pour les appareils (iPhone, iPad etc.)

C’était seulement une question de temps avant que Photoshop introduise des paramètres prédéfinis pour les appareils courants tels que l’iPhone. Il s’agit d’une petite fonctionnalité qui nous sauve juste un peu de temps supplémentaire. À mon avis, être un bon concepteur web ou d’interface utilisateur tourne autour de la création d’un bon flux de travail et le plus le temps vous épargnez le plus vite vous pouvez faire le travail.

Un autre bon conseil est de créer une action qui ouvre un nouveau document avec les vos appareils UI actifs. Par exemple, j’ai créé une action pour iPhone, iPad et Android qui crée un document et apporte des objets tels que la barre de menus et de contrôles communs ainsi que des lignes directrices automatiquement. Cela améliore les nouveaux documents prédéfinis CS6 un peu plus.

Création de formes et manipulation

En web et en conception d’interface utilisateur, les formes sont une partie importante du processus. Nous les utilisons pour les bannières, les boîtes, les entrées de formulaire et dans beaucoup d’autres cas. Les formes vectorielles ont reçu un grand remaniement dans CS6 et apportent quelques modifications très bienvenues. Penchons-nous sur elles.

• Outils vectoriels et transformation de la grille de pixels. - Cela a été considérablement amélioré dans CS6 et offre maintenant la possibilité d’aligner les formes aux limites de pixels, dont les outils plume et ellipse. Cela signifie que les formes apparaissent plus fortes et ont des bords nets. Vous pouvez trouver cela dans les options globales dans préférences > général
• Coller les attributs de forme - Avec un clic droit sur un calque de forme, vous êtes maintenant en mesure de copier les attributs de la forme (par exemple la couleur et les contours) et de les coller sur une autre forme. Il s’agit d’un gain de temps.
• Formes sous forme de calques - Avant, à la création d’une forme, elle apparaissait dans le panneau Calques comme une couleur unie. C’est n’est plus le cas, mon ami; vous êtes maintenant en mesure de voir la forme dans le panneau Calques.
• Masquage du tracé. - Il est maintenant possible d’activer/désactiver letracé d’une forme en appuyant sur Ctrl+Maj+H. Cela rend beaucoup plus facile d’être en mesure de voir l’effet correct lors de l’ajout des styles de calque comme les contours.
• Créer la taille exacte des formes. Spécifier une forme de taille exacte on avait l’habitude de compter en regardant le panneau d’informations et d’avoir à dessiner la forme tout en essayant d’aligner les mesures. Maintenant vous entrez juste la taille nécessaire dans la barre d’options, placez le curseur sur votre document et cela va créer une forme aux dimensions indiquées.

Au revoir panneau d'infos, bonjour rétroaction visuelle !

Je ne me souviens pas du nombre de fois que j’ai codé une conception et a dû prendre des mesures de l’image ou les positions de l'image pour les sprites. J’avais l’habitude de compter sur le panneau d’infos pour faire cela. OK, le panneau informations existe encore donc ce n’est pas nécessaire de dire « au revoir », mais vous l'utiliserez moins maintenant que la rétroaction visuelle a été introduite dans CS6.

Il est sous la forme d’une petite info-bulle agréable qui vous donne les dimensions des pixels à côté de votre curseur lorsque vous créez une forme ou un texte défilant. Vous n'avez plus à prendre vos repères quant à où le panneau informations est sur votre écran maintenant que les dimensions sont toujours là à côté de votre curseur. C’est une de ces fonctionnalités qui rend difficile à croire que Photoshop ne l'a jamais proposée auparavant.

Recherche de calque

C’est une dont j’ai très certainement besoin. Habituellement, je ne range pas mon PSD jusqu'au bout. Je suis sûr que certains seraient en désaccord avec cette pratique, mais je pense juste que si je devais organiser mon PSD à mesure que j’avançais, alors cela pourrait interrompre mon flux créatif. Je pense que je devrais me concentrer pour que le rendu soit le meilleur possible sans avoir à m'en détacher et à organiser. Si vous êtes comme moi, ou même si vous ne l’êtes pas, je suis sûr que vous apprécierez cette nouvelle capacité de CS6 qu'est recherche de calques. La recherche est vraiment très complète et vous permet de filtrer les couches en fonction des éléments suivants :

• Genre - Cette option vous permet de filtrer vos couches basées par zone de pixel, calque de réglage, calque de texte, calque de forme et objet dynamique.
• Nom - Il s’agit d’une simple recherche pour filtrer vos calques avec leur nom.
• Effet - Filtre les calques avec des styles de calques spécifiques appliqués.
• Mode - Filtre les calques auxquels on a appliqué un mode de couleur spécifique.
• Attribut - Filtre les calques avec des attributs spécifiques attachés comme « verrouillé » ou « visible ».
• Couleur - Filtre les calques que vous avez regroupés sous une couleur spécifique.

Autres petites améliorations utiles.

• Performance - Lorsque vous essayerez pour la première fois CS6 bêta vous remarquerez peut-être juste que tout semble être devenu un peu plus rapide et plus réactif à vos actions. C’est en partie grâce au nouveau moteur de graphique de Photoshop, Mercury. Tout ce que vous faites dans Photoshop est maintenant plus rapide qu'avant.
• Renommez les calques les uns après les autres - Vous pouvez maintenant renommer un calque et passer au suivant afin de le renommer également. Génial !
• Panneau de styles de calque - Lors de la présentation de mon PSD au client ou au développeur, c’est toujours agréable d’envoyer un PSD propre et bien rangé. Maintenant, il y a un moyen simple de fermer tous le styles de calques du calque en appuyant simplement sur sur la petite flèche qui active/désactive les styles de calque.

Conclusion

J’ai utilisé Photoshop CS6 pendant un peu plus de deux semaines et il a accéléré mon flux de travail ? La réponse est oui. Non seulement il a accéléré les mais il a rendu les tâches fastidieuses beaucoup plus faciles et plus gratifiantes à effectuer. CS6 a été noté comme l'une des meilleures améliorations pour les concepteurs web et d’interface utilisateur et je suis d’accord. C’est formidable de voir qu’Adobe est de retour au sommet avec cette nouvelle version et je suis impatient de voir s’il y aura plus d'ajouts agréables à la sortie finale.

Et enfin...

Téléchargez-le maintenant et essayer-le par vous-même !

• Adobe Photoshop CS6 Beta
• Liste de toutes les fonctionnalités (pdf)
• Introduction à Photoshop CS6 Session sur Psdtuts +

Pensez-vous qu’il y a encore quelques fonctionnalités dont Photoshop bénéficierait et qui n’ont pas encore été appliquées ? J’aimerais connaître votre opinion là-dessus !