Mise en page 1 - Ecole en Communication Graphique (ECG)

WEBDESIGNER l’intégration
Objectif
Apprentissage des outils de création, de mise en page, d’animation et d’intégration de
supports de communication multimédia (HTML5 / CSS / DREAMWEAVER /
JQUERY / FIREWORKS / FLASH / EDGE ANIMATE...).
Niveau requis
Bac + 2 / expérience professionnelle dans les métiers de la communication ou de la
création, maîtrise des logiciels de création graphique Photoshop et Illustrator.
MetHODes
Apports théoriques.
Démonstrations.
Expérimentations.
PubLic vise
Toute personne en charge de la réalisation de supports de communication
multimédia...
fOrMateurs
Nos cours sont dispensés par des professionnels (concepteurs-rédacteurs,
graphistes, directeurs artistiques, artistes peintres, informaticiens, Webdesigners, Infographistes...) qui exercent dans la communication, le design
graphique, la publicité, la presse, l’édition et le multimédia.
équiPeMeNt et MatérieL
Nos salles informatiques sont pourvues de Macintosh et PC.
Chaque candidat travaille sur un poste équipé des dernières versions
des logiciels ILLUSTRATOR, PHOTOSHOP, INDESIGN, FLASH,
DREAMWEAVER... et d’une connexion internet haut débit.
iNitiatiON au LaNGaGe HtML5 avec éditeur de texte
. La page de base
. Les balises principales
. Organisation des noms de fichiers, répertoires
. Insertion de contenu
. Principe des CSS
. Mise en page d’une page html avec un CSS
. Différentes propriétés des CSS
DreaMWeaver
. Présentation de l’espace de travail
Gestion de site
. Définition d’un site
. Arborescence
insertion de contenu
. Boîtes
. Listes, listes imbriquées
. Liens externes, internes, ancrés
. Images, images survolées, cartes graphiques
. Objet flash
. Balises audio - vidéo
vérification dans les navigateurs
ecg-formation.com
iNitiatiON au LaNGaGe css 1, 2 et 3
WEBDESIGNER l’intégration
Mise en forme avec les feuilles de style
. CSS pour les positionnements (flottants, absolus, relatifs)
. CSS pour la mise en forme du texte (typo, couleurs...)
. CSS pour les arriere-plans, marges...
utilisation de la bibliothèque
création d’un formulaire
. champs de texte, boutons radio, listes/menus, zones de texte, cases à cocher
. mise en forme avec les css
. envoi des formulaires en php
. validation des formulaires avec les spry
Les tableaux de données
. Création et modification des tableaux de données
Mise en ligne du site
. Paramétrage des préférences pour les sites FTP
NeWsLetter
. Intégration + test d’envoi
iNitiatiON fireWOrKs
. Découverte du logiciel
. Création d’une maquette
. Découpes et optimisation des images
. Intégration en html/css
jquerY
. Introduction au framework jquery
. Téléchargement de la bibliothèque jquery
. Découverte de la syntaxe, les sélecteurs
. Exercices d’application
. Comment utiliser les plugs-ins jquery sur le web.
WebDesiGN
. Faire découvrir l’univers du webdesign
avec ses spécificités à des graphistes édition
de communication globale
Print et web, complémentarité et spécificité
. Repérer les différences et similitudes entre le print et le web
. Comment les 2 supports peuvent-ils coexiter?
etats des lieux du webdesign
. Les sites référents de la communication interactive
. Actualité graphique et technologique du design interactif
. Typologie des supports (e-commerce, corporate, évènementiel, réseaux sociaux...)
. Analyse comparative de supports presse et web
exercices pratiques
. Relooking d’un site
. Refonte de l’arborescence du site
. Création du zoning et du wireframe de la page d’accueil
. Comment réaliser un graphisme au service du contenu
. Création d’un moodboard
. Réalisation graphique de la page d’accueil
. Préparation des fichiers pour l’intégrateur
ecg-formation.com
. Montrer la valeur ajoutée du web dans un projet
WEBDESIGNER l’animation
Le MOtiON DesiGN et L'aNiMatiON POur Le Web
fLasH
création de symboles et de boutons
. Création de la scène
. Dessin et illustration : utilisation des outils de bases
. Création d’un symbole
. Création d’un clip
. Création d’un simple bouton
. Adaptation d’un bouton de menu déroulant
. Les couleurs utilisées pour le Web
. étude de la fenêtre propriété
. éditer un nom d'occurrence et de variable
. Création de la bibliothèque
. Texte, statique, de saisie, dynamique
. Interpolation de mouvement
animation
. Insertion de couches supplémentaires
. Modifications d’images-clés
. Animation de la position d’une forme
. Utilisation de l’outil texte
. Utilisation de la commande “aligner”
. Conversion de formes en symboles
. Modification des symboles
. Utilisation de la zone de travail
création d’effets spéciaux
. Animation de l’échelle d’une forme
. Création de trajectoires de déplacement
. Copie d’une scène
. Substitution d’un symbole à un autre
. Séparation du texte et des symboles
. Utilisation des interpolations et des repères de formes
. Création d’effets de transparence
. Ajout d’un effet de couche alpha à un bitmap
. Utilisation des outils de dessin
. Utilisation de l’échelle temporelle
Production finale
. Insertion de scènes
. Règlage des transitions entre scènes
. Optimisation de l’animation
. Ajout d’une action Play
. Ajout d’une action Get URL
. Ajout d’une action Load Movie
. Test d’une scène
initiation à actionscript
. En mode normal
. En mode expert
ecg-formation.com
utilisation des comportements de symboles
WEBDESIGNER l’animation
aDObe eDGe aNiMate
Créer des animations compatibles avec les périphériques
nomades (Tablettes et Smartphones)
téléchargement et installation de edge animate
. Le cloud d'Adobe
. L'extension manager
. Installer Edge Animate
Découverte de l'interface
. Similitudes et différences avec l'API Flash
. Le modèle HTML (DOM et Balises)
. La Timeline
. La Scène
. Les propriétés
. La prévisualisation
L'animation
. Gestion des images clés
. Les transitions
. Le verrouillage
. Les accélérations
. Inverser une animation
. Importer une séquence d'images PNG
. Copier-coller des transitions
. Le nesting ou l'imbrication de mouvement
. TP : animer une page web statique
L'interactivité
. Les déclencheurs
. Le panneau Action
. Créer un bouton et le programmer
. Boucler une animation
. Arrêter une animation
. Travailler avec des clips
. Créer un lien vers une page web
. TP : Créer un diaporama interactif
. Les paramètres de publication
. Créer un preloader
. Intégration d'animation dans une page web
. Structure et fichiers d'un projet « Edge animate»
. TP : animer un logo et l'intégrer dans une page web déjà existante
utilisation des ressources
. Tutoriels sur le site d'Adobe
. Références bibliographiques et multimédias
PrOjet fiNaL
. Réalisation et mise en ligne d’un site
écolE EN commuNIcatIoN GRaphIquE
32, rue Alphonse Helbronner - 93400 Saint Ouen
tél.: 01 40 11 99 02 e-mail : [email protected]
315 H
ecg-formation.com
La publication