Formation Photoshop - le web design et les nouveaux supports
Utilisez Photoshop pour le web et les réseaux sociaux : visuels, plans de travail et exports aux bons formats pour tous les écrans.
Notre équipe vous conseille
Est-ce la bonne formation pour vous ?
Votre objectif, votre niveau, votre financement : notre équipe vérifie avec vous que cette formation vous correspond, ou vous oriente vers celle qui vous conviendra mieux.
- Pour qui
- Webmasters, créateurs de sites, chefs de projet, marketing manager, développeurs.
- Prérequis
Bonne connaissance de l’environnement Mac ou Windows
- Durée
- 35 h · 5 jours
En bref
Ce que vous saurez faire
- 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).
Programme
01Prise 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
02Retouche 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)
03Texte et effets
- La mise en forme du texte
- Les styles de calque et les effets sur le texte
04IA 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
05Export 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
06Photoshop 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é).
07Dé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
08Les 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
09Inté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
10Prototypage 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
11L’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
12Flux de production cross-outils
- Coordonner Photoshop (assets) et Figma (interfaces)
- Les bibliothèques et la cohérence de marque sur l’ensemble des supports
Qui vous forme
Frédéric Crene
Bureautique et productivité · Création et design · Intelligence artificielle
Financer cette formation
Selon votre situation, tout ou partie de la formation peut être pris en charge. Notre équipe vérifie vos droits avec vous.
Votre employeur (OPCO), France Travail, la Région ou un financement personnel peuvent prendre en charge cette formation.
Notre équipe identifie la bonne solution et monte le dossier avec vous.
Informations pratiques
- Type de reconnaissance
- Attestation de fin de formation
- Accessibilité
- Locaux accessibles aux personnes à mobilité réduite (PMR) et aux personnes en situation de handicap (PSH).
Référent handicap : Bénédicte Guilloteau, benedicte@mandyben.com
Fiche mise à jour le 29 octobre 2026
En savoir plus sur cette formation
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
Avis
Ils sont passés par là. Des stagiaires.
Ce stage m'a permis de tester plusieurs appareils photo, et de me mettre en situation pour mieux comprendre les problématiques.
Je m'étais fait toute une montagne de ce logiciel, mais bien expliqué, cela m'a permis vraiment d'évoluer.
Une formation riche en théorie et en pratique. Mon groupe de 3 personnes m'a permis d'avoir une formation très individualisée.
Les petits trucs qu'on cherche pendant des heures, les petits raccourcis très utiles... c'est ce genre de choses que j'étais venu chercher et que j'ai trouvé.
Questions fréquentes
Quel logiciel choisir pour commencer ?
Photoshop pour la retouche d'images, Illustrator pour le dessin vectoriel et les logos, InDesign pour la mise en page de documents. Nous pouvons vous conseiller selon votre projet.
Peut-on obtenir une certification ?
Oui : certaines formations préparent à des certifications reconnues (TOSA, ICDL, Adobe) ou à des blocs de titres professionnels de graphiste.
Utilisez-vous l'intelligence artificielle ?
Oui, des formations dédiées montrent comment intégrer l'IA générative (Adobe Firefly, outils de génération d'images) dans un travail graphique professionnel.
Les formations sont-elles possibles en individuel ?
Oui, la plupart sont proposées en cours individuels, à votre rythme, en plus des sessions en petit groupe.
Où se déroulent les formations ?
Dans nos locaux au 146 rue Paradis, à Marseille (6e), dans vos locaux pour les formations intra-entreprise, ou à distance en visio, en direct avec le formateur. Les modalités possibles sont indiquées sur chaque fiche.
Pas sûr(e) d'être fait(e) pour ça ?
Chacun sa façon d'atteindre son objectif. Notre équipe vous rappelle pour trouver la formation et le financement adaptés à votre situation.
- QualiopiOrganisme certifié
- 1 780personnes formées en 2026
- 98 %de satisfaction
- Depuis 2006à Marseille, 146 rue Paradis