Cadre maquette de capture

Une capture d'écran brute collée dans une présentation ou un README ressemble à un fragment. Placez les mêmes pixels dans une fenêtre de navigateur ou un cadre de téléphone, sur un fond coloré avec une ombre douce, et elle devient un visuel produit. Cet outil de mockup de capture d'écran fait exactement cela en quelques secondes : déposez l'image, choisissez un cadre, réglez le fond, puis téléchargez un visuel prêt pour une landing page, un pitch deck, une note de version ou un post LinkedIn. Un gain de temps pour les designers, les développeurs et les équipes marketing produit qui veulent des visuels propres sans ouvrir de fichier de maquette.

Les trois cadres disponibles

• Simple : arrondit les coins de la capture et la pose sur le fond avec 48 pixels de marge et une ombre portée. Idéal pour un tableau de bord, un détail d'interface recadré, ou tout visuel qui ne doit pas évoquer un appareil précis.
• Browser : ajoute au-dessus de la capture une barre de titre sombre de 44 pixels avec les trois pastilles de fenêtre (rose, jaune, vert), arrondit les coins extérieurs et place la fenêtre sur le fond avec 52 pixels de marge. Idéal pour les captures de sites et d'applications web. La barre ne contient ni adresse ni onglet, elle reste donc neutre quel que soit le système.
• Phone : entoure la capture d'une coque sombre avec écran aux coins arrondis et encoche en haut, sur un fond avec 72 pixels de marge. Idéal pour les écrans d'application mobile et les vues responsive capturées en largeur téléphone. Le cadre est un téléphone générique, pas la reproduction d'un modèle précis.

Créer un mockup de capture d'écran pas à pas

1. Déposez une ou plusieurs captures (PNG, JPG, WebP, BMP, TIFF ou AVIF).
2. Choisissez un cadre : Simple, Browser ou Phone.
3. Ajustez le fond, l'arrondi des coins, le flou et l'opacité de l'ombre si les valeurs par défaut ne conviennent pas.
4. Choisissez le format de sortie et, pour JPEG ou AVIF, la qualité.
5. Cliquez sur Apply Mockup Frame, vérifiez l'aperçu, puis téléchargez l'image (ou un ZIP si vous avez encadré plusieurs captures).

Les réglages en détail

• Fond : une couleur hexadécimale à six chiffres comme #0F172A (l'ardoise sombre par défaut) ou le mot transparent. Avec un fond transparent, vous obtenez une capture encadrée avec son ombre, à poser sur n'importe quelle section de site ou diapositive déjà colorée.
• Arrondi des coins : de 0 à 200 pixels, 24 par défaut. Avec Browser, il façonne les coins extérieurs de la fenêtre ; avec Phone, la coque garde un rayon minimal de 30 pour rester lisible comme un appareil, et les coins de l'écran suivent à environ la moitié de la valeur.
• Flou de l'ombre : de 0 à 200, 20 par défaut. Une valeur basse donne une ombre courte et nette, une valeur haute un halo large et diffus. À 0, le rendu est plat.
• Opacité de l'ombre : de 0 à 1, 0,35 par défaut. Baissez-la sur fond clair, où une ombre sombre paraît lourde, ou mettez 0 pour la supprimer.
• Format et qualité : PNG est sans perte et reste le bon choix pour une interface avec du texte net. JPEG et AVIF acceptent une qualité de 1 à 100 (90 par défaut) et donnent des fichiers bien plus légers pour des captures riches en photos. Le WebP est ici enregistré sans perte. JPEG ne gère pas la transparence : un fond transparent devient blanc en sortie JPEG.

Taille et résolution du résultat

La capture n'est jamais redimensionnée. Le cadre est construit autour d'elle à sa taille native, puis la marge est ajoutée sur chaque côté. Une capture de 1440x900 en mode Browser donne une image de 1544x1048 (1440 plus 2 x 52 en largeur, 900 plus la barre de 44 pixels plus 2 x 52 en hauteur). C'est idéal pour la netteté sur écran Retina, mais une grande capture produit un fichier lourd. Pour un visuel plus léger, passez le résultat dans le compresseur d'images, ou recadrez d'abord la capture sur la zone utile avec l'outil de rognage et rotation.

Cas d'usage

• Landing pages et pages produit : captures en fenêtre de navigateur sur un fond aux couleurs de la marque, exportées en PNG ou AVIF.
• Pitch decks et études de cas : un cadre identique sur chaque diapositive, avec fond transparent pour s'adapter à tous les modèles.
• Notes de version et changelogs : encadrer la capture d'une nouvelle fonctionnalité en quelques secondes, sans ouvrir Figma ni Keynote.
• Documentation et README : un cadre Simple discret détache les captures d'interface du texte qui les entoure.

Encadrer une série de captures

Déposez tout un dossier de captures : le même cadre, les mêmes couleurs et la même ombre s'appliquent à chacune. Chaque fichier garde le nom de sa source avec le suffixe -mockup, et dès qu'il y a plusieurs images vous les récupérez dans un seul mockup-images.zip. Une série reste ainsi homogène.

Par rapport aux outils de design

Figma, Sketch ou Keynote offrent un contrôle complet (modèles d'appareils, perspective, scènes multi-écrans) mais demandent un fichier et un gabarit. Cet outil fait une seule chose, un cadre à plat avec ombre, en une étape. Pour un rendu d'appareil détaillé, préférez un outil de design ; pour des cadres rapides et cohérents au quotidien, celui-ci va plus vite.

Vos captures restent sur votre poste

Une capture d'écran montre souvent plus que prévu : noms de clients dans un CRM, chiffre d'affaires dans un tableau de bord, URL internes, fonctionnalités non annoncées, adresses e-mail dans une barre latérale. Beaucoup de générateurs de mockup en ligne envoient l'image sur un serveur pour la traiter. Ici, le cadre, l'ombre et l'encodage sont calculés par du code Rust compilé en WebAssembly dans l'onglet du navigateur, et aucune requête n'envoie la capture ailleurs. Aucune donnée personnelle visible à l'écran n'est donc transmise à un tiers, ce qui évite un sujet RGPD. Vous pouvez le vérifier dans l'onglet Réseau des outils de développement.

Questions fréquentes

Peut-on obtenir un mockup avec un fond transparent ?

Oui. Saisissez transparent dans le champ fond et exportez en PNG, WebP ou AVIF. Le cadre et l'ombre conservent leur transparence pour se poser sur n'importe quelle couleur.

L'outil dégrade-t-il la qualité de ma capture ?

Pas en PNG ni en WebP : la capture est placée pixel pour pixel, sans redimensionnement, et ces deux formats sont enregistrés sans perte. JPEG et AVIF appliquent une compression avec perte selon le réglage de qualité.

Quel appareil représente le cadre téléphone ?

Aucun en particulier. C'est un téléphone générique sombre, aux coins arrondis et avec encoche, qui convient aussi bien aux écrans iOS qu'Android.

Peut-on afficher une URL dans la barre du navigateur ?

Non. La barre ne montre que les trois pastilles de fenêtre. Le cadre reste neutre et vous évitez d'exposer une URL de préproduction ou interne.

Pourquoi mon fichier est-il si lourd ?

La capture garde sa pleine résolution et le PNG est sans perte. Choisissez AVIF ou JPEG avec une qualité autour de 80, recadrez la capture avant l'encadrement, ou compressez le résultat ensuite.

Mes captures sont-elles envoyées sur un serveur ?

Non. Tout s'exécute localement dans le navigateur via WebAssembly. Rien n'est envoyé ni stocké.