Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
Maximisez votre utilisation de Photoshop

Maximisez votre utilisation de Photoshop

1 juillet 2014Par Antoine Prince
Catégories :

Parfois, en pleine création, nous designers, on s’emporte. On perd littéralement le contrôle de ce que l’on fait et c’est comme un ouragan qui passe au travers de nos documents. Aujourd’hui, je suis là pour vous ramener sur le droit chemin. Amis designers, prenez-vous en main et appliquez les règles de la Photoshop Etiquette!

Fichiers

[img]Fichiers.jpg|450||true|Photoshop fichier|[/img]

Ces règles s’appliquent à n’importe quel logiciel et c’est la première étape vers une bonne organisation de vos fichiers.

Nommez vos fichiers de façon intelligente

Ça semble simple, mais dans un processus d’approbations, il devient difficile de suivre l’évolution d’un fichier et de savoir qu’elle est la version la plus récente. Pour éviter de vivre un casse-tête au quotidien, conservez votre fichier final à la racine de votre dossier. Déplacez les anciennes versions dans un dossier « _Archives ».

Conservez un nombre de fichiers minimal

Idéalement, utilisez un seul fichier pour toutes les fonctions qui s’y rattachent. Par exemple, designez un lightbox à même le fichier où il devra apparaître, au lieu de créer un nouveau fichier Photoshop. Ça évite d’avoir un trop grand nombre de fichiers à gérer.

Ordonnez votre présentation

Dans le cas d’un site Web, vous voudrez présenter les fichiers dans un ordre spécifique. Pourquoi ne pas nommer dès le départ vos fichiers en conséquence. De cette façon, vous n’aurez pas à réordonner tous vos documents une fois que vous serez prêt à faire votre document de présentation. Pour ma part, je nomme mes fichiers plus souvent qu’autrement de cette façon : 01_accueil_client.psd.

Conservez vos fichiers sources

Conserver vos fichiers importants à proximité (textures, images, fonts). Tout ce qui a servi à la réalisation de votre projet. Ces fichiers ne serviront à rien s’ils sont sur votre bureau une fois arrivé en intégration.

Calques

[img]Calques.jpg|450||true|Photoshop calques|[/img]

Les calques, c’est le noyau de Photoshop, c’est également là où il est le plus facile de mettre le bordel. Voici quelques conseils pour conserver un minimum d’ordre dans vos fichiers.

Utilisez les groupes

Apprenez à maîtriser les groupes. C’est beaucoup plus facile à gérer lorsqu’il faut déplacer un groupe d’éléments même si c’est de quelques pixels. N’ayez pas peur d’utiliser des groupes dans des groupes.

Nommez vos éléments principaux

Dans un monde idéal, il faudrait nommer pratiquement tous les calques. Comme nous ne sommes pas dans le monde d’Alice aux pays des merveilles, essayez au moins de nommer les éléments principaux et surtout vos groupes. Quand vous aurez à retrouver des blocs, ce n’en sera que plus facile.

Faites le ménage

Une fois que votre document est final, profitez-en pour remettre les éléments dans un ordre qui fait du sens. Supprimer aussi les calques et les groupes inutiles. Votre fichier sera plus léger et plus fonctionnel.

Ordonnez vos éléments répétitifs

Si un élément revient plus d’une fois dans un même fichier, exactement au même emplacement, pensez à en faire un élément global. Par exemple, la navigation de votre carrousel n’a pas besoin de revenir sur chacune de vos bannières. Placez-la plutôt par-dessus vos calques de bannières. Ainsi si vous faites une modification au look vous n’aurez pas à l’appliquer à toutes ses copies.

Objets

[img]Objets.jpg|450||true|Photoshop objets|[/img]

Photoshop a beaucoup amélioré ses outils afin de permettre du travail non destructif. Mettez-les à profit!

Travaillez en vecteur

Utilisez les formes vectorielles comme masque au lieu des masques de calque. Ainsi si vous faites des modifications à vos formats/proportions ça ne vous prendra que quelques secondes.

Utilisez les objets dynamiques

Conservez vos images en objet dynamique, c’est plus simple lorsqu’on fait la version mobile en retina par exemple. On n’a moins de chance de perdre de la qualité d’image et de voir une image qui a été agrandie se retrouver en ligne

Utilisez la grille

Servez-vous d’une grille, mais surtout de la grille de pixels pour vous assurer d’avoir des pixels pleins et de ne pas être entre-deux. Vous obtiendrez des visuels mieux détaillés et vous éviterez l’impression de flou sur le contour de vos objets.

Travaillez de façon non destructive

Surtout pour de la retouche photo, il existe de nombreux moyens de ne jamais toucher au fichier initial tout en appliquant de nombreux effets. Pour en savoir plus, restez à l’affût, je ferai bientôt paraître un article sur le sujet.

Polices de caractères

[img]Font.jpg|450||true|Photoshop font|[/img]

La typo est l’élément dont on a plus ou moins le contrôle lors de la mise en ligne d’un signe, on peut tout de même avoir le contrôle sur la façon dont on l’utilise à l’intérieur de nos fichiers Photoshop.

Utilisez des valeurs pleines

En Web, une typo à 12.2 pixels de taille n’est pas une bonne pratique, utilisez plutôt des chiffres arrondis à l’unité. Faites surtout attention lorsque vous utilisez l’outil de transformation. Aussi, n’étirez pas votre typographie, conservez les dimensions verticales et horizontales à 100 %. Sans parler du point de vue esthétique, il n’y a pas de façon simple de le faire en HTML/CSS.

Confirmez vos licences

Prenez quelques minutes pour valider les droits que vous procure la licence de la font super méga cool que vous venez de payer avec votre salaire du dernier mois. De plus, si vous n’avez pas obtenu les fichiers pour une intégration Web, faites le test dès le départ avec un générateur de font Web tel que celui de Font Squirrel. Votre font pourrait avoir été blacklister et serait donc non disponible pour le Web. Une réalité très malheureuse une fois que toutes les maquettes ont été approuvées par le client.

Contrôlez vos boîtes de texte

Faites attention aux dimensions que vous donnez à vos boîtes de texte. Assurez-vous de réduire vos boîtes aux dimensions dont vous avez besoin. Si votre texte occupe seulement 300px de hauts, ça ne sert à rien laisser la boîte à 1000px de haut.

Utilisez des boîtes de textes séparées

Surtout dans l’éventualité où vous aurez à réutiliser un bloc de texte avec un widget dans un autre document. Ainsi, vous pourrez faire un groupe avec ces différents éléments et ce sera plus facile à traiter.

À bientôt pour un article sur la retouche non destructive!

Autres articles pertinents

Voir tous les articles