Programme de Formation Design Web avec Photoshop et Illustrator
Fondamentaux de la publication sur le Web et de l'interactivité
IntroductionHistorique
Présentation du Web
Les formatsLes 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ésentationL'interface et l'espace de travail
Création de nouveaux documents : le paramétrage
Les outils et les méthodes de sélection
L'organisation des calques
Le photomontage
Illustrator : présentationL'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
DreamweaverL'interface et l''espace de travail
Création de nouveaux documents : le paramétrage
le HTML : structure du dodument
Les liens hypertextes
La mise en forme
Présentation de BridgePrésentation d'outils en ligneConception
Production
Analyse
Ressources
Conception fonctionnelle d'un site Web
La préparation du projetRédaction du projet sous forme d’une note d'intention
Rédaction du cahier des charges
Définition
Les différents types de sites WebLes sites vitrines
Le Portfolio
Les sites de e-commerce
Les sites communautaires
Les blogs
Les sites événementiels
Les différentes formes de sites WebLes sites statiques
Les sites dynamiques
Les CMS
Les niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
L'arborescence du siteOrganisation des rubriques
Cinématique des pages
Ergonomie
Les principes de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)
La conception graphique
La charte graphique : l'identité visuelleCe 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 interfaceDé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 travailCré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ésentationDé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'accueilDé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 rubriquesDé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 graphiquesLes fonds
Les dégradés des bords
En-tête, pieds de pages
Les vignettes
Atelier pratique : création de l'interface de pages intérieures
Exportation des documents graphiques
Exportation en htmlLes 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 htmlCréation des repères de zones
Découpage de l'interface
Optimisation des imagesLes formats d'image : JPG, GIF, PNG
L'animation : GIF, Flash, CSS 3
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 WebInsertion 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 pagesOptimisation 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 finaleBilan de la réalisation : contraintes, potentiel et spécificités
La promotion
Le référencement
Faire vivre son site