Créer une interface graphique avec Photoshop.

Hervé PIAULTUTC - 08/11/00

Principe de conceptionInterface = images assemblées

Titre en surbrillance

Titre normal

Fond

Légende

Icône

La présentation qui suit propose une méthode de création d ’interface parmi tant d ’autres...

Les choix à faire avant...

Il faut avant tout définir un certain nombre de paramètres :

Dimensionspixels, multiples de 10.

Couleurs et policescouleurs indéxées, polices courantes.

Nombre et position exacte des boutonsune maquette papier est la bienvenue !

Types de rendu (roll-over, …)la vitalité d ’un bouton ou d ’un lien facilite la navigation (sans pour autant perdre de

sa sobriété…)

Frames or not framesL ’utilisation de frames réduit souvent la complexité des interfaces et des fichiers qui

les décrivent.

Création du fond

Créer le calque fond à partir de :

Image en mosaïquecréez un calque fond présentant le même résultat que le html en utilisant les motifs de

Photoshop (menu Édition - utiliser comme motif / Édition - remplir).

Image unique de taille fixepour remplir une frame de dimension fixe uniquement (création facile de fonds

dégradés à partir des outils Photoshop par exemple).

Fond uniLe plus simple et le moins lourd...

Création de la première icône

De la première icône dépend la création des suivantes…

Un calque indépendantportant le nom de l’icône et son état s’il en existe plusieurs (cliqué, survolé, enfoncé,

…).

Image créée ou récupérée en accord avec les choix faits au départ (taille, couleurs, style, …), des logiciels

comme Xtrem3D permettent de créer ces éléments.

Appliquer les effets au calque et pas à l ’imageombre, biseautage, lueur, … pour faciliter la création des autres icônes.

Répéter l ’opération pour chaque groupe d ’icônes menu, navigation, outils, …

Création du premier texte

Du premier texte dépend la création des suivants…

Un calque texte indépendantportant le nom du texte et son état s’il en existe plusieurs (cliqué, survolé, enfoncé,

…).

Créé à partir de l’outil texte en accord avec les choix faits au départ (taille, couleur, police, …)

Appliquer les effets au calqueombre, biseautage, lueur, … pour faciliter la création des autres textes. Ne

convertissez pas en image (rendu)!

Répéter l ’opération pour chaque groupe de textemenu, navigation, outils, …

Organisation de la page

Mise en page à partir des premiers éléments

Dupliquer chaque élément modèle en autant de fois qu ’il sera présent sur votre interface

Disposer à l’aide des repères magnétiques et de la grille (menu affichage), privilégier les dimensions en pixels et en multiples de 10 (fenêtre info).

Valider les dimensions et positions définis au départ et modifiez les si nécessaire avant d ’aller plus loin.

Démultiplication

Mise en page validée:

Modifier le texte de chaque calque textepensez à changer le nom du calque, ne modifiez plus les autres paramètres

Modifier le motif de chaque calque icônepensez à changer le nom du calque, ne modifiez plus les autres paramètres

Création des images définitives

Si le fond est uni:

Créer un nouveau fichier dont la couleur du fond correspond à celle de votre interface, et dont les dimensions en pixels sont faciles à manipuler (multiple de 10…)

Créer des repères pour positionner l’icônes ou le texte

Glissez-y le calque contenant l ’élément adéquat.

Enregistrer le tout en copie au format jpg, environ 5Ko maximum pour une icône ou un texte. Enregistrez en gif s’il y a de la transparence (résultat aléatoire…)

Sinon:

Sélectionner et copier le fond derrière l’élément à traiter

reprendre la même démarche que pour un fond uni, en collant en fond la portion précédemment découpée aux bonnes dimensions.

La manœuvre est délicate et la reconstitution doit être faite avec soin !