polyshGénérateur de cadres de navigateur
Montrez une capture de page web dans un cadre de navigateur réaliste.
- Fonctionne dans votre navigateur
- Aucun envoi de fichier
- Aucun compte
Chargement de l'outil dans votre navigateur…
Ce que fait Générateur de cadres de navigateur
Placer une capture de site dans une fenêtre de navigateur indique d’un coup d’œil qu’il s’agit d’une page web et lui donne un bord net. Choisissez Chrome pour une barre d’onglets et une barre d’adresse, Safari pour une barre d’outils fine avec un champ d’adresse centré, ou Minimal pour trois simples points gris et une petite pastille d’adresse arrondie.
Apparence bascule entre un habillage clair et sombre selon votre capture. Adresse, dans Plus d’options, définit l’URL affichée dans la barre, par exemple le vrai domaine de votre produit. Par défaut, le cadre est posé sur un dégradé Sable avec une marge, des coins arrondis et une ombre. Les applications de bureau rendent mieux dans le Mockup de fenêtre Mac.
Exemple
Vous choisissez
Une capture d’écran de 1440 × 900 px Navigateur : Safari, Apparence : Clair
Téléchargement
screenshot-browser-mockup.png 1584 × 1096 px : une barre d’outils Safari de 52 px au-dessus de la capture, 72 px de marge Sable
Les barres d’outils mesurent 82 px pour Chrome, 52 px pour Safari et 38 px pour Minimal sur une image de 1440 px de large, et s’agrandissent avec les captures plus larges.
Mode d'emploi : Générateur de cadres de navigateur
- Cliquez sur Choisir un fichier ou collez une capture de la page web, sans la barre d’outils de votre navigateur.
- Choisissez Navigateur, Apparence et Arrière-plan ; saisissez l’URL sous Adresse dans Plus d’options, et pour Chrome le Titre de l’onglet.
- Cliquez sur Télécharger le .png.
Bon à savoir
- Le titre de l’onglet, dans Plus d’options, n’apparaît que dans le style Chrome. Safari et Minimal n’ont pas de barre d’onglets.
- Les URL longues sont raccourcies avec des points de suspension pour tenir dans la barre d’adresse.
- Recadrez d’abord la vraie barre d’outils de votre navigateur avec l’Outil de recadrage de captures d’écran, sinon le mockup affichera deux barres d’outils.
Questions sur Générateur de cadres de navigateur
Comment placer une capture d’écran dans une fenêtre de navigateur ?
Faites une capture du seul contenu de la page, chargez-la ici et choisissez Chrome, Safari ou Minimal. La barre d’outils du navigateur est dessinée au-dessus à la bonne échelle, et toute la fenêtre est posée sur un arrière-plan.
Faut-il un mockup Chrome ou Safari ?
Adaptez-le à votre public : Chrome pour la plupart des produits web et B2B, Safari pour un public orienté Mac ou design. Minimal convient quand vous ne voulez l’allure d’aucune marque et seulement une évocation de navigateur.
Le mockup fonctionne-t-il avec des captures en mode sombre ?
Oui. Réglez l’Apparence sur Sombre pour que la barre d’outils prenne des tons gris foncé assortis à une interface sombre. Une barre claire au-dessus d’une page sombre ressemble à une erreur.