La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "Créer une interface graphique avec Photoshop. Hervé PIAULT UTC - 08/11/00."— 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 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...

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 licône et son état sil 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 sil en existe plusieurs (cliqué, survolé, enfoncé, …). Créé à partir de loutil 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 à laide 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 pensez à changer le nom du calque, ne modifiez plus les autres paramètres

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 licô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 sil 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 !


Télécharger ppt "Créer une interface graphique avec Photoshop. Hervé PIAULT UTC - 08/11/00."

Présentations similaires


Annonces Google