Infographiste Web
Transcription
Infographiste Web
créATION Objectif & réAlIsATION de PrOJeTs 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. 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 et 2 . 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 . 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 . 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 création d’un formulaire créATION jquerY & réAlIsATION de PrOJeTs . 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 . 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 Le MOtiON DesiGN et L'aNiMatiON POur Le Web fLasH . 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 ecg-formation.com création de symboles et de boutons créATION & réAlIsATION de PrOJeTs 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 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 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 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 ecg-formation.com . 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 créATION La publication & réAlIsATION de PrOJeTs . 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 ecg-formation.com PrOjet fiNaL . Réalisation et mise en ligne d’un site