Formation Photoshop - le web design et les nouveaux supports

Objectifs :
• Préparer et exporter des assets graphiques pour le web et les réseaux sociaux avec Photoshop (plans de travail, export pour les écrans, formats WebP/PNG/SVG) en respectant les contraintes techniques.
• Créer et retoucher des visuels numériques (bannières, publications sociales, mockups) en tirant parti des outils de retouche et de l’IA générative de Photoshop.
• Concevoir des interfaces web et mobile dans Figma (frames, grilles, composants, styles) selon les principes du responsive design.
• Prototyper et partager une interface interactive dans Figma (prototypage, mode Dev, transfert aux développeurs).
• Organiser un flux de production cohérent entre Photoshop, Figma et le cloud (bibliothèques, multi-supports).

Partie 1 — Photoshop : création d’assets pour le web et les réseaux sociaux

Prise en main et fondamentaux
• Les menus, panneaux et la barre des tâches contextuelle
• Taille et résolution d’image ; les unités pour l’écran (pixels, densité)
• Les plans de travail (artboards) : gérer plusieurs formats et écrans dans un même document

Retouche et composition
• La retouche photo (réglages, correcteur, outil Suppression)
• Recadrage et transformation
• Le détourage et la sélection assistée par IA
• Les calques de réglage, les masques et les modes de fusion
• Les outils vectoriels et les formes
• Le photomontage
• Les objets dynamiques (travail non destructif)

Texte et effets
• La mise en forme du texte
• Les styles de calque et les effets sur le texte

IA générative (Firefly)
• Remplissage, suppression et extension génératifs pour composer des visuels
• Générer un arrière-plan et Harmoniser un élément à une scène
• Cadre professionnel : droits d’auteur, Content Credentials, vérification

Export pour le web et les écrans
• « Exporter sous » et « Exporter pour les écrans » (remplacent « Enregistrer pour le web »)
• Les formats : PNG, JPEG, WebP et SVG
• La gestion de la transparence
• L’export par plan de travail et la préparation des assets
• Le poids, la résolution et l’optimisation pour le web et les réseaux sociaux

Photoshop sur iPad et Adobe Express
• Photoshop sur iPad : interface, projets et synchronisation cloud
• Adobe Express : décliner rapidement des visuels pour les réseaux sociaux
• Les bibliothèques Creative Cloud : partager des assets entre applications et appareils

Partie 2 — Figma : conception d’interfaces (UI / web design)
Figma est devenu le standard du design d’interfaces, en remplacement d’Adobe XD (abandonné).

Découverte de Figma
• L’interface, les fichiers et l’espace de travail collaboratif
• Les frames (plans de travail) et les grilles de mise en page
• Les calques, l’organisation et les pages

Les fondamentaux du design d’interface
• Les styles : couleurs, typographie et effets
• Les composants et les variantes
• L’Auto Layout : concevoir des interfaces responsives
• Introduction aux bibliothèques et au design system

Intégration des assets
• Importer et intégrer les visuels préparés dans Photoshop
• Gérer les images, les icônes (SVG) et les exports

Prototypage et remise aux développeurs
• Le prototypage interactif (liens, transitions, états)
• Le partage du projet et les commentaires
• Le mode Dev : inspecter les mesures, les couleurs et le code
• L’export des assets pour l’intégration

L’IA dans Figma (aperçu)
• Les fonctions d’IA de Figma (génération de premières maquettes, aide à la mise en page)
• Bonnes pratiques et limites

Flux de production cross-outils
• Coordonner Photoshop (assets) et Figma (interfaces)
• Les bibliothèques et la cohérence de marque sur l’ensemble des supports