Design Web avec Photoshop et Illustrator

À qui s'adresse la formation?

Graphistes

Durée

5,00 jour(s)

Langues(s) de prestation

EN FR

Prochaine session

Contacter l'organisme

Prérequis

Aisance avec l'outil informatique. Connaître un logiciel de traitement d'images, d'illustration vectorielle serait un plus

Objectifs

Comprendre et maîtriser les spécificités de la publication sur le Web (formats, interactivité, etc.). Concevoir et réaliser l'interface des pages d'un site Web. Élaboration de la charte graphique, appropriation des fondamentaux de la présentation sur écran, ergonomie des sites et principes de navigation.

Contenu

Fondamentaux de la publication sur le Web et de l'interactivité

Introduction
Historique
Présentation du Web
Les formats
Les tailles d'écran
Les espaces colorimétriques: RVB et hexadécimal
Les différents formats de fichiers images
L'optimisation
L'interactivité
Les spécificités (non-linéarité de la publication Web)
Les liens hypertexte
Les différentes formes de sites Web: site statiques et site dynamiques

Présentation des logiciels de la suite Adobe

Photoshop: présentation
L'interface et l'espace de travail
Création de nouveaux documents: le paramétrage
Les outils et les méthodes de sélectionL'organisation des calques
Le photomontage
Illustrator: présentation
L'interface et l''espace de travail
Création de nouveaux documents: le paramétrage
Le vectoriel
Les calques et les sous-calques
Les masques d'écrêtage
Dreamweaver
L'interface et l'espace de travail
Création de nouveaux documents: le paramétrage
Le HTML: structure du document
Les liens hypertextes
La mise en forme
Présentation de Bridge
Présentation d'outils en ligne
Conception
Production
Analyse
Ressources

La conception graphique

La charte graphique: l'identité visuelle
Ce qui est autorisé, ce qui est défendu
Dimension, "zoning"
Définir les couleurs: titres, sous-titres, texte de lecture, liens hypertexte, boutons des menus, encadrés, etc.
Les styles des polices de caractères
Organiser son interface
Définition du fond d'écran et du fond de page
Définir les espaces (contenu, menus, bandeaux publicitaires, etc.)
Définir les différents niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
Organiser son travail
Créer des bibliothèques de styles
Créer des bibliothèques d'objets
Exporter ses nuanciers
Exporter ses styles

Réalisation: la page d'accueil

La présentation
Définition du fond d'écran et du fond de page
Définir les espaces (contenu, menus, bandeaux publicitaires, etc.)
Définir les différents niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
Création d'une page d'accueil
Définir une grille de positionnement des différents éléments
Définir les emplacements et la mise en forme du contenu (texte, images, vidéos, etc.)
Prise en compte de l'ergonomie

Atelier pratique: création de l'interface d'une page d'accueil

Réalisation: les rubriques

Création des pages de rubriques
Déclinaison de la charte graphique dans les pages intérieures
Organisation du contenu texte-images
Positionnement des barres et boutons des menus
Atelier pratique: création de l'interface de pages intérieures
Enrichissement graphiques
Les fondsLes dégradés des bordsEn-tête, pieds de pages
Les vignettes

Atelier pratique: création de l'interface de pages intérieures

Exportation des documents graphiques

Exportation en html
Les outils tranche de Photoshop et de Illustrator
Les zones actives d'une image
Exportation d'un document au format html
Exportation de l'interface pour l'intégration html
Création des repères de zonesDécoupage de l'interface
Optimisation des images
Les formats d'image: JPG, GIF, PNGL'animation: GIF, Flash, CSS3

Atelier pratique: création de l'interface d'une page Web dans un document html

Finalisation de l'interface: l'intégration HTML

L'éditeur Web
Insertion des éléments dans une page html
Gestion des liens hypertexte
Insertion et gestion des menus et barres des menus (boutons, onglets, etc.)
L'optimisation des pages
Optimisation des images
Les transparences
Les dégradés

Atelier pratique: création d'un petit site Web comportant plusieurs rubriques

Conclusion

De l'idée initiale à la réalisation finale
Bilan de la réalisation: contraintes, potentiel et spécificités
La promotion
Le référencement
Faire vivre son site