20 astuces Photoshop pour les concepteurs de sites Web

Tous les concepteurs de sites Web ont probablement leur propre ensemble d'astuces Photoshop préférées dans leurs manches. Pour une bonne raison. La puissante fonction d'édition d'images d'Adobe est un incontournable du monde de la conception Web. Très peu de programmes peuvent rivaliser avec cet excellent logiciel et sa large gamme de fonctionnalités.

Cependant, alors que la plupart des concepteurs de sites Web connaissent Photoshop, vous pouvez toujours en apprendre davantage. Après tout, le programme n'est pas seulement puissant mais aussi complexe. De plus, de nouvelles choses sont ajoutées régulièrement via des mises à jour.

Pour cette raison, c'est une bonne idée de continuer à explorer votre outil préféré. Pour vous aider à le faire, dans cet article, nous examinerons certaines des meilleures astuces Photoshop. Des choses qui peuvent améliorer votre flux de travail, vous faciliter le travail et la vie, vous faire gagner du temps et vous aider à concevoir les meilleurs sites Web possibles.

Êtes-vous prêt à en savoir plus sur Photoshop ? Alors continuez à lire.

Astuces Photoshop pour vous transformer en un assistant de conception Web

Les conseils suivants vont du niveau débutant au matériel plus complexe. Chacun d'eux est choisi pour vous aider à être le meilleur concepteur de sites Web possible.

1. Rationalisez votre espace de travail

Commençons par les bases. La première chose à faire pour améliorer votre flux de travail est de configurer Photoshop d'une manière qui prend en charge la façon dont vous l'utilisez. Après tout, le travail devient plus facile avec un outil plus tranchant.

Pour cette raison, notre premier arrêt est Fenêtre > Espace de travail > Graphique et Web . Le choix de cette option changera les outils disponibles en ce que vous êtes le plus susceptible d'utiliser pour la conception de sites Web.

Après cela, passez à Édition> Préférences . Ici, l'un des arrêts les plus importants est Units & Rulers. Quelle que soit la mesure que vous choisissez ici (très probablement des pixels), ce sera la valeur par défaut pour tous les documents à venir.

(Astuce rapide : pour modifier les règles pour des documents uniques, faites simplement un clic droit dessus et choisissez l'unité de mesure souhaitée.)

Après cela, allez dans Préférences > Performances > Historique et cache et cliquez sur Web / UI Design .

Cela modifiera les paramètres de cache pour favoriser les fichiers plus petits avec beaucoup de couches, ce avec quoi vous travaillerez principalement.

Au même endroit, vous pouvez également choisir le nombre d'états de l'historique. C'est le nombre d'étapes que vous pouvez revenir en arrière si vous souhaitez annuler quelque chose.

Enfin, quittez les préférences, fermez tous les documents et appuyez sur la touche T de votre clavier. Cela fera apparaître le menu des polices en haut de l'écran. Tout ce que vous définissez ici sera désormais standard pour les nouveaux documents. Parce que personne n'aime vraiment Myriad Pro à ce point.

2. Apprenez les raccourcis clavier

Pour tout programme que vous utilisez régulièrement, l'apprentissage des raccourcis clavier est généralement un bon conseil.

Par exemple, j'utilise Ctrl+Alt+2/3 pour créer des en-têtes h2 et h3 lors de la rédaction de cet article. C'est beaucoup plus rapide que d'utiliser la barre d'outils de l'éditeur car je n'ai pas à retirer mes mains du clavier.

Il en est de même pour Photoshop. Savoir comment effectuer une action avec de simples frappes est infiniment plus rapide que de cliquer sur les menus.

Nous mentionnerons un tas de raccourcis clavier tout au long de cet article. Cependant, je recommande également cette aide-mémoire pour apprendre les raccourcis vers les opérations Photoshop les plus courantes. En plus de cela, c'est aussi une bonne idée de prendre l'habitude d'examiner les raccourcis clavier pour les choses que vous faites encore et encore.

3. Grouper et nommer les calques

Lorsque vous travaillez avec Photoshop, vous travaillerez avec des charges et des charges de calques. Non seulement la plupart des éléments obtiennent leur propre calque, mais des modifications telles que la luminosité/le contraste sont également ajoutées en tant que calques.

Pour cette raison, cela peut vite devenir déroutant. Heureusement, il existe de nombreuses options pour le rendre moins, dont deux sont la possibilité de grouper et de nommer des calques.

Tout d'abord, en double-cliquant sur n'importe quelle couche, vous pouvez changer son nom en tout ce que vous voulez.

De cette façon, vous comprendrez facilement si un calque contient l'image d'arrière-plan, le menu ou la barre latérale.

Alternativement, vous pouvez également sélectionner plusieurs calques à la fois, soit en maintenant la touche Ctrl enfoncée pour sélectionner des calques individuels, soit en maintenant la touche Maj enfoncée pour marquer une plage de calques voisins. Ctrl+G les transforme ensuite en groupe.

Sinon, faites un clic droit sur les calques et choisissez l'option de groupe à partir de là. Dans tous les cas, vos calques sont beaucoup plus organisés. De plus, vous pouvez également nommer les calques groupés !

4. Filtrer les calques

Nommer et regrouper les calques est un bon début. Cependant, lorsque vous travaillez avec des dizaines voire des centaines d'entre eux, vous pouvez toujours vous perdre facilement.

Dans ces cas, vous avez également la possibilité de filtrer vos calques. Pour ce faire, utilisez simplement le menu en haut du menu Calques pour filtrer par type, nom, effet, couleur et plus encore.

Vous pouvez également sélectionner directement un calque à l'aide de l'outil Déplacer , en maintenant la touche Ctrl enfoncée et en cliquant sur un calque ou un objet.

5. Créer une grille

Image de PureSolution / shutterstock.com.

La grille est l'un des principes les plus importants de la conception Web. Il met de l'ordre dans la conception et vous aide à placer vos objets. Pour cette raison, il est logique de créer également une grille dans Photoshop.

Pour ce faire, utilisez Affichage > Nouvelle disposition du guide . Vous pouvez également créer des guides horizontaux et verticaux en cliquant simplement sur une règle et en la faisant glisser dans le document. Utilisez Ctrl pour déplacer les guides existants.

6. Importer des échantillons de couleurs

Vous pouvez charger des échantillons de couleurs directement dans Photoshop à partir de fichiers HTML, CSS ou SVG. De cette façon, vous disposez d'un excellent point de départ pour votre palette de couleurs lorsque vous travaillez avec des éléments existants tels qu'un logo.

Pour profiter de cette astuce Photoshop, ouvrez simplement le panneau Nuancier , cliquez sur le menu déroulant dans le coin supérieur droit et choisissez Charger les nuances . Naviguez maintenant jusqu'au fichier en question et ouvrez-le pour importer votre nouvelle nuance de couleur.

7. Enregistrer des formes personnalisées

Surtout lors de la conception de plusieurs pages pour le même site ou de sites Web ayant un design similaire, vous vous retrouverez à utiliser les mêmes objets et formes encore et encore. Pour cette raison, il est logique de les enregistrer en tant que formes personnalisées pour une réutilisation rapide.

Pour ce faire, faites un clic droit sur la forme en question avec l'outil de sélection de chemin (la flèche noire). Ensuite, choisissez Définir une forme personnalisée . Une fois que vous avez terminé, vous pouvez accéder à cette forme via les options de la barre supérieure de l'outil Forme personnalisée . Cliquez simplement sur le menu déroulant où il est écrit Forme : et choisissez votre forme enregistrée.

8. Basculer entre les couleurs d'arrière-plan et de premier plan

Deux basculent entre la couleur d'arrière-plan et de premier plan sans cliquer sur l'icône, appuyez simplement sur X sur votre clavier. De plus, si vous souhaitez que les couleurs reviennent au simple noir et blanc, vous pouvez le faire en appuyant sur D .

9. Modifier l'opacité via le clavier

Autre raccourci clavier : pour tout outil pouvant modifier l'opacité, vous pouvez simplement le faire via le clavier. Les nombres 1 à 0 définiront l'opacité entre 10 % et 100 %. La même chose fonctionne également avec l'opacité des calques.

10. Tracez des lignes droites

Pour tracer une ligne droite avec n'importe quel outil, maintenez simplement la touche Maj enfoncée. Après cela, vous pouvez tracer une ligne (à la fois horizontalement et verticalement) qui sera automatiquement droite comme un clou. Vous pouvez également cliquer sur deux points différents pour créer une ligne droite entre eux.

11. Exemple de couleur

La prochaine étape dans notre sac d'astuces Photoshop est la possibilité d'échantillonner n'importe quelle couleur. Si vous avez besoin de la couleur de n'importe quel objet, maintenez le bouton Alt enfoncé et cliquez sur la teinte que vous désirez. Cela fonctionne à la fois avec le pinceau , le crayon , le pot de peinture et tout autre outil utilisant des couleurs.

12. Ajouter ou supprimer de la sélection

Vous pouvez ajouter à une sélection existante en maintenant la touche Maj enfoncée et en sélectionnant la partie que vous souhaitez inclure. Pour soustraire, faites la même chose mais avec le bouton Alt .

13. Annuler plus d'une étape

La façon classique d'annuler votre dernière action consiste à utiliser Ctrl+Z . Cependant, cela ne fonctionne que pour la toute dernière chose que vous avez faite. Pour revenir plusieurs étapes en arrière, utilisez Ctrl+Alt+Z .

14. Changez dynamiquement la taille de votre pinceau

Pour changer la taille de votre pinceau, il n'est pas nécessaire de cliquer sur le menu déroulant et de le faire glisser à la bonne taille. Au lieu de cela, maintenez simplement Alt et le bouton droit de la souris enfoncés, puis faites glisser vers la gauche et la droite pour diminuer et augmenter la taille de votre pinceau.

15. Économisez pour le Web

L'utilisation de la fonction Safe for Web est essentielle, car elle permet de réduire au maximum la taille de l'image. Ceci est très important pour améliorer la vitesse du site.

Dans Photoshop, vous pouvez le faire via Fichier > Exporter > Enregistrer pour le Web . Cependant, un moyen plus rapide consiste à utiliser Ctrl+Alt+Shift+S . Je vous en prie!

16. Ouvrir les images en tant que calques

Parfois, il est nécessaire d'importer un grand nombre d'images dans Photoshop à la fois. Pourtant, lorsque vous les faites simplement glisser sur votre espace de travail, il vous sera demandé de les placer manuellement.

Un moyen plus pratique de le faire est File > Scripts > Load Files into Stack . Accédez aux images en question, marquez-les et appuyez deux fois sur OK . Désormais, chaque image sera automatiquement importée dans son propre calque.

17. Copiez CSS directement à partir de Photoshop

L'une des astuces Photoshop les plus confortables pour les concepteurs de sites Web est le fait que le programme crée des CSS que vous pouvez exporter. Pas besoin de tout taper à la main ou d'utiliser des essais et des erreurs pour le mettre en œuvre.

Pour en profiter, faites simplement un clic droit sur un calque et choisissez Copier CSS . Vous pouvez également utiliser le menu Calque pour trouver la même option. Vous disposez maintenant de tous les styles nécessaires à coller simplement dans votre feuille de style ou dans tout autre programme que vous utilisez.

18. Conception pour plusieurs appareils et orientations à la fois

Concevoir pour le Web signifie aujourd'hui concevoir pour une pléthore d'appareils différents. À une époque où les appareils mobiles éclipsent les ordinateurs de bureau partout dans le monde, la mise en œuvre de la conception mobile est indispensable.

Source : ComScore

Heureusement, Photoshop propose des plans de travail et des objets intelligents qui facilitent la mise à l'échelle de votre conception dans différents formats.

Je pourrais décrire les deux en détail ici, cependant, Phlearn a fait un excellent tutoriel à ce sujet qui fait un bien meilleur travail que je ne pourrais jamais faire :

19. Utiliser le traitement automatique pour les tâches répétitives

Une autre fonctionnalité impressionnante de Photoshop est le traitement automatique. Cela signifie que vous pouvez répéter les tâches enregistrées encore et encore sans avoir à les exécuter manuellement. C'est super utile, par exemple si vous devez enregistrer beaucoup d'images pour le Web.

Voilà comment cela fonctionne. Tout d'abord, ouvrez votre fichier. Ensuite, ouvrez Actions ( Alt+F9 ), recherchez Créer une nouvelle action et cliquez dessus. Fournissez un nom et, éventuellement, attribuez-lui une combinaison de touches et une couleur.

Pour enregistrer vos actions, appuyez sur Enregistrer . Effectuez ensuite l'opération que vous souhaitez répéter. Dans mon cas, j'ouvre une image d'un dossier et l'enregistre pour le Web dans un autre dossier.

Une fois terminé, arrêtez l'enregistrement. Vous pouvez maintenant réutiliser cette action pour toutes les autres images, ce qui vous fait gagner beaucoup de temps. Pour plus d'informations sur ce que vous pouvez automatiser dans Photoshop, consultez cet article.

20. Aperçu sur l'appareil

Enfin, avec Photoshop, Adobe propose également une application qui vous permet de prévisualiser votre travail sur plusieurs appareils iOS. La meilleure chose : vous pouvez observer les changements sur l'appareil au fur et à mesure que vous les effectuez sur l'ordinateur.

Pour ce faire, installez l'application et utilisez Device Preview pour connecter Photoshop à un périphérique externe via USB ou wifi. Vous trouvez l'option sous Fenêtre > Aperçu de l'appareil .

Quelles sont vos astuces Photoshop préférées ?

Photoshop est l'un des outils de conception de sites Web les plus utilisés. Ses fonctionnalités puissantes le rendent parfait pour la conception de sites Web et d'actifs de haute qualité.

Cependant, une grande puissance s'accompagne également d'une grande complexité et surtout pour les débutants, la maîtrise du logiciel peut prendre un certain temps.

Pour raccourcir la courbe d'apprentissage, nous avons fourni ci-dessus un certain nombre d'astuces Photoshop utiles pour les concepteurs de sites Web. Ils facilitent beaucoup de choses, du flux de travail général au traitement automatique des fichiers.

Connaître Photoshop de fond en comble est un excellent investissement dans vos résultats. Lorsque vous êtes capable de faire les choses plus rapidement, vous pouvez effectuer plus de travail et ainsi générer plus de revenus. Et cela ne peut jamais être une mauvaise chose.

Quelles sont vos astuces Photoshop préférées ? Veuillez nous le faire savoir dans la section commentaires ci-dessous afin que nous puissions tous nous entraider.

Image miniature de l'article par Creative Stall / shutterstock.com