Créer un kit graphique avec Photoshop 7 [25 mn de lecture - paru le 5/9/2004 11:21:26 AM - Public : Débutant]

Auteur

Alexandre MORIN Elève-Ingénieur Supinfo Paris Promotion SUPINFO 2008    Lui écrire    Tous les projets de cet auteur    Le mini-CV de cet auteur

1. Réalisation du design

1.1. Création d'un nouveau document

Pour commencer notre travail, il faut tout d'abord ouvrir Photoshop et
commencer une nouvelle création en cliquant sur Fichier puis Nouveau.
Lorsque la boîte de dialogue apparaît, définissez la taille du document avec une
largeur de 790 pixels et une hauteur de 800 pixels.
Validez, le nouveau document est alors créé, nous pouvons donc commencer.

Ce premier calque va nous servir de fond, mais dans un premier temps, nous
allons le renommer pour pouvoir, plus tard, y voir un peu plus clair.
Il suffit de cliquer avec le bouton droit de la souris sur le nom présent du calque
puis sur propriété de calque et enfin, changer son nom.
Le fait de renommer les différents calques est très utile afin de mieux se
retrouver dans sa création. Surtout en cas de création complexe qui contient
beaucoup de calques.
Ensuite, on remplit ce calque fond avec du blanc, pour cela, sélectionnez l'outil
« pot de peinture » dans la boîte d'outils sur la gauche, puis sélectionnez la
couleur blanche, et enfin remplissez le document en cliquant dessus.
Voilà, le fond du document est créé et nous n'interviendrons plus dessus.

1.2. La bannière

Afin de faciliter notre réalisation, nous allons créer notre propre style, c’est un
ensemble d’éléments de personnalisation que l’on peut appliquer sur n’importe
quelle forme, et, étant sauvegardé dans la palette de style de Photoshop, peut
être réutilisé autant de fois qu’il est nécessaire. Mais avant cela, nous allons
créer la première forme de la bannière.

Pour cela, nous allons créer un nouveau calque que l’on peut nommer « forme
header », c’est sur ce calque que nous allons créer toute la bannière du site, pour
cela on sélectionne une couleur (le gris clair #EFEFEF) puis, grâce à l’outil de
sélection rectangulaire, on trace un rectangle qui représente la taille de la
bannière du site.

Ensuite, on utilise l’outil pot de peinture afin de remplir cette sélection avec la
couleur choisie précédemment. C’est à ce moment que l’on va créer notre style,
en premier, on va créer les couleurs du dégradé (gris clair #EFEFEF pour
l’arrière plan et un gris un peu plus foncé pour le premier plan #ACB0B8). Puis
nous allons modifier les effets de style du calque en faisant un clic droit sur
celui-ci puis dans le menu sur « options de fusion ».

1.3. Création du style

Dans la boîte de dialogue des effets de calque, nous allons ajouter un dégradé.
Pour cela, nous cochons la case située à côté de « Incrustation en dégradé », puis
on clique dessus pour avoir les paramètres du dégradé. Nous allons définir le
dégradé, il suffit pour cela de choisir le premier de la liste de sélection qui va
correspondre à la couleur que l’on a définie.

Ensuite, afin de bien faire ressortir les limites de la bannière, nous allons ajouter
un contour noir. Pour cela, nous cochons la case « contour » puis nous
changeons ses paramètres avec un contour noir de 1 pixel.

Il est maintenant temps d’enregistrer notre style afin de pouvoir le réutiliser
ultérieurement. Pour cela, cliquez sur « nouveau style », puis rentrez le nom de
votre style, et enfin validez.
Vous pouvez fermer la boîte des effets de calque en cliquant sur OK, votre style
est maintenant ajouté à la palette de style et pourra être appliqué à n’importe
quelle forme simplement en le sélectionnant.

1.4. Menu de la bannière

Nous allons créer le menu horizontal de la bannière. Nous allons donc dupliquer
le calque précédent et le renommer en « header élément 1 ». Il est nécessaire
pour sa visibilité que ce dernier calque soit au-dessus du précédent dans la
palette de calque. Puis faites ctrl + T afin de pouvoir redimensionner le calque,
puis réduisez sa hauteur pour obtenir une bande de la taille du menu horizontal.

Nous allons maintenant ajouter une photo à cette bannière. Pour cela, ouvrez une
photo de votre choix, puis placez-la sur un nouveau calque. Renommer le calque
en « photo ». Puis placez la photo sur la bannière, en la redimensionnant si
nécessaire (ctrl+T pour la redimensionner puis gardez la touche shift enfoncée
pour garder les proportions de la photo), faites en sorte qu’elle rentre bien dans
la bannière.

1.5. Retouche de la photo

Tout d’abord, on déplace le calque photo entre forme header et forme élément 1
pour ne pas que la photo dépasse sur le menu, puis nous allons lui ajouter un
dégradé. Pour cela, nous allons ajouter un masque en cliquant sur « ajouter un
masque vectoriel » en bas de la palette de calque. Cliquez sur le carré blanc qui
vient d’apparaître puis, grâce à l’outil de dégradé, faites en un sur la photo de la
gauche vers la droite ce qui à pour effet d’estomper la photo.

1.6. Menu de gauche

Pour réaliser le menu sur la gauche, nous allons utiliser les mêmes étapes que
pour la bannière. En premier, nous allons faire une sélection rectangulaire pour
délimiter le menu, puis on la remplit avec le pot de peinture, et enfin, nous
allons appliquer notre style précédemment défini à la sélection.

Puis comme pour le menu horizontal, nous allons créer une zone de titre à ce
menu. Pour cela, dupliquez le calque du menu gauche, placez-le au-dessus de ce
dernier puis réduisez sa taille pour avoir une barre de titre en haut de la zone du
menu.

1.7. Organisation

Le nombre de calques commençant à être important, il est utile de les
réorganiser pour que cela soit plus clair. Pour cela, utilisez le bouton en forme
de fichier en dessous de la palette de calque, elle va nous permettre de
réorganiser les différents calques dans des dossiers. Vous pouvez donc créer
deux dossiers, un pour toute la partie bannière, et un second pour toute la partie
menu. Une fois créés, regroupez les calques dans les dossiers s’y référant.

Ces dossiers vont fonctionner comme les calques, ainsi nous allons pouvoir
dupliquer le dossier « menu » afin de réaliser plus rapidement la zone de
contenu du site. Une fois dupliqué, avec l’outil de déplacement, décalez ce
dernier calque vers la droite.

1.8. Découpage du design

Une fois le calque dupliqué et déplacé, il ne nous reste plus qu’à le
redimensionner pour qu’il puisse contenir tout le corps du site, pour cela,
sélectionnez le dossier puis faites ctrl+T pour pouvoir l’agrandir.

Voilà, le design général du site est terminé, il ne nous reste plus qu’à le mettre
en forme pour le web.