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