Accueil    Formations    Digital & Multimédia    Créer ou refondre un site Web : améliorez vos performances digitales    Design et prototypage d'interface    Photoshop et Illustrator pour le Design d'interface

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques / Compétences visées

  • Créer des maquettes de pages Web exploitables par des développeurs
  • Intégrer les contraintes de l'HTML et du CSS dans le design
  • Préparer et décliner les images pour les écrans : ordinateurs, tablettes et smartphones
  • Exporter les maquettes Web en images avec le code HTML et CSS
  • Exporter le code CSS de calques Photoshop
  • Exporter le design d'une icône d'application mobile dans toutes les tailles et formats nécessaires
  • Créer des animations pour le Web.

Niveau requis

Avoir une bonne connaissance de l'environnement informatique (pratique courante d'OS X ou de Windows).

Public concerné

Webmasters, créateurs de sites Internet, chefs de projets tablettes et smartphones, responsables de campagne multicanal, développeurs d'applications pour tablettes (iPad / Android) et smartphones.

Programme

Les tendances graphiques

  • Evolution des tendances de design Web et mobile
  • Du skeuomorphism au neomorphism
  • Le flat design
  • Notions de la qualité Web : VPTCS (Visibilité - Perception - Technique - Contenus - Services)
  • Les designers inspirants
  • Les plateformes de kit de design
  • Notion de Design System
  • Les logiciels dédiés au UI

UX, IxD et UI

  • La méthode UX en 4 étapes
  • L'importance du designer d'interaction
  • L'interface utilisateur
  • Eléments d'interface
    • De site Web
    • D'application mobile
    • D'application pour tablette

Notions d'ergonomie

  • Généralités
  • Loi de Fitts
  • Loi de Hick
  • Approche Gestalt
  • Exemples sur les formulaires

Design d'interface avec Photoshop

  • Menus, outils et palettes
  • Espaces de travail
  • Fenêtres et onglets
  • Bridge

Importation

  • Importer et incorporer
  • Importer et lier
  • Bloc d'image
  • Objets dynamiques (PSB)

L'image numérique

  • Taille, définition et résolution d'image
  • Rapport longueur / largeur
  • Déclinaisons d'images pour le Web, les smartphones et les tablettes
  • Le recadrage libre et le recadrage basé sur un format
  • L'ajustement des tailles et des résolutions
  • Profils ICC

Les ajustements de contrastes et couleurs

  • Réglages dynamiques
  • Niveaux et courbes
  • Correction et transformation des couleurs

Les sélections

  • Les outils de sélection de base
    • Rectangle
    • Cercle
    • Lasso
  • Les outils de sélection pour le détourage
    • Baguette magique
    • Sélection rapide
  • L'amélioration du contour
  • Sélectionner et masquer
  • La mémorisation des sélections
  • Création de calques à partir de sélection
  • Les tracés à la plume

Les calques et les masques

  • Utilisation des calques
    • Ordre et organisation en groupe
  • Les options de superpositions
    • Opacité et modes de fusions
  • Les transformations
    • Transformation manuelle
  • Outil règle
    • Transformations géométriques
    • Déformation
    • Fluidité
  • Le photomontage
  • Les masques
    • Masque de fusion et masque vectoriel
    • Masquage multiple
  • Copier le SVG
  • Copier le CSS

La création de maquette pour les pages Web

  • L'outil texte et les palettes texte, les feuilles de style
  • Utilisation des polices
  • Panneau Glyphes
  • Les outils de création graphique
    • Plumes et formes vectorielles
    • Calques de forme
  • Les styles de calques : effets d'ombre portée, de relief...
  • Les plans de travail
    • Préférences pour les plans de travail
    • Création d'un document de plan de travail
    • Ajout de plans de travail au document actif
    • Utilisation des plans de travail
    • Exportation de plans de travail
  • Les compositions de calques
    • Visibilité
    • Position
    • Style

Export d'images

  • Tableau comparatif des formats Web
  • Choix entre JPEG, PNG, GIF, WEBP et SVG
  • Rapport poids / qualité
  • Outils intégrés de comparaison
  • Enregistrer pour le Web
    • Exporter les images
    • Exporter l'HTML
    • Exporter les images et l'HTML
  • Exportation rapide au format (...)
  • Exporter sous
  • Enregistrer sous
  • Export CSS

La découpe pour le Web

  • Notion de tranches
  • Manuelles
  • D'après les calques
  • D'après les repères
  • L'exportation des tranches
    • Conservation et réglage de la transparence
    • Exportation en image seule ou avec l'HTML
    • Réglages des paramètres d'exportation
    • L'exportation des images à partir des calques

Tester sur le Web

  • En local
    • Ouverture dans un navigateur
    • Créer un serveur Web local
  • A distance chez un hébergeur
    • Outils de transferts FTP

Edition du code HTML et CSS

  • Remplacement des éléments images par du texte
  • Utilisation des images comme image de fond de cellule ou comme arrière-plan d'une règle CSS
  • Création d'un fichier des styles CSS séparé

Design d'interface avec Illustrator

  • Menus, outils et palettes
  • Travailler sur plusieurs plans de travail
  • Exporter
    • La sélection
    • Les écrans (iOS et Android)
    • Le Web
  • Trancher et exporter pour le Web
  • Exportation d'icones d'applications

Création d'animation (GIF animés)

  • La palette animation
  • Ajout d'image
  • Création de trajectoire
  • Réglage du GIF animé
  • Mouvement en 3D pour la création de vidéo
  • Introduction aux animations Lottie (Airbnb + After Effects)

Modalités d’évaluation des acquis

  • En cours de formation, par des productions
  • Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Vous souhaitez suivre cette formation ?

Cette formation est disponible en présentiel ou en classe à distance, avec un programme et une qualité pédagogique identiques.

Choisissez la modalité souhaitée pour vous inscrire :

Votre société a besoin d'une offre personnalisée ? Contactez-nous

Faites évoluer vos compétences

Complétez votre formation

Faites-nous part de votre projet de formation, nous sommes là pour vous guider.

Contactez-nous