Photos et déclinaisons

Tes photos du commerce ont été prises en séance photo, sur ton téléphone. Il faut d’abord les mettre sur l’ordinateur, dans kit/photos. Il en faut deux : une photo d’ambiance (la devanture, l’intérieur) et une photo d’un produit posé sur un fond uni.

1. Avec un câble : branche ton téléphone. Android : choisis Transfert de fichiers sur le téléphone. iPhone : touche Se fier (ou « Faire confiance »). Puis, dans l’Explorateur : Ce PC › ton téléphone › DCIM.C’est bon si tu vois les vignettes de tes photos.Sans câble : envoie-les-toi (OneDrive, Google Photos, mail à toi-même, AirDrop vers un Mac), puis enregistre-les.
2. Copie tes meilleures photos dans kit/photos. Renomme-les simplement : ambiance.jpg, produit.jpg.C’est bon si elles sont dans kit/photos, à côté des photos d’exemple.Photos d’iPhone en .HEIC que Figma refuse ? Envoie-les-toi par mail (elles partent souvent en JPEG). Pour la prochaine fois : Réglages › Appareil photo › Formats › Le plus compatible.
3. Ouvre Figma (figma.com, connecte-toi), puis ton fichier kit-boulangerie dans tes fichiers Récents (Recents).C’est bon si ton post de la séance 1 s’affiche.

Dans Figma, une photo n’est pas un objet à part : c’est un remplissage. Elle vit dans une forme, ici ton rectangle cadre-photo. Recadrer, c’est choisir la partie de la photo qu’on voit dans la forme : ce qui dépasse est caché, pas effacé.

1. Dans Calques, clique cadre-photo (sous boulangerie-post).C’est bon si le panneau Design affiche le rectangle : W 1080, H 640.
2. Section Remplissage : clique la pastille de couleur, à gauche du code.C’est bon si la fenêtre « Sélecteur de couleur » s’ouvre (onglets Personnalisé et Bibliothèques).
3. En haut de cette fenêtre, une rangée de six petites icônes donne le type de remplissage (uni, dégradés, image, vidéo…) : clique l’icône Image (la 4e : un cadre avec une montagne et un soleil).C’est bon si la fenêtre propose les boutons Importer depuis l’ordinateur et « Créer une image » (n’y touche pas : c’est de l’IA).
4. Clique Importer depuis l’ordinateur, prends ta photo d’ambiance dans kit/photos, puis Ouvrir.C’est bon si la photo remplit tout le cadre, sans déformation (mode Remplir).La photo ne se voit pas ? Elle est peut-être cachée sous un autre objet : regarde l’ordre dans Calques.
5. Pour choisir ce qu’on voit : dans la même fenêtre, la liste du mode affiche Remplir. Ouvre-la : Remplir, Ajuster, Rogner, Panneau. Choisis Rogner. Sur le canevas, fais glisser la photo ; le curseur de zoom de la barre du bas l’agrandit. Valide avec le ✓ bleu de cette barre.C’est bon si on voit la partie que tu veux, et il n’y a aucune bande vide dans le cadre.Une bande vide ? Repasse en mode Remplir, puis recommence (le bouton Annuler de la barre du bas abandonne le cadrage).

   

6. Choisis ce qu’on voit : le sujet plutôt sur un côté qu’au centre, et rien de coupé au mauvais endroit (une tête, l’enseigne).C’est bon si on comprend en une seconde de quel commerce il s’agit.

1. Clique cadre-photo, puis la ligne Image (sa pastille) dans la section Remplissage.C’est bon si la fenêtre de l’image s’ouvre, avec des curseurs de réglage : Exposition, Contraste, Saturation, Température, Teinte, Surlignements, Ombres (ils étaient sur la capture de la partie précédente).
2. Monte doucement le curseur Exposition, puis un peu le Contraste. Regarde la photo, pas le curseur.C’est bon si la photo est plus claire, sans devenir grise ni délavée.
3. Ferme la fenêtre (sa croix, ou Échap).C’est bon si seule la photo a changé : le réglage appartient à son remplissage, il ne touche ni le fond ni les textes.

Détourer, c’est garder le produit et enlever le fond. Ça marche bien quand le produit est posé sur un fond uni et contrasté. Figma ne détoure pas au pinceau : voici deux solutions. La première est le bouton de Figma (il existe sur l’écran ; on ne sait pas encore s’il est gratuit : à vérifier sur ton poste). Si elle manque ou refuse, prends la seconde.

1. Depuis l’Explorateur, fais glisser ta photo de produit (ou produit-nappe.jpg) sur le canevas gris de Figma, à côté de tes cadres.C’est bon si la photo apparaît sur le canevas, hors de tes cadres.
2. Solution 1, dans Figma : clique la photo. Une barre apparaît sous le canevas : Rogner, Sélectionner une zone, Retirer l’arrière-plan, Modifier avec un prompt. Clique Retirer l’arrière-plan à vérifier (offre gratuite : crédits ?).C’est bon si le fond disparaît (damier) et le produit reste.Bouton absent, grisé, ou payant ? C’est une fonction d’intelligence artificielle de Figma : elle dépend de l’offre et d’un nombre de crédits. Passe à la solution 2.

   

3. Solution 2, un outil web gratuit à vérifier : dans un nouvel onglet, remove.bg (sans compte, image un peu réduite) ou Adobe Express (« Supprimer l’arrière-plan », compte Adobe gratuit). Dépose produit.jpg, puis télécharge le résultat en PNG dans kit/photos sous le nom produit-detoure.png. Glisse-le ensuite sur le canevas de Figma.C’est bon si le produit, sans fond, est sur le canevas.Le site est bloqué par le réseau de l’école ? Lève la main. En dernier recours, garde ton produit sur son fond uni et clair.
4. Solution 1 seulement : enregistre aussi le produit détouré. Sélectionné, section Exporter › + › PNG › Exporter ; range le fichier dans kit/photos sous le nom produit-detoure.png.C’est bon si le fichier est dans kit/photos. (PNG garde la transparence ; JPG remettrait un fond blanc.)
5. Supprime la photo d’origine si elle est encore sur le canevas (clique-la, Suppr). Laisse le produit détouré sur le canevas, à côté de ta palette.C’est bon si il ne reste que le produit sans fond. Il attend : il servira dans le carrousel.

Une story se voit en plein écran : 1080 × 1920. En haut, l’avatar et la barre de progression cachent 250 px. En bas, le champ de réponse cache 340 px. Le fond peut y aller, le texte jamais.

1. Touche F (Frame). Dans la liste des formats du panneau Design, déplie Réseaux sociaux et clique Story Instagram (1080 × 1920).C’est bon si une nouvelle frame de 1080 × 1920 apparaît, avec sa ligne Instagram story - 1 dans Calques.La liste n’affiche pas ce format ? Glisse un cadre sur le canevas gris : la taille se règle à l’étape suivante.
2. Panneau Design : section Position, X 1200 et Y 0 (section Mise en page : W 1080 et H 1920 sont déjà là).C’est bon si un cadre haut et étroit se tient à droite du carré, sans le toucher.W ou H ne valent pas 1080 et 1920 ? Retape-les ; si l’un change tout seul, clique l’icône des proportions, à droite de W et H.

   

3. Calques : double-clique son nom (Instagram story - 1), tape boulangerie-story, Entrée.C’est bon si la ligne s’appelle boulangerie-story.
4. Le fond : outil Rectangle (R), trace un rectangle dans la story. Design : X 0, Y 0, W 1080, H 1920. Remplissage : ta couleur claire. Renomme-le fond.C’est bon si toute la story prend ta couleur claire, et fond est rangé sous boulangerie-story dans Calques.Rangé ailleurs ? Dans Calques, glisse sa ligne sur le nom boulangerie-story.
5. Copie : dans Calques, clique cadre-photo de ton post, puis Maj+clic sur le groupe textes. Ctrl+C. Clique le nom boulangerie-story (au-dessus de la story), puis Ctrl+V.C’est bon si Calques montre un deuxième cadre-photo et un deuxième textes, rangés sous boulangerie-story.Collés ailleurs ? Dans Calques, glisse leurs lignes sur le nom boulangerie-story.
6. Outil Déplacer (V) : place les copies en colonne : la photo en haut (sous la bande de 250 px), les textes en dessous. Déplace, n’étire pas.C’est bon si rien n’est déformé, et tout reste dans la story.
7. La bande du haut : un rectangle (R) dans la story. Design : X 0, Y 0, W 1080, H 250. Remplissage : FF0000, et 40 % dans le champ de l’opacité, juste à droite du code. Renomme-le zone-haut.C’est bon si une bande rouge transparente couvre le haut de la story.
8. La bande du bas : pareil avec X 0, Y 1580, W 1080, H 340. Renomme-la zone-bas.C’est bon si une bande rouge transparente couvre le bas de la story.
9. Vérifie : aucun texte, aucun prix, aucun nom ne touche une bande rouge. Le fond et la photo, si.C’est bon si les bandes ne recouvrent que du fond ou de la photo. Garde-les visibles pour travailler : on les masque juste avant l’export.

Un carrousel, ce sont plusieurs carrés qu’on fait défiler du doigt. Trois suffisent, à condition qu’ils se suivent.

Image	Son rôle	Exemple
1	L’accroche : donner envie de glisser	« Notre secret ? » et un petit « 1/3 → »
2	Le contenu promis	Le produit détouré, « Un levain de 24 h, pétri à la main »
3	L’appel à l’action	« Passez nous voir », l’adresse, les horaires

1. Clique le nom boulangerie-post au-dessus du cadre, puis Ctrl+D (Mac ⌘+D) : dupliquer.C’est bon si une copie du post apparaît, avec sa ligne dans Calques à vérifier.Tu ne la vois pas ? Elle est peut-être posée juste à côté : Maj+1 pour tout voir.
2. La copie sélectionnée, panneau Design : X 0, Y 2100. Renomme-la boulangerie-carrousel-1.C’est bon si un carré identique se tient sous ton post, sans le toucher.
3. Recommence deux fois à partir de boulangerie-post : boulangerie-carrousel-2 (X 1200, Y 2100) et boulangerie-carrousel-3 (X 2400, Y 2100).C’est bon si trois carrés côte à côte, sous ton post, nommés -1, -2 et -3.
4. Image 1 : double-clique sur l’accroche (deux fois si besoin : elle est dans le groupe) et retape-la en question ou en promesse. Ajoute en bas à droite un petit texte « 1/3 → » (T, un clic).C’est bon si on a envie de faire glisser.
5. Image 2 : dans Calques, clique son cadre-photo (sous boulangerie-carrousel-2). Remplissage : clique la ligne Image, puis dans la fenêtre l’icône Uni (la 1re de la rangée d’icônes), puis tape le code de ta couleur principale dans le champ Hex. Avec l’outil Déplacer, fais glisser le produit détouré du canevas jusque sur l’image 2. Retape l’accroche : ce que tu as promis en image 1.C’est bon si le produit, sans fond, est posé sur ta couleur, et dans Calques il est rangé sous boulangerie-carrousel-2.Rangé ailleurs ? Glisse sa ligne sur le nom boulangerie-carrousel-2.
6. Image 3 : l’appel à l’action en grand, l’adresse et les horaires bien lisibles.C’est bon si on sait où aller, et quand.
7. Recule de deux pas et regarde les trois carrés.C’est bon si même fond, mêmes polices, nom du commerce au même endroit : ils se lisent comme une suite.

1. Calques : masque zone-haut et zone-bas (survole leur ligne et clique l’œil).C’est bon si plus de bande rouge sur la story. Un calque masqué ne part pas à l’export.
2. Calques : clique boulangerie-post, puis Maj+clic sur la story et les trois carrés du carrousel.C’est bon si les cinq frames sont sélectionnées.
3. Section Exporter (en bas du panneau Design) : les copies du post ont déjà leur ligne 1x · PNG, la story non. Si le panneau dit « Cliquez sur + pour remplacer les paramètres d’export mixte », clique le + ; sinon, vérifie la ligne 1x, PNG.C’est bon si une seule ligne : 1x, PNG, pour les cinq frames.

   

4. Clique Exporter 5 calques.C’est bon si le navigateur télécharge un fichier .zip qui contient les 5 PNG.Autre chemin : menu de Figma › Fichier › Exporter… (Maj+Ctrl+E) exporte d’un coup tout ce qui a une ligne d’export à vérifier.
5. Dans Téléchargements : clic droit sur le .zip › Extraire tout, puis range les 5 PNG dans kit/exports.C’est bon si 5 fichiers PNG sont dans kit/exports, aux noms de tes frames.Windows propose de remplacer boulangerie-post.png ? Oui : c’est la nouvelle version.
6. Vérifie deux tailles (clic droit › Propriétés › Détails) : la story, puis un carré du carrousel.C’est bon si story 1080 × 1920, carré 1080 × 1080.

1. Copie tout ton dossier kit sur ta clé USB ou ton OneDrive.C’est bon si tu retrouves photos et exports sur la copie. Ton fichier Figma, lui, est dans ton compte.
2. Montre tes 5 PNG à ton formateur.C’est bon si il les a vus. Tu ne rends rien aujourd’hui : on vérifie et on rend en séance 3.
3. Déconnecte-toi de Figma (ton nom › Se déconnecter).C’est bon si la page de connexion s’affiche.