Formation Design Web avec Photoshop et Illustrator

icon public

Public : Graphistes

icon horloge

Durée : 5 jour(s)

Syllabus de la formation Design Web avec Photoshop et Illustrator

Pré-requis : Aisance avec l'outil informatique. Connaître un logiciel de traitement d'images, d'illustration vectorielle serait un plus

Objectifs : Comprendre et maîtriser les spécificités de la publication sur le Web (formats, interactivité, etc.). Concevoir et réaliser l'interface des pages d'un site Web. Élaboration de la charte graphique, appropriation des fondamentaux de la présentation sur écran, ergonomie des sites et principes de navigation.

Sanction : Attestation de fin de formation mentionnant le résultat des acquis

Taux de retour à l’emploi : Aucune donnée disponible

Référence : PAO377-F

Accessibilité : Si vous êtes en situation de handicap, nous sommes en mesure de vous accueillir, n'hésitez pas à nous contacter à referenthandicap@dawan.fr, nous étudierons ensemble vos besoins

Contact : commercial@dawan.fr

À partir de

725,00 € HT / jour

1 796,00 €HT

1 035,71 € HT

Pour 10 heures utilisables pendant 12 mois

2 245,00 € HT

Tarif plein:

  • Paiement à 60 jours
  • Report possible à J-3
  • 3 tickets d'assistance

1 796,00 € HT

Tarif remisé :

Contacter Dawan

Programme de Formation Design Web avec Photoshop et Illustrator

Fondamentaux de la publication sur le Web et de l'interactivité

Introduction

Historique
Présentation du Web

Les formats

Les tailles d'écran
Les espaces colorimétriques : RVB et hexadécimal
Les différents formats de fichiers images
L'optimisation

L'interactivité

Les spécificités (non-linéarité de la publication Web)
Les liens hypertexte
Les différentes formes de sites Web : site statiques et site dynamiques

Présentation des logiciels de la suite Adobe

Photoshop : présentation

L'interface et l'espace de travail
Création de nouveaux documents : le paramétrage
Les outils et les méthodes de sélection
L'organisation des calques
Le photomontage

Illustrator : présentation

L'interface et l''espace de travail
Création de nouveaux documents : le paramétrage
Le vectoriel
Les calques et les sous-calques
Les masques d'écrêtage

Dreamweaver

L'interface et l''espace de travail
Création de nouveaux documents : le paramétrage
le HTML : structure du dodument
Les liens hypertextes
La mise en forme

Présentation de Bridge

Présentation d'outils en ligne

Conception
Production
Analyse
Ressources

Conception fonctionnelle d'un site Web

La préparation du projet

Rédaction du projet sous forme d’une note d'intention
Rédaction du cahier des charges
Définition

Les différents types de sites Web

Les sites vitrines
Le Portfolio
Les sites de e-commerce
Les sites communautaires
Les blogs
Les sites événementiels

Les différentes formes de sites Web

Les sites statiques
Les sites dynamiques
Les CMS
Les niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)

L'arborescence du site

Organisation des rubriques
Cinématique des pages
Ergonomie
Les principes de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)

La conception graphique

La charte graphique : l'identité visuelle

Ce qui est autorisé, ce qui est défendu
Dimension, « zoning »
Définir les couleurs : titres, sous-titres, texte de lecture, liens hypertexte, boutons des menus, encadrés, etc.
Les styles des polices de caractères

Organiser son interface

Définition du fond d'écran et du fond de page
Définir les espaces (contenu, menus, bandeaux publicitaires, etc.)
Définir les différents niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)

Organiser son travail

Créer des bibliothèques de styles
Créer des bibliothèques d'objets
Exporter ses nuanciers
Exporter ses styles

Réalisation : la page d'accueil

La présentation

Définition du fond d'écran et du fond de page
Définir les espaces (contenu, menus, bandeaux publicitaires, etc.)
Définir les différents niveaux de navigation (navigation dans le site, accès aux rubriques et sous-rubriques, navigation horizontale, verticale, liens, etc.)

Création d'une page d'accueil

Définir une grille de positionnement des différents éléments
Définir les emplacements et la mise en forme du contenu (texte, images, vidéos, etc.)
Prise en compte de l'ergonomie
Atelier pratique : création de l'interface d'une page d'accueil

Réalisation : les rubriques

Création des pages de rubriques

Déclinaison de la charte graphique dans les pages intérieures
Organisation du contenu texte-images
Positionnement des barres et boutons des menus
Atelier pratique : création de l'interface de pages intérieures

Enrichissement graphiques

Les fonds
Les dégradés des bords
En-tête, pieds de pages
Les vignettes
Atelier pratique : création de l'interface de pages intérieures

Exportation des documents graphiques

Exportation en html

Les outils tranche de Photoshop et de Illustrator
Les zones actives d'une image
Exportation d'un document au format html

Exportation de l'interface pour l'intégration html

Création des repères de zones
Découpage de l'interface

Optimisation des images

Les formats d'image : JPG, GIF, PNG
L'animation : GIF, Flash, CSS 3
Atelier pratique : création de l'interface d'une page Web dans un document html

Finalisation de l'interface : l'intégration HTML

L'éditeur Web

Insertion des éléments dans une page html
Gestion des liens hypertexte
Insertion et gestion des menus et barres des menus (boutons, onglets, etc.)

L'optimisation des pages

Optimisation des images
Les transparences
Les dégradés
Atelier pratique : création d'un petit site Web comportant plusieurs rubriques

Conclusion

De l'idée initiale à la réalisation finale

Bilan de la réalisation : contraintes, potentiel et spécificités
La promotion
Le référencement
Faire vivre son site

  • Un support et les exercices du cours pour chaque stagiaire
  • Un formateur expert ayant suivi une formation à la pédagogie
  • Boissons offertes pendant les pauses en inter-entreprises
  • Salles lumineuses et locaux facilement accessibles
  • Méthodologie basée sur l'Active Learning : 75% de pratique minimum
  • Matériel pour les formations présentielles informatiques : un PC par participant
  • Positionnement à l'entrée et à la sortie de la formation
  • Certification CPF quand formation éligible

Suite de parcours et formations associées

Pour suivre une session à distance depuis l'un de nos centres, contactez-nous.

Lieu Date Remisé Actions
Bordeaux Du 03/03/2025 au 07/03/2025 Oui S'inscrire
Bordeaux Du 30/06/2025 au 04/07/2025 Oui S'inscrire
Bordeaux Du 13/10/2025 au 17/10/2025 Oui S'inscrire
Distance Du 24/02/2025 au 28/02/2025 Oui S'inscrire
Distance Du 16/06/2025 au 20/06/2025 Oui S'inscrire
Distance Du 29/09/2025 au 03/10/2025 Oui S'inscrire
Lille Du 24/02/2025 au 28/02/2025 Oui S'inscrire
Lille Du 16/06/2025 au 20/06/2025 Oui S'inscrire
Lille Du 29/09/2025 au 03/10/2025 Oui S'inscrire
Lyon Du 10/03/2025 au 14/03/2025 Oui S'inscrire
Lyon Du 07/07/2025 au 11/07/2025 Oui S'inscrire
Lyon Du 13/10/2025 au 17/10/2025 Oui S'inscrire
Marseille Du 10/03/2025 au 14/03/2025 Oui S'inscrire
Marseille Du 07/07/2025 au 11/07/2025 Oui S'inscrire
Marseille Du 13/10/2025 au 17/10/2025 Oui S'inscrire
Montpellier Du 03/03/2025 au 07/03/2025 Oui S'inscrire
Montpellier Du 30/06/2025 au 04/07/2025 Oui S'inscrire
Montpellier Du 13/10/2025 au 17/10/2025 Oui S'inscrire
Nantes Du 17/03/2025 au 21/03/2025 Oui S'inscrire
Nantes Du 21/07/2025 au 25/07/2025 Oui S'inscrire
Nantes Du 20/10/2025 au 24/10/2025 Oui S'inscrire
Nice Du 10/03/2025 au 14/03/2025 Oui S'inscrire
Nice Du 07/07/2025 au 11/07/2025 Oui S'inscrire
Nice Du 13/10/2025 au 17/10/2025 Oui S'inscrire
Paris Du 24/02/2025 au 28/02/2025 Oui S'inscrire
Paris Du 16/06/2025 au 20/06/2025 Oui S'inscrire
Paris Du 29/09/2025 au 03/10/2025 Oui S'inscrire
Rennes Du 17/03/2025 au 21/03/2025 Oui S'inscrire
Rennes Du 21/07/2025 au 25/07/2025 Oui S'inscrire
Rennes Du 20/10/2025 au 24/10/2025 Oui S'inscrire
Strasbourg Du 17/03/2025 au 21/03/2025 Oui S'inscrire
Strasbourg Du 21/07/2025 au 25/07/2025 Oui S'inscrire
Strasbourg Du 20/10/2025 au 24/10/2025 Oui S'inscrire
Toulouse Du 03/03/2025 au 07/03/2025 Oui S'inscrire
Toulouse Du 30/06/2025 au 04/07/2025 Oui S'inscrire
Toulouse Du 13/10/2025 au 17/10/2025 Oui S'inscrire

Nos centres de formation

  • Bordeaux

    Nos locaux sont accessibles

    Bât Ravezies - 2e étage 250 avenue Emile Counord

    33300 Bordeaux

    Liaison directe de la gare Bordeaux Saint-Jean via le tram C

  • Distance

    32 Boulevard Vincent Gâche

    44000 Nantes

  • Lille

    Nos locaux sont accessibles

    46 rue des Canonniers - 2è étage

    59800 Lille

    Proche des deux gares

  • Lyon

    Nos locaux sont accessibles

    62 rue de Bonnel - 1er étage Ascenseur à droite de l'entrée

    69003 Lyon

  • Marseille

    Nos locaux sont accessibles

    38/40 rue de la République Escalier A, 1er étage

    13001 Marseille

    A proximité du vieux port

  • Montpellier

    Nos locaux sont accessibles

    26 Allée de Mycènes Le Thèbes, Bât. A, 3è étage

    34000 Montpellier

    Quartier Antigone

  • Nantes

    Nos locaux sont accessibles

    32 Boulevard Vincent Gâche 5 ème étage

    44200 Nantes

  • Nice

    Nos locaux sont accessibles

    455 promenade des Anglais Bât Arenice, 7è étage

    06200 Nice

  • Paris

    Nos locaux sont accessibles

    11 rue Antoine Bourdelle

    75015 Paris

    dans le 15e arrondissement

  • Rennes

    Nos locaux sont accessibles

    3 place du Général Giraud

    35000 Rennes

  • Strasbourg

    Nos locaux sont accessibles

    4 rue de Sarrelouis - 4è étage

    67000 Strasbourg

  • Toulouse

    Nos locaux sont accessibles

    1 place Occitane Bât. Le Sully - 4è étage

    31000 Toulouse

    Proche de Jean-Jaurès et du Capitole

  • bien adapté à mes besoins (j'étais la seule eleve..)
  • Claire G.