Créer une interface graphique avec Photoshop.

Présentation au sujet: "Créer une interface graphique avec Photoshop."— Transcription de la présentation:

1 Créer une interface graphique avec Photoshop.
Hervé PIAULT UTC - 08/11/00

2 Principe de conception
Interface = images assemblées Icône Légende Titre en surbrillance La présentation qui suit propose une méthode de création d ’interface parmi tant d ’autres... Titre normal Fond

3 Les choix à faire avant... Il faut avant tout définir un certain nombre de paramètres : Dimensions pixels, multiples de 10. Couleurs et polices couleurs indéxées, polices courantes. Nombre et position exacte des boutons une 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 frames L ’utilisation de frames réduit souvent la complexité des interfaces et des fichiers qui les décrivent.

4 Création du fond Créer le calque fond à partir de : Image en mosaïque
cré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 fixe pour remplir une frame de dimension fixe uniquement (création facile de fonds dégradés à partir des outils Photoshop par exemple). Fond uni Le plus simple et le moins lourd...

5 Création de la première icône
De la première icône dépend la création des suivantes… Un calque indépendant portant 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 ’image ombre, 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, …

6 Création du premier texte
Du premier texte dépend la création des suivants… Un calque texte indépendant portant 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 calque ombre, 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 texte menu, navigation, outils, …

7 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.

8 Démultiplication Mise en page validée:
Modifier le texte de chaque calque texte pensez à changer le nom du calque, ne modifiez plus les autres paramètres Modifier le motif de chaque calque icône

9 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 !