Création de Site Web avec Photoshop, Fireworks
Transcription
Création de Site Web avec Photoshop, Fireworks
Création de Site Web avec Photoshop, Fireworks, Dreamweaver, Flash 7 jours Public : Toute personne souhaitant concevoir un site Internet dynamique. Prés-requis : Maîtrise de Windows, d’un logiciel graphique. Objectifs : Concevoir un site Web Pro, gérer les différentes pages interactives en insérant des images, des animations Flash, des programmes Javascript, des objets Multimédias Publier son site et le modifier. Présentation de la formation Exercices avec les différents logiciels d’imagerie et d’animation. Créer un site de chambres d’hôtes existante Préparation des projets. Manipuler les images avec Photoshop Présentation, Interface Possibilités du logiciel ; menus déroulants, fenêtres conteneur, raccourcis, déplacement des fenêtres Ouvrir une image, grilles règles, explorateur de fichiers Ouvrir une image et information, aides : grilles et règles, explorateur de fichiers : visualisation des dossiers images, informations numériques des photos ; options de l’explorateur, zoom, pan, navigateur Redimensionner une image Taille de l’image : changement de la résolution en pixels, cm, résolution impression et écran redimensionnement de la zone de travail, recadrage. Enregistrer , formats d’images et historique Les différents formats d’images : natifs, impression, écran ou web, taille des fichiers. Enregistrer pour le web : optimisation Palette historique. Historique linéaire et non linéaire. Sélection et détourage Sélection rectangulaire, lasso, baguette magique, forme de sélection, ajout et retranchement, mémoriser et récupérer une sélection ( en psd ), intervertir. Sélection d’une plage de couleurs. Peindre, remplir et dégradé Outils pinceaux, crayon, pot de peinture, remplir et contour. Dégradés L’outil plume et les tracés. Les différents outils. Sauvegarde d’un tracé. Récupérer un tracé en sélection. Calques, texte Créer calques (affichage, opacité, duplication, suppression). Créer texte (horizontal, verticale, masque) Déformations. les styles de calques : biseaux, ombres, motifs. Les masques de texte. Les effets de calques. Corrections d’image Histogramme. Régler la couleur ( teinte/saturation, remplacement, suppression variante de couleur). Régler la luminosité / contraste ( niveaux). Utilisation des courbes. Calques de réglages. Retouche photo Outils netteté, flou, saturation des couleurs, densités. Tampon de duplication (restauration de photos, clonage de partie d’images). Filtres Familles de filtres : flous, artistiques, déformations, éclairages, filtres sur image entière, sélections, avec contour progressif. Modifier et créer avec Fireworks Présentation, interface, relation avec Dreamweaver. Modification d’une image bitmap, sélection recadrage, retouche.correction Création de boutons avec zones de découpes, gif animé. Mode vectoriel : création de trajet, transformation, motifs, texture, style, attacher un texte sur trajet, conversion d’un texte en symbole avec effets. Dessin de carte vectoriel. Création d’une bannière gif animée Création de plusieurs interfaces maquettes de sites Web avec boutons, menu déroulants, comportements, découpes d’images. Animation avec Flash Principe de bases, plan de travail, interface, les outils de dessin, de texte, import d’images. Les calques : disposition d’objets sur différents calques, effets de masque, guide de calque. Création et conversion de symboles graphique, clip, boutons. Interpolation de mouvement et de forme. Bases de l’animation, insertion de clés, opérations sur différents calque. Scénario d’animation. Animation trajectoire. Actions simples. Création d’une bannière avec effets spéciaux. Création d’un diaporama / visualiseur en action script 2. Test de téléchargement, Paramètres de publication . Concevoir un site, cahier des charges Objectifs du site, analyse du contenu, définition de la charte graphique et des styles rédactionnels, structure du site en arborescence, rédaction du cahier des charges, réalisation de la maquette. Règles d’ergonomie et de navigation : présentation de plusieurs styles de sites en ligne. Esthétique des couleurs, choix de gammes harmoniques, choix de combinaisons et accords de couleurs de fonds et textes. Présentations de différentes interfaces avec menu horizontaux ou verticaux. Conception de pages Web avec Dreamveaver Le HTML, introduction au langage, balises. Interface de Dreamweaver, visualisation du code. Affichage des différentes fenêtres. Aides à la conception : grille, règles. Définir un site , enregistrement de fichier Saisir un texte, gestion des paragraphes, sauts de lignes. Mises en forme avec des styles, des formats, les listes. Les images : formats d’images, insertion, propriétés. Alignement de l’image par rapport au texte. Répartir du texte autours d’une image. Les tableaux : utilisation des tableaux, insertion, modification, opération sur les cellules, modification de la structure, mode mise en forme. Insertion de texte et d’images. Insertion de tableau dans tableau. Insertion d’objets : texte flash, bouton flash, image survolée, séquence vidéo Les calques : créer ne interface grâce aux calques, positionnement, formatage, propriétés,calques imbriqués, alignement, transformation de calques en tableaux. Scénario de calques Les feuilles de styles : principe, avantages te inconvénients, création de fichier CSS, mise en forme de texte, arrière plan, bloc, boite, positionnement. Création d’une interface entièrement en css. Application, attachement. Les liens : liens texte, images, liens dans une page, adresse email, zones de carte image. Affichage de la carte du site, mettre à jour les liens. Les formulaires : création d’un formulaire avec des zones de saisie, menu déroulant, liste déroulée case à cocher, boutons d’envoie et d’annulation. Vérification du formulaire, personnalisation du formulaire. Comportements : permuter une image, ouvrir une fenêtre popup, télécharger des comportements. Publication du site : insertion de mots clés, référencement dans les principaux moteurs de recherche, gestion des fichiers, synchroniser les fichiers