Éditer les images sur Photoshop et les exporter pour le web

Après avoir téléchargé une image sur la plateforme que vous avez choisie puis rangée sur votre ordinateur, ouvrez Photoshop puis cliquez sur "fichier" puis "ouvrir" ou raccourci (ctrl+o).

Allez chercher votre photo dans le dossier où vous l'avez préalablement rangée, puis ouvrez. 

En allant dans "Fichier" -> "Nouveau" (ctrl+N), vous atterrirez sur l'interface similaire à l'image ci-dessus. C'est ici, que vous allez pouvoir définir la taille appropriée à ce que vous désirez pour votre contenu web, la résolution et le nom de votre image. Dans cet exemple, les dimensions sont celles que j'utilise pour l'image de mise en avant des articles de blog, soit 830*413 pixels. Vous remarquerez que la résolution est à 72 ; Et j'aurais très bien pu le nommer "gabarit-premiere-image-blog". Nous verrons la notion de "naming" plus tard dans cette formation. 

Retournez sur l'onglet de votre image grand format, puis cliquez sur "édition" puis "copier" ou ctrl+a pour tout sélectionner et ctrl+c pour copier.  Puis retourner sur l'onglet de votre gabarit préétabli pour coller votre sélection avec "édition" puis "coller" ou ctrl+v.

Une fois l'image collée, nous nous rendons compte tout de suite que l'image est bien plus grande que le gabarit prévu. C'est tant mieux, car il vaut mieux rétrécir une photo, que de l'agrandir pour assurer sa qualité.

Pour adapter l'image au gabarit, cliquez sur "édition" puis "transformation manuelle" (ctrl+t) ; vous verrez apparaître un cadre ; avant de le manipuler pour adapter l'image au bon format, appuyez sur la touche "Maj", celle-ci vous permettra de ne pas déformer l'image.

Ensuite, à l'aide de votre souris et des angles du cadre de transformation, glissez et centrez la photo pour qu'elle s'adapte au mieux à votre gabarit.

Une fois, votre photo bien cadrée, cliquez sur "fichier" -> "Exportation" -> "enregistrer pour le web" (alt+maj+ctrl+s) vous atterrirez sur l'image ci-dessus où vous pourrez vous assurez que votre extension est bien "JPEG" pour une image sans transparence. Et PNG si celle-ci contient de la transparence. La qualité doit être réglée à 60. Enregistrez. 

Placez des mots-clés en rapport avec votre image ; séparez vos mots avec des tirets (-), ne mettez pas d'accent, de majuscule ou de caractères spéciaux et faites en sorte que cela reste court. Exemple ci-dessus : decoration-vegetale-maison ; puis rangez correctement vos fichiers pour les retrouver facilement lors de vos intégrations en Back-Office. 

Cliquez sur l'outil de recadrage (c), puis à l'aide des gros tirets, recadrez à votre convenance.

Utilisez l'outil "texte" disponible dans la barre d'outils à gauche ou tout (T), puis cliquez à l'endroit où vous souhaitez éditer votre texte. Tapez votre texte. 

La barre d'outils texte se trouve en haut, dans cette zone, vous trouvez le style de typographie que vous souhaitez, c'est-à-dire le style graphique de l'écriture ; vous pourrez également choisir la taille, la couleur et la mise en place du texte (à gauche, centré ou à droite). En cliquant sur l'Icon tout à droite comme illustré sur la photo, vous aurez la possibilité de gérer l'espace entre vos mots ou vos phrases. 

Si vous ne trouvez pas la typographie qu'il vous convient, alors en cliquant sur l'Icon encadré en rouge, vous atterriez sur Adore Font. Vous trouverez une multitude de typographie et pourrez les intégrer à votre banque en activant celles que vous souhaitez. 

Cliquez une fois sur le calque que vous souhaitez déplacer, puis sélectionnez l'outil "déplacement" ou (V) ; enfin à l'aide de votre souris ou flèche du clavier pour plus de précision, placez votre texte où vous le souhaitez.

À l'aide de votre clavier, utilisez la touche ctrl+ pour zoomer ; ctrl- pour dézoomer. Vous pouvez également cliquer sur alt et avancer et reculer simultanément avec la molette de votre souris. 

Pour voir votre illustration sur fond noir ou gris et sans menu, tapez plusieurs fois sur la touche "F", ensuite pour déplacer l'image intégralement, cliquez sur l'outil "main" (H) ou bien utilisez la barre d'espace de votre clavier le temps de la manipulation. 

Grâce à l'outil "pipette", vous pouvez cliquer n'importe où dans votre image afin de récupérer la couleur de votre choix. Dans cet exemple, je suis allée chercher une teinte sur le canapé, pour utiliser celle-ci pour mon texte. 

Dans cette illustration, j'ai utilisé l'outil "Forme" rectangle pour faire un fond de texte afin de rendre visible mon texte. Pour que celui-ci reste visible, j'ai placé mon calque forme sous mon texte, puis j'ai sélectionné une couleur blanche ; enfin, j'ai réglé l'opacité de mon rectangle grâce au petit curseur disponible en cliquant sur "opacité" disponible au-dessus de la partie des calques. 

Sur cette image, j'ai voulu peindre mon arrière-plan en kaki, j'ai donc utilisé l'outil "pot de peinture" ou (G), après avoir sélectionné ma couleur grâce au petit carré du haut de définition de couleur. Pour ce faire, assurez-vous que votre calque d'arrière plan soit déverrouillé en cliquant sur le cadenas du calque, puis après avoir cliqué sur "l'outil pot de peinture", cliqué une fois directement sur l'image à l'endroit ou vous souhaitez peindre. Vous pouvez réaliser cette manipulation sur des formes à partir du moment ou vous avez sélectionné le bon calque.