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

INFOGRAPHISTE mulTImEdIA
Objectif
Maîtriser parfaitement l'utilisation des outils de création et réalisation de support
de communication multimédia : communication, édition, presse, publicité,
multimédia...
A l'issue de ce parcours les stagiaires seront capable de :
- exécuter un projet
- finaliser une maquette
- gérer la mise en page dans toutes ses applications professionnelles
PRINT ET WEB
- maîtriser la chaîne informatique appliquée à l'image et au graphisme pour
le PRINT et le WEB
- préparer les fichiers pour l'imprimeur ou l'intégrateur
- assurer le suivi de fabrication jusqu'à la réalisation finale du produit (flashage et
impression pour le print, intégration pour le web)
Niveau requis
Bac ou Bac pro / expérience professionnelle dans les métiers de la communication
ou la création.
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.
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.
iNDesiGN
. L’interface Adobe : menu, palette, outils...
. Principe de mise en page : gestion des blocs texte et images, traits
. Gestion des fonctions typographiques : attributs de caractère, paragraphes
. Utilisation des différentes fonctions de la palette contrôle
. Les règles, les repères
. Gestion, création des couleurs selon les différents objectifs de travail :
Web, print, RBV, CMJN, Pantone, couleurs d’accompagnement...
. Importer des images, traitement dans Indesign et préparation
. Gestion avancée des fonctions typographiques : césures, justification...
. Maîtrise des styles de paragraphe et des styles de caractère
. Création, gestion d’un magazine : pages, gabarits, pagination...
. Gestion des polices
. Préparation des fichiers pour l’imprimeur : assemblage, images, polices...
. Création, gestion du document en PDF
. Le texte vectorisé
. Le texte curviligne
ecg-formation.com
équiPeMeNt et MatérieL
INFOGRAPHISTE mulTImEdIA
. La gestion des calques
. Les tableaux : enrichissement de tableau, cellules, style de tableaux...
. Les styles d’objet
. Les outils de transformation
PHOtOsHOP
. L’interface Adobe : menu, palette, outils...
. Outils : sélection, retouche, dessin... et formes d’outils
. Couches, améliorer le contour, contour progressif...
. Retouches et réglages de photos en niveau de gris : niveaux, courbes...
. Couleurs : modes, gestion, création, utilisation...
. Historique
. Outils texte
. Tracés : outils, formes, détourage, masque
. Gestion et création des calques : transparences, masques de fusion, style
et effets de calque, calques de réglage, calques texte...
. Réglages d’image couleur : teinte/saturation, balance des couleurs...
. Les repères, la grille
. Traitement d’image, résolution, taille d’image
. Retouche et transformation de photos numérisées en couleur
. Colorisation d’image, les différents modes, la bichromie...
. Scripts et traitement par lots
. Les outils et calques vectoriels
. Les différents formats d’enregistrement
. Présentation et utilisation des filtres
. Les outils 3D
. Les préférences
. L’interface Adobe : menu, palette, outils...
. Les outils vectoriels (tracés rectilignes, curvilignes, courbes de Béziers...)
. Formes : jointes, pathfinder...
. Les attributs de couleur
. Outils de transformation
. Utilisation des règles, des repères, de la grille.
. Les différents outils texte : classique, captif, curviligne.
. Texte vectorisé et enrichissement typographique
. Gestion de la palette des calques
. Gestion et création des couleurs : RVB, CMJN, nuanciers, transparence ...
. Les différents dégradés : de couleurs, de formes, de filets.
. Les masques d’écrêtage.
. La vectorisation dynamique
. Les graphiques (barres, linéaires, secteurs et ombrés).
. Palette symboles, formes, styles graphiques...
. Gestion de la palette aspect.
. Les différents modes de dessin : normal, arrière, intérieur.
. La peinture dynamique.
. Les grilles de perspective.
. Scripts
. Le menu effets.
travaux Pratiques
. Exécution de projets graphiques.
ecg-formation.com
iLLustratOr
INFOGRAPHISTE mulTImEdIA 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...).
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
iNitiatiON au LaNGaGe css 1, 2 et 3
. 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
Mise en forme avec les feuilles de style
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
ecg-formation.com
. CSS pour les positionnements (flottants, absolus, relatifs)
. CSS pour la mise en forme du texte (typo, couleurs...)
. CSS pour les arriere-plans, marges...
INFOGRAPHISTE mulTImEdIA l’intégration
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
. Montrer la valeur ajoutée du web dans un projet
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
ecg-formation.com
. 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
INFOGRAPHISTE mulTImEdIA 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
utilisation des comportements de symboles
. 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
. 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
INFOGRAPHISTE mulTImEdIA 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é
La publication
. 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]
600 H
ecg-formation.com
. 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