Photoshop 101: une introduction pour les développeurs Web

introduction

Souvent, lorsque nous travaillons en tant que développeur Web, nous devons intégrer des modèles. Ils peuvent provenir de Photoshop ou d'un autre logiciel. Dans cet article, nous examinerons les bases de Photoshop pour les développeurs Web.

Ce contenu a été initialement écrit pour un atelier pour DAMDigital Londres.

Adobe Photoshop est un logiciel d'édition de graphiques matriciels, ce qui signifie qu'il s'agit d'un programme qui permet aux utilisateurs de créer et d'éditer des images.

Il a été publié en 1988 et est devenu la norme de l'industrie pour les logiciels graphiques.

Vous pouvez télécharger une version d'essai gratuite de Photoshop sur le site Web d'Adobe.

Espace de travail

L'espace de travail de Photoshop est modulaire, vous pouvez donc l'adapter en fonction du travail que vous effectuez. Certains espaces de travail par défaut sont déjà configurés dans Photoshop. Dans cet article, j'utilise celui- Graphic and Webci. Pour accéder à cet espace de travail, accédez à Window/workspace/Graphic and Web.

Jetons un coup d'œil à notre espace de travail:

  • A - Barre de menus : c'est ici que vous trouverez la plupart des options de Photoshop.
  • B - Barre d'options : Cette barre vous donnera toutes les options pour l'outil actuellement sélectionné.
  • C - Boîte à outils : Ce panneau contient tous les outils disponibles de Photoshop. Les outils associés sont regroupés et vous pouvez cliquer longuement sur l'un d'entre eux pour voir tous les outils.
  • D - Panneaux : Il est la zone où vous avez vos panneaux de base ouverts, tels que Layers, Historyet ainsi de suite. Pour ouvrir un panneau, allez simplement dansWindow/(Panel that you want to open)

Créer un nouveau fichier

Lors de la création d'un nouveau fichier dans Photoshop, vous devez d'abord savoir sur quel support le design va être utilisé - c'est-à-dire, va-t-il être utilisé pour un écran (Web, film ou vidéo) ou pour l'impression?

En fonction de la réponse à cette question, vous devrez modifier la valeur PPI (pixels par pouce).

Les pixels par pouce (PPI) sont une mesure utilisée pour définir la résolution d'un écran d'ordinateur. Cette métrique évalue la qualité d'image / image qu'un ordinateur particulier ou un dispositif d'affichage de sortie est capable d'afficher. Les pixels par pouce sont également appelés densité de pixels. Techopedia

Pour l'impression, vous avez normalement besoin de 300 PPP, mais cela dépend en fait de l'imprimante et de la taille du document imprimé. Vous devez également changer votre couleur en CMJN, mais encore une fois, cela dépend de la façon dont vous imprimez votre document. Si vous souhaitez en savoir plus sur les couleurs RVB et CMJN, consultez cet article.

Pour les écrans et le web?, Vous avez besoin de 72PPI et de couleurs RVB. Ensuite, vous devez spécifier la taille de votre écran. Je recommanderais de concevoir d'abord pour mobile, puis tablette et ordinateur de bureau.

En tant que développeur Web, vous n'aurez peut-être pas besoin de créer un nouveau fichier. Il est fort probable que vous deviez travailler avec un design fourni par des concepteurs Web.

Nous allons maintenant examiner un .psdmodèle existant et travailler avec lui pour avoir un aperçu de Photoshop.

Vous pouvez télécharger et ouvrir ce modèle PSD de Luis Costa.

Couches

Les calques sont l'une des principales fonctionnalités de Photoshop . Les calques sont comme une pile de feuilles et vous pouvez voir à travers les zones transparentes ou les zones à faible opacité (partiellement transparentes).

Vous pouvez ouvrir le panneau Calque dans Window/Layers.

La couche supérieure de ce panneau sera placée sur toutes les autres couches en dessous. Les calques peuvent également être organisés en dossiers. Il est important de nommer correctement les couches et les dossiers. Cela aidera lors de l'intégration.

À côté de chaque dossier et calque, vous avez une icône en forme d'œil. Cela vous permet de basculer leur visibilité.

Votre PSD peut avoir beaucoup de couches et de documents. Une façon de trouver rapidement un calque consiste à sélectionner le fichier move tool (v). Faites un clic droit sur la toile où vous souhaitez trouver votre calque. Vous obtiendrez toutes les couches dans la zone où vous avez fait un clic droit. En cliquant sur un, il sélectionnera ce calque dans votre panneau de calque.

Boîte à outils

Photoshop est livré avec une multitude d'outils. Je vais vous en montrer quelques-uns utiles qui vous aideront?.

Tout d'abord, si vous installez simplement Photoshop CC 2018, vous devrez restaurer tous les outils. Allez donc dans la Edit > Toolbarre et cliquez sur le bouton Restore Defaults.

Nous allons voir certains des outils les plus utiles que vous utiliseriez pour intégrer un modèle:

A - Outils de sélection

  • Déplacer : permet à l'utilisateur de déplacer un calque sur le canevas. Comme nous l'avons vu précédemment, il peut également être utilisé pour trouver un calque si vous faites un clic droit sur votre toile.
  • Rectangle de sélection : cet outil est utilisé pour sélectionner une zone du canevas à copier et coller, la remplir, etc. Il peut également être utilisé pour mesurer. Lorsque votre sélection est terminée, vous pouvez trouver la taille de la zone sélectionnée dans Window/Info. Vous devrez peut-être modifier l'unité par défaut dans Photoshop, Edit/preferences/general/Unit & Rulerspuis définir vos unités en pixels.

B - Outils de recadrage et de découpe

  • Recadrer : Cet outil peut… recadrer une image?. Dans les paramètres de l'outil (barre des options), vous pouvez définir un rapport hauteur / largeur que vous souhaitez conserver.

C - Outils de mesure

  • Pipette : la pipette vous permet d'obtenir rapidement une référence de couleur dans votre conception. Cliquez simplement à l'endroit où vous voulez la couleur. Ensuite, au bas de votre boîte à outils, la couleur de premier plan passera à la couleur sélectionnée. Si vous cliquez sur la couleur de premier plan, cela ouvrira le fichier color picker window. De là, vous pouvez obtenir la valeur de votre couleur.
  • Échantillonneur de couleurs : lors de l'intégration de votre conception, vous devrez peut-être sélectionner plusieurs couleurs. Nous allons à nouveau utiliser la fenêtre d'informations Window/Info. Cet outil nous permet de créer un échantillonneur de couleurs. Cliquez simplement sur la zone de l'image dont vous souhaitez obtenir les couleurs. Vous obtiendrez chaque couleur dans le panneau d'informations. Vous pouvez changer le type de couleur en Web en cliquant sur l'icône Pipette sous le numéro.
  • Règle : vous aide à mesurer votre modèle. Toutes les informations apparaîtront dans votre fenêtre d'informations. Maintenez-le Shiftlors de la mesure pour que votre règle reste droite. Vous pouvez également obtenir des angles.

G - Outil de navigation

  • Main : cet outil vous aide à vous déplacer dans la toile. Vous pouvez accéder à cet outil à tout moment en maintenant la barre d'espace et en la faisant glisser avec votre souris.
  • Zoom : vous permet de zoomer et dézoomer (vous pouvez aussi faire Ctrl+ +, ou Ctrl+ -).

Guides

Comme vous l'avez peut-être remarqué lors de l'ouverture de notre fichier PSD, nous avons des lignes vertes sur notre modèle. Ce sont des guides. Ce sont essentiellement des aides qui vous aideront à construire ou à mesurer des objets autour de votre toile.

Vous pouvez déplacer des guides existants à l'aide de move tool(v).

Pour créer de nouveaux guides, vous devrez ouvrir votre règle: View/Rulerou Ctrl+ R. La règle apparaîtra dans votre espace de travail. Ensuite, à partir de la règle, vous pouvez faire glisser un nouveau guide dans votre canevas.

Pour retirer un guide, utilisez le move tool(v) et replacez le guide dans la règle.

Pour masquer et afficher tous vos guides, vous pouvez simplement utiliser Ctrl+ Hou accéder à View/Extras.

Objets intelligents

Que sont les objets intelligents?

Les objets dynamiques sont des calques contenant des données d'image provenant d'images raster ou vectorielles, telles que des fichiers Photoshop ou Illustrator. Les objets dynamiques conservent le contenu source d'une image avec toutes ses caractéristiques d'origine, ce qui vous permet d'effectuer une modification non destructive du calque. Adobe

Les objets intelligents peuvent être reconnus dans vos calques lorsqu'ils ont l'icône suivante dans leurs vignettes:

Les objets intelligents sont très pratiques si vous travaillez avec des images de type vectoriel (SVG, EPS, AI), mais sont également utiles avec d'autres fichiers raster complexes.

Essayons d'importer un objet intelligent dans notre PSD. Téléchargez un fichier SVG depuis flaticon. Pour importer notre SVG dans notre canevas, faites simplement glisser le fichier dans le canevas. Nous pouvons maintenant éditer notre SVG dans illustrator, ou tout autre logiciel vectoriel, en double-cliquant sur la vignette ou notre objet intelligent. Les changements apparaîtront dans notre PSD.

Les objets intelligents peuvent cependant faire bien plus que cela. Si vous souhaitez en savoir plus à leur sujet, consultez 10 choses à savoir sur les objets dynamiques dans Photoshop.

Exporter les actifs

Tout d'abord, juste un rappel que Photoshop est un logiciel de trame , pas un logiciel vectoriel . Cela signifie que nous ne pouvons pas exporter de fichiers SVG depuis Photoshop. Pour ce faire, vous devrez exporter ces types de fichiers depuis Illustrator ou Inkscape, par exemple.

Sur le Web, nous voulons avoir des fichiers image légers. Pour la photographie, nous utiliserions un .jpgfichier compressé . Si vous avez besoin d'utiliser la transparence (canal Alpha), nous utiliserons le .pngfichier. Pour une image animée, nous utiliserions un fichier .gif. Si vous avez besoin d'une image vectorielle (icônes, par exemple), le mieux est d'exporter votre fichier au format .svg. Si vous souhaitez avoir plus d'informations sur tous les fichiers disponibles dans Photoshop, vous pouvez consulter les "formats de fichiers" sur le site Web d'Adobe.

Exportez notre toile

Pour exporter le canevas, procédez comme suit:

  1. Aller à File/Export/Save for Web
  2. Choisissez le format de fichier
  3. Choisissez la taille de l'image
  4. Choisissez la qualité
  5. sauvegarder

Exporter uniquement un élément du canevas

Vous devrez probablement exporter certains éléments de votre modèle.

Exportons la flèche gauche dans le carrousel de produits:

En utilisant l'outil de déplacement, nous allons trouver notre couche. Faites un clic droit sur la flèche et sélectionnez le calque Arrow Left. Maintenant, faites un clic droit sur ce calque dans le panneau des calques. Sélectionnez export aset sélectionnez le type de fichier dont vous avez besoin.

Nous pouvons également exporter des dossiers.

Actions

Qu'est-ce qu'une action dans Photoshop?

Une action est une série de tâches que vous lisez sur un seul fichier ou un lot de fichiers - commandes de menu, options de panneau, actions d'outils, etc. Par exemple, vous pouvez créer une action qui modifie la taille d'une image, applique un effet à l'image, puis enregistre le fichier au format souhaité. Adobe

Cette fonctionnalité est vraiment pratique si vous souhaitez redimensionner un lot d'images pour le Web!

Créons une nouvelle action pour recadrer une image et exporter celle-ci:

  1. Téléchargez un tas d'images sur //unsplash.com/
  2. Ouvrez une de ces images
  3. Ouvrez le Actionspanneau, Window/Actions,
  4. Créez une nouvelle action en cliquant sur l'icône Créer une nouvelle action (celle à gauche de l'icône de la corbeille). Appelons cette action Exporter pour le nom du client Web.
  5. Nous enregistrons maintenant notre action. Le bouton d'enregistrement sera rouge et vous pouvez arrêter l'enregistrement en cliquant sur l'icône d'arrêt (icône carrée à gauche) /
  6. Sélectionnez l'icône de recadrage et définissez le rapport sur 1x1 et recadrez l'image /
  7. Maintenant, nous voulons exporter notre image ,, File/Export/Save for Websélectionnez JPG, qualité 50% et largeur 500px.
  8. Cliquez sur Enregistrer et choisissez votre dossier de destination.
  9. Fermez votre image sans l'enregistrer.
  10. Pour arrêter l'enregistrement, cliquez sur l'icône d'arrêt (icône carrée à gauche).

Nous avons maintenant notre action, nous pouvons donc ouvrir une image et simplement «jouer» notre action en cliquant sur le bouton de lecture.

Si nous voulons appliquer notre action à un lot d'images, suivez simplement ces étapes:

  1. Aller à File/Automate/Batch
  2. Sélectionnez le Sourcedossier.
  3. Sélectionnez notre action
  4. Cliquer sur Ok

Et voilà! Toutes vos images sont dans le dossier d'exportation.

J'espère que vous avez apprécié cette petite introduction à Photoshop 101 pour les développeurs Web?. Si vous voulez avoir une version 102, dites-moi ce que vous aimeriez savoir ou en savoir plus?.

  • @vince_umo
  • vincent-humeau.com