Transformez vos captures d'écran en maquettes de navigateur professionnelles.
Faites glisser une capture d'écran ici
Prend en charge PNG, JPG (max. 1 fichier)
Transformez vos captures d'écran en maquettes de navigateur professionnelles. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Une capture d'écran brute collée dans une présentation ou un post paraît souvent plate, et l'on ne comprend pas toujours qu'il s'agit d'un site web. Cet outil place votre capture dans une fenêtre de navigateur façon macOS, avec les boutons rouge, jaune et vert, une barre d'adresse, des coins arrondis et une ombre douce, puis la pose sur un arrière-plan en dégradé. En quelques secondes, vous obtenez une image soignée pour vos présentations, pages produit, portfolios ou publications sur X.
L'utilisation est simple : cliquez sur la zone d'import ou faites-y glisser une image. Les formats PNG et JPG sont acceptés, un fichier à la fois. Dans les options de style, choisissez l'un des quatre dégradés d'arrière-plan ou un fond sombre uni sans dégradé. La marge interne propose trois tailles, S, M et L, qui définissent l'espace autour de la capture. Le thème du cadre peut être sombre ou clair pour s'accorder aux couleurs de votre capture, et chaque réglage apparaît aussitôt dans l'aperçu à droite.
Le champ « URL du navigateur » accepte n'importe quelle adresse ou texte, par exemple le domaine de votre produit ou le chemin d'une page précise. Un texte trop long est tronqué par des points de suspension pour ne jamais déborder de la barre. En cliquant sur « Télécharger le mockup PNG », l'outil redessine toute l'image sur un canvas dans votre navigateur et exporte un PNG net de 1600 pixels de large. La hauteur suit les proportions de votre capture, si bien qu'une capture de page entière est conservée intégralement.
Tout l'assemblage se fait sur votre ordinateur et les captures ne sont jamais envoyées à un serveur AlpaKit : vous pouvez donc l'utiliser pour des écrans de produits non encore lancés ou des tableaux de bord internes. Pour l'instant, le cadre n'existe qu'en style macOS et le fond ne peut pas être transparent. Si votre capture est beaucoup plus étroite que 1600 pixels, elle est agrandie à l'export et le texte peut sembler flou ; dans la mesure du possible, faites-la sur un écran haute résolution ou dans une fenêtre plus grande.
Le PNG exporté fait toujours 1600 pixels de large, marge, cadre de fenêtre et capture compris. La hauteur est calculée d'après les proportions de votre capture et la marge choisie. Les captures sont redimensionnées à la largeur de la fenêtre ; une image de faible résolution peut donc paraître un peu floue une fois agrandie.
Pas pour le moment. Sans dégradé, l'arrière-plan est un aplat de couleur sombre, pas un fond transparent. Si vous avez besoin de transparence, exportez d'abord l'image ici, puis supprimez la couleur de fond avec un outil de détourage ou un éditeur d'images.
Seul un cadre de navigateur façon macOS est proposé, en thème sombre ou clair. Les trois boutons en haut à gauche et la barre d'adresse ont un design fixe et ne peuvent pas être remplacés par une fenêtre Windows ou un cadre de téléphone.
Non. L'image est lue et assemblée sur un canvas directement dans votre navigateur, et le PNG téléchargé est généré localement. Votre capture n'est envoyée nulle part : vous pouvez utiliser l'outil en toute confiance, même avec des écrans confidentiels.
Voir cette catégorie: Design & Couleurs
Créez des effets de texte néon lumineux personnalisés et copiez les styles CSS.
Extrayez la couleur exacte de n'importe quel pixel d'une image chargée.
Ajustez et prévisualisez visuellement les dispositions CSS Flexbox et Grid avec animations et copie de code en temps réel.
Générez des combinaisons de couleurs harmonieuses et exportez les valeurs HEX/RGB.
