Programme

Module 1 : Photoshop pour le web (5Jrs – 35H)
Module 2 : WordPress  (5Jrs – 35H)
Module 3 : HTML 5 CSS 3 – Initiation (3Jrs – 21H)

Module 1 : Photoshop pour le web 

Introduction

  • Photoshop et le traitement de l’image pixel : qu’est-ce qu’un pixel
  • Présentation de l’interface : menu, outils et palettes
  • L’espace de travail

Préparer mon image

  • Ouvrir, redimensionner et recadrer une image
  • Désincliner l’image
  • Taille de l’image – Taille de la zone de travail

Diagnostic de l’image

  • L’histogramme
  • Contraste, exposition, dominante

Connaître les principes techniques d’une image

  • Résolution et formats d’images
  • Les modes colorimétriques : RVB, CMJN, etc.
  • Théorie de la couleur : notions basiques
  • Théorie de l’image numérique, différence image bitmap/image vectorielle

La correction colorimétrique de l’image

  • Régler le point blanc et point noir de l’image avec l’outil Niveaux
  • Ajuster le gamma, les contrastes, la luminosité avec les réglages de base
  • Travailler sur les teintes et la saturation..
  • Un mot sur les réglages non destructifs (calques de réglage)
  • Tons foncés- Tons clairs et virage HDR

Comprendre et utiliser les calques

  • Notions de calques (notion de plans)
  • Dupliquer, supprimer, verrouiller ou déplacer un calque
  • S’organiser avec les libellés (couleurs) et les groupes de calques (en bref)

Sélection et détourage : première approche

  • Notion de sélection
  • Les outils de sélection
  • Copier une sélection et coller sur un nouveau calque
  • Travailler avec du contour progressif

Enregistrer et exporter dans différents formats d’image

  • Méthode de travail en retouche : travailler au format psd
  • Le format raw, aperçu rapide de Camera Raw (pour un approfondissement voir le cours sur Camera Raw)
  • Présentation des principaux formats d’images (Tiff, Jpeg, etc.)
  • Optimisation pour le print : passage rvb vers cmjn, améliorer la résolution
  • Optimisation pour le web (les formats du web : Jpeg, Gif, Png, etc.

Travailler en non destructif (notions)

  • Travailler avec des calques de réglages
  • Les masques de fusion (notion de détourage bitmap)

Le détourage, méthodes productives

  • Le détourage avec les masques de fusion (à partir de sélections)
  • Le détourage à la plume (masque vectoriels)

Le vectoriel de Photoshop

  • La palette Tracés
  • Combiner plusieurs tracés
  • Les calques de formes

La retouche d’image (bases)

  • Utiliser l’outil Tampon
  • Outil Correcteur, correcteur localisé, pièce et déplacement basé sur le contenu
  • Les outils de retouche locale (doigt, éponge, netteté, densité – et +)
  • Transformation basée sur le contenu
  • Les filtres de netteté
  • Les filtres de flou
  • Filtre « correction de l’objectif » (pour la photo)

Retoucher un portrait

  • Techniques de retouche variées et combinées
  • Utilisation de filtres pour la retouche d’images
  • Le filtre passe – haut
  • Le filtre fluidité (et aperçu des filtres dynamiques)

Utilisation des filtres pour la correction d’image

  • Les filtres de netteté
  • Les filtres de flou
  • Correction de l’objectif

Techniques de calque avancées

  • Le calque d’écrêtage
  • Lier des calques
  • Travailler avec les modes de fusion (notions de base)

Sélection et détourage : aller plus loin

  • Mémoriser, récupérer une sélection
  • Comprendre les Couches
  • Améliorer le masque
  • Plage de couleurs
  • Le mode masque (en bref)

Le texte

  • Ajouter du texte (calque de texte)
  • Options pour le texte

Photoshop productif (bases)

  • Utilisation de Photomerge
  • Importations de fichiers images (liens ou incorporés)
  • Ouverture de fichiers autres (Pdf, Ai, etc.)

Photoshop multimédias

  • Optimisation pour le web (les formats du web: Jpeg, Gif, Png, etc.)*
  • La palette Animation (Gif)
  • La palette Montage (en bref)
  • Organiser et découper un Design Web (outil tranche) et exportation*

* Notions et techniques abordées plus précisément dans la formation Web Design

Travailler en non – destructif (notions avancées)

  • Notion d’objet dynamique
  • Travailler avec Caméra Raw et Bridge : objectif photo

Photoshop productif (notions avancées)

  • Utiliser les scripts et traitements par lots
  • Autres processus d’images automatisés (charger les images dans une pile)
  • La fusion HDR
  • Créer une planche Contact

Illustration avec Photoshop (travail à la tablette graphique)

  • Les brosses (pinceaux)
  • Créer une brosse personnalisée
  • Créer des motifs personnalisés
  • Réalisation d’un petit photomontage (ou) atelier pratique en fonction des objectifs des stagiaires

Module 2 : WordPress 

Présentation de WordPress

  • Les spécificités de WordPress
  • Les pré-requis de l’installation

Installer WordPress

  • Installer WordPress en local
  • Installer WordPress sur un serveur distant

Création de contenus

  • Gestion de la navigation
  • Création des pages
  • Gérer les textes et les commentaires
  • Insérer des médias : Vidéo, photo
  • Diffusion et Workflow

Les utilisateurs

  • Gérer les droits des utilisateurs
  • Restreindre l’affichage du contenu
  • Améliorer les performance du site

Les extensions

  • Choisir un plugin WordPress
  • Créer des formulaires de contact sur WordPress
  • Installer des widgets additionnels

Le webdesign avec WordPress

  • Amélioration de la présentation de votre site
  • Appliquer des thèmes à son site
  • Concevoir un site responsive design

Administration du Blog ou du site WordPress

  • Sauvegarde de la base de données
  • Mettre le site en mode maintenance
  • Lutte contre le spam
  • Administration des utilisateurs

Optimiser le site pour le référencement

  • Gestion des Url
  • Gestion des méta – données
  • Générer un sitemap en XML
  • Copyright de vos articles

Le plugin WooCommerce

  • L’installation
  • Les modules gratuits, les modules payants
  • Le paramétrage
  • Les produits

Approfondissement des principes de base de WordPress

  • Le CMS
  • La gestion des contenus
  • Les extensions
  • La mise en forme

Savoir valoriser son contenu

  • Les grands principes de la rédaction textuelle
  • Les titres
  • Les images
  • La vidéo
  • La gestion des commentaires
  • La gestion des réseaux sociaux

Gestion des extensions

  • Comment bien choisir son extension?
  • Les bonnes extensions afin de gérer son site (amélioration, maintenance, sécurité, …)
    • Mise en place
    • Gestion
  • Les bonnes extensions afin de gérer des images et des diaporamas
    • Mise en place
    • Gestion
  • Les bonnes extensions afin de gérer des formulaires
    • Mise en place
    • Gestion
  • Les bonnes extensions pour gérer une newsletter
    • Mise en place
    • Gestion
  • Les bonnes extensions afin d’optimiser sa relation avec les réseaux sociaux
    • Mise en place
    • Gestion
  • Les bonnes extensions afin de gérer son référencement
    • Mise en place
    • Gestion
  • Les bonnes extensions afin de gérer un calendrier d’événements
    • Mise en place
    • Gestion
  • Les bonnes extensions afin de gérer une communauté
    • Mise en place
    • Gestion

Comprendre le fonctionnement d’un template WordPress

  • Comment bien choisir son template
  • Les principes d’un thème WordPress
    • Le fichier de modèle
    • La feuille de style
    • Les fonctions
    • Structure
    • Les marqueurs
    • Le contenu (Header, sidebar, footer, article, la boucle)
  • La traduction d’un template

Module 3 : HTML 5 CSS 3 – Initiation

Initiation au HTML5 CSS3

  • Une petite histoire du web (Les acronymes web)
  • Les spécifications du HTML5
  • Les éditeurs  : Sublim-text ou Notepad++
  • Installation de EMMET (Zencoding google)
  • Les balises et leurs attributs
  • Structure de base d’une page HTML5
  • L’enregistrement des fichiers et création de la racine des pages
  • URL relatif ou absolu
  • Doctypes et normes W3C
  • Balises de type in line et block
  • Balises de structuration HTML 5
  • Compatibilité entre les navigateurs (Librairie js : Modernizr)
  •  Nouvelles balises HTML5
  • Exercices de rappel

Organiser les éléments texte

  • Les titres
  • Les paragraphes
  • La mise en valeurs
  • Les liens hypertext
  • Affichages des sources image
  • Créer des listes et son usage (UL, OL, LI et DL, DT, DD)
  • Faire un tableau
  • Les balises génériques : div, span et leur usage
  • (balises TABLE, TR, TD, TBODY, THEAD, TH, attributs colspan et rowspan)
  • Les formulaires en html 5 : nouveaux attributs pour les inputs

Les règles CSS2 et CSS3

  • Notion de feuille de style en cascades
  • Où écrit-on le CSS ? : link,style type et style scoped
  • Les sélecteurs html
  • Les différents types de sélecteur css : classe, id et pseudo-classe
  • Attributs de sélecteur
  • Préfixe pour les navigateurs.
  • Importation de la police et les possibilités de compatibilité css3 (@font-face)
  • Framework : font-squirrel pour l’optimisation d’affichage de la police importé
  • Introduction aux différentes unités : px, pt, %, em et rem
  • La notion de boite et présentation du modèle de boite
  • Gestion des couleurs : notion exadécimal, rgb et rgba
  • Utilisation du Framework : Flat-Ui et google material design, colorZilla
  • Propriété supplémentaire css : les border, padding, margin et box-sizing
  • Float, clear left, right et both
  • Background, background-image, background-color et background-size
  • Framework font-awesome pour l’application des icônes codés en css
  • Exercices pratique de rappel

Le Responsive Design avec HTML5 CSS 3

  • Le concept de responsive design
  • Adaptation de la page à la largeur des appareils : portable, tablette et pc
  • Les Media queris et les meta viewport
  • Rappel des unités de mesure px,%, em, rem
  • Exercices de mise en pratique