Mise en situation sur appareil
Device Mockup
Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur, avec fond et ombre.
Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur et exporte un PNG jusqu’à trois fois la taille. Les cadres sont dessinés dans un canvas à partir de rectangles arrondis plutôt que d’être des photographies d’un produit : rien ici n’est une marque déposée et la sortie reste nette à n’importe quelle échelle. La capture ne quitte jamais l’onglet.
Déposez une capture d’écran
PNG, JPEG ou WebP. Tout se passe dans cet onglet.
Aperçu
Les cadres sont des formes, pas des photos
Le téléphone, la tablette, l’ordinateur portable et la fenêtre de navigateur sont dessinés sur un canvas à partir de quelques rectangles arrondis. Ce ne sont les photos d’aucun produit et ils ne portent aucune marque déposée, vous pouvez donc les utiliser partout, et ils restent nets à n’importe quelle échelle d’export. Les rapports d’écran sont ceux des appareils actuels — 19,5:9 pour un téléphone, 4:3 pour une tablette, 16:10 pour un ordinateur portable — donc, quand une capture a un autre rapport, « Remplir » rogne le centre et « Tout montrer » laisse des marges. La capture d’une page longue demande le plus souvent « Aligner en haut ».
Réduisez le PNG exporté avec le compresseur PNG, et composez une carte de partage avec le générateur de carte sociale.
Comment s’en servir
Déposez la capture d’écran
PNG, JPEG ou WebP. La ligne de statistiques en dessous montre le rapport de l’image face au rapport d’écran du cadre, et c’est ce nombre qui décide du choix suivant.
Choisissez le cadre, puis la façon dont l’image s’y ajuste
« Couvrir » recadre le milieu pour remplir l’écran, « contenir » montre l’image entière avec des bandes, et « aligner en haut » est celui des captures de page longue : il garde le haut de la page et laisse le reste filer par le bas, ce que la capture d’une page qui défile cherche d’ordinaire à montrer.
Réglez la marge et le fond
La marge est ce qui fait paraître la capture composée plutôt que rognée. Le fond transparent est celui à choisir quand l’image va sur une diapositive colorée ou sur une page dont vous ne maîtrisez pas le fond.
Exportez en 2× sauf si vous savez autre chose
La ligne sous l’aperçu donne la taille de sortie exacte pour l’échelle choisie. Le 2× convient pour un écran retina ou un README ; le 3× est pour l’impression ou une grande diapositive, et le fichier devient lourd.
Questions fréquentes
Est-ce un iPhone ? Un MacBook ?
Non. Ce sont des formes génériques aux rapports d’image qu’emploient les appareils modernes — 19,5:9 pour un téléphone, 4:3 pour une tablette, 16:10 pour un portable. Il n’y a ni logo, ni photographie de produit, ni contour déposé, et c’est délibéré : une maquette contenant un vrai appareil ne peut d’ordinaire pas servir en communication sans autorisation.
Ma capture est recadrée d’une façon que je ne voulais pas.
La ligne de statistiques montre votre rapport et celui du cadre. Quand ils diffèrent, « couvrir » doit rogner quelque chose. Passez à « contenir » pour voir l’image entière avec des bandes, ou à « aligner en haut » si l’important est en haut, ou reprenez la capture au rapport du cadre.
Puis-je mettre plusieurs écrans côte à côte ?
Pas ici : une image, un cadre. Composer une scène de trois appareils est un travail de mise en page, et le faire mal est pire que ne pas le faire. Exportez chacun sur fond transparent et disposez-les dans l’outil que vous employez déjà pour la diapositive.
Ma capture est-elle envoyée quelque part ?
Non. Elle est décodée en ImageBitmap et dessinée dans un canvas de cet onglet, et le PNG est produit par le canvas lui-même. Rien ne passe par le réseau, ce qui est tout l’intérêt pour la capture d’un produit non encore sorti.
À alimenter depuis
Image de substitution
Placeholder Image
Fabrique une image unie ou en dégradé à la taille demandée, avec ses dimensions inscrites dessus.
Annoter une capture d’écran
Screenshot Annotator
Trace des flèches, des cadres, des étapes numérotées et des zones floutées sur une capture, puis exporte une image aplatie.
Bordure et marge
Border & Padding
Ajoute autour d’une image une bordure unie, dégradée ou arrondie et une marge, ou complète l’image jusqu’au rapport visé.
Capture de code en image
Code Screenshot
Rend un extrait de code en image avec coloration syntaxique, cadre de fenêtre et thème au choix.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Bordure et marge
Border & Padding
Ajoute autour d’une image une bordure unie, dégradée ou arrondie et une marge, ou complète l’image jusqu’au rapport visé.
Générateur de carte sociale
Social Card Generator
Compose une image de partage de 1200×630 à partir d’un titre, d’un sous-titre, d’une ligne de marque et d’un logo facultatif sur un modèle au choix, et écrit les balises meta qui vont avec.
Compresseur PNG
PNG Compressor
Quantifie la palette et réécrit le flux deflate pour alléger un PNG sans toucher à ses dimensions, sans envoi de fichier, tout dans votre navigateur.
Annoter une capture d’écran
Screenshot Annotator
Trace des flèches, des cadres, des étapes numérotées et des zones floutées sur une capture, puis exporte une image aplatie.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Calculateur de format d’image
Aspect Ratio Calculator
Trouve la dimension manquante pour un rapport visé et liste les tailles normalisées qui lui correspondent.