fév
4
2016

Les bases d’adobe Photoshop pour le webdesign

Dans ce tutoriel je vais vous apprendre les bases D’adobe photoshop dans une utilisation dédiée au web design.

Pour commencer ouvrez Photoshop, J’utilise adobe Photoshop CC mais les versions plus ancienne tel que cs5 ou cs6 sont suffisante pour réaliser ce tuto.

Une Fois ouvert vous arrivez sur la page principale de photoshop.1

Pour créer un nouveau projet aller dans Fichier – Nouveau ou utilisez le raccourci Ctrl + n

Une fois arrivé sur cette fenêtre il faut renseigner les différent champs pour paramétrer votre document:2

- Entrez le nom que vous voulez pour votre document ici j’ai choisi Template.

- Dans la liste paramètre prédéfini vous pouvez choisir des réglages  préenregistrer  par adobe pour différent projet tel que le web, mobile, photo, iconographie, choisissez personnalisé

- Entrez maintenant la hauteur et largeur du document ici 1020 x 2040 pixels, vous pouvez choisir de travail en cm, mm ou d’autres format mais pour le web les pixels conviennent mieux.

- Entrez maintenant la résolution, veuillez toujours choisir 72 Pixels/pouce pour les formats web.

- mettez le contenu de l’arrière-plan en blanc.

- Une fois tout les paramètres renseignée cliquer sur OK pour validée et crée votre document.

 

 

Photoshop vas revenir sur l’interface principale mais cet fois votre plan de travail sera creer, vous devriez obtenier ceci.

si la disposition n’est pas comme l’image ci dessous cliquer sur la liste dans la zone encadrée en rouge et choisissez réinitialiser les indispensables.

cet zone permet aussi de choisir des paramètres predefini pour la disposition des onglet par exemple si vous voulez travaillez sur de la 3d, peinture ou retouche photo.

3

Voyons maintenant les Outils qui vont être indispensables pour le web.

4

Certains outils ont plusieurs formes il suffit de faire un clique droit sur l’icone de l’outil pour qu’une fenêtre s’ouvre avec différentes options.

- Sélection : Permet de tracer une zone pour la sélectionner.

- Déplacement : Permet de sélectionner vos différents calques et de les déplacer.

- Recadrage : Permet de recadrer une image.

- Pipette : Permet de sélectionner une couleur.

- Texte : Permet d’écrire et de sélectionner du texte.

- Rectangle : Permet de tracer une forme rectangulaire (plusieurs autres formes sont disponibles).

 

Chaque outils possède une barre de paramètres qui permet de le configurer elle se situe en haut de l’écran.

5

 

Nous allons maintenant créer le header de notre page web pour cela nous allons importer une image mais avant dans l’onglet calque organisons notre projet, créer un nouveau dossier en cliquant sur l’icone en forme de document dans la barre en bas, appeler le header.

6

Maintenant Sélectionner l’outil rectangle et créer un nouveau rectangle de 1020 px par 600 px et placer en haut de votre document comme ceci il nous servira à incorporer notre image.

Astuce : pour déplacer un objet plus précisément maintenez la touche Shift enfoncée lors du déplacement.

7

Maintenant pour importer une image allez dans Fichier ->  Importer et Incorporer ou simplement glisser déposer la dans votre document Placer la au dessus du rectangle que nous venons de créer

et redimensionner la si il le faut avec le raccourci CTRL + ALT + T

Dans le panneau calque placer votre curseur comme indiqué par la flèche rouge maintenez Alt et cliquer l’image devrait s’incruster dans le rectangle que l’on vient de créer cela est utile car si on a besoin de redimensionner l’image elle ne bougera pas de position .

9

8

 

10

Maintenant faisons quelque ajustement sur l’image pour cela double cliquer sur elle  dans l’onglet calque cela devrait vous ouvrir cette fenêtre, elle sert a appliquer différent style sur l’image tel que changer la couleur ajouter une ombres portée sans avoir a modifier la photo original si un effet ne vous plait plus vous aurez  juste a le décocher dans la barre de gauche :

11

Paramétrer la comme ceci :

12

13

Votre image devrait maintenant ressembler à ceci :

14

 

 

Nous allons maintenant utiliser l’outils texte mais avant nous allons placer des repères pour nous guider pour cela Aller dans Affichage -> Nouveau repère.

15

Créer des  repère verticale à 40, 510 et 980 et des repère horizontale a 40 et 320.

Je recommande aussi  http://guideguide.me/  un plugin a télécharger  pour Photoshop qui permet de placer des repère  plus efficacement.

19

Sélectionner maintenant l’outil texte et choisissez une police vous pouvez utilisez la police que vous voulez mais je conseil d’en télécharger une sur www.google.com/fonts ce sont des polices adaptée au web qui sont plus faciles a intégrer cela évite de surcharger le site en chargeant trop de polices fantaisistes.

Pour ma part j’ai choisi du Lato black 36 px et regular 16 px.

16

Si vous voulez régler  plus de paramètres aller dans l’onglet

Fenêtres  -> caractères

17

Positionner votre Texte avec l’aide des repères que l’on vient de créer comme ceci :

18

Voila maintenant vous connaissez comment utilisez les principaux outils de Photoshop pour le web design il ne vous reste plus qu’a rajouter  des images,  texte, icones pour rendre votre page web plus attractive comme on vient de l’apprendre.

Pour ma part voila le résultata final après  avoir importé quelque image, icones,  rajouter du texte et changer la couleur de fond :

final

Je recommande aussi  l’utilisation de plusieurs plugin qui permette de travailler plus vite :

- CSS3Ps :  Exporte vos calque Photoshop en Css3

20

-  Adobe Color CC : Bibliothèque de nuance

21

- Cut & Slice me : Pour exporter vos templates sur différentes plateformes (Ios ,  Android , etc ..)

22

 

A propos de l'auteur: Florian Fevrier

Les commentaires ne sont plus accessibles.