Générateur de maquettes pour appareils

Générateur de maquettes pour appareils

Le Générateur de maquettes pour appareils place une capture d'écran dans un vrai cadre d'appareil : un iPhone avec Dynamic Island, un téléphone Android, un iPad, un MacBook Pro, une fenêtre de navigateur avec sa barre d'onglets et sa barre d'adresse, ou un moniteur de bureau sur un pied. Chaque cadre est dessiné aux vraies proportions d'écran de cet appareil, donc ce que vous exportez est ce que la capture donnerait réellement sur le matériel. Le cadre est peint sur un canvas dans l'onglet de votre propre navigateur, ce qui signifie qu'une capture d'une app non publiée ou d'un tableau de bord interne ne quitte jamais votre machine.

Les trois cadres les plus utilisés

Un cadre est un raccourci pour le lecteur : il lui dit d'un coup d'œil s'il regarde une app téléphone, une page web ou un outil de bureau, avant même d'avoir lu un seul mot dans la capture.

L'indicateur de recadrage : ce que la plupart des outils de maquette omettent

L'écran d'un appareil a une forme fixe. Un écran iPhone fait 1179 par 2556, soit environ 9:19,5, et presque rien de ce que vous capturez n'a exactement ce format. La plupart des générateurs de maquettes agrandissent silencieusement votre image jusqu'à couvrir l'écran et jettent ce qui dépasse, si bien que vous ne découvrez l'absence du bas de votre tableau de tarifs qu'après l'avoir publié.

Cet outil le mesure à la place. En mode Remplir l'écran, l'indicateur sous les boutons d'ajustement indique le pourcentage exact de votre capture que le cadre masque, et la barre passe du vert au rouge à mesure que ce nombre monte. S'il est trop élevé, vous avez deux issues :

• Déplacer. Le curseur fait glisser la fenêtre visible le long de l'axe qui déborde, pour conserver l'en-tête, le milieu ou le pied de page au lieu d'accepter un recadrage centré.
• Tout faire tenir. La capture est réduite jusqu'à ce que chaque pixel tienne dans l'écran, et les bandes restantes sont remplies d'une couleur que vous choisissez. Rien n'est recadré, au prix de bandes visibles en haut et en bas, ou à gauche et à droite.

Une bonne règle : en dessous d'environ 8 % recadré, c'est invisible pour un lecteur ; de 8 % à 25 %, c'est acceptable si vous avez déplacé pour garder le sujet ; au-delà de 25 %, vous devriez soit reprendre la capture au ratio de l'appareil, soit passer à Tout faire tenir.

Quel cadre, et à quelle résolution

Les captures à ces tailles en pixels ou plus grandes restent nettes à chaque taille d'export. Les plus petites sont agrandies, et la première chose qui cède est l'anticrénelage du petit texte dans la capture.

Comment utiliser le Générateur de maquettes pour appareils : étape par étape

1. Ajoutez votre capture d'écran : déposez un PNG ou un JPG sur le panneau d'import, cliquez pour parcourir, ou appuyez sur Ctrl+V pour en coller une directement depuis le presse-papiers.
2. Choisissez un cadre d'appareil : iPhone, Android, iPad, MacBook, Navigateur ou Moniteur. Les cadres téléphone et tablette passent aussi du portrait au paysage.
3. Vérifiez l'indicateur de recadrage : si trop de contenu est masqué, faites glisser le curseur de déplacement ou passez à Tout faire tenir pour ne rien perdre.
4. Stylisez le cadre : réglez la couleur du cadre, l'arrière-plan, la marge, l'ombre et le reflet. Sur le cadre navigateur, saisissez votre propre titre d'onglet et votre adresse.
5. Exportez : choisissez une taille d'export, puis Télécharger PNG pour enregistrer la maquette ou Copier l'image pour la coller dans une publication.

Conseils pratiques

• Prenez la capture au ratio de l'appareil quand vous le pouvez. Une fenêtre de navigateur redimensionnée à 1179 par 2556 avant la capture fait lire 0 % à l'indicateur de recadrage et rend la maquette pixel-perfect.
• Utilisez le cadre navigateur quand l'URL compte. Saisir votre propre domaine dans la barre d'adresse place votre marque dans l'image sans ajouter de légende.
• Gardez la marge entre 6 % et 12 %. Moins, et l'appareil touche le bord de la publication ; plus, et l'écran devient illisible dans un fil.
• Accordez la couleur du cadre à la capture. Noir sidéral sous une capture en mode sombre, Argent ou Titane sous une claire ; l'interface du navigateur suit automatiquement le même choix.
• Baissez le reflet pour les écrans très textuels. Un éclat discret se lit comme du verre, un fort se lit comme une photo de stock et masque votre texte.
• Exportez en transparent pour les diapositives. L'arrière-plan AUCUN vous donne un appareil flottant avec son ombre, prêt à poser sur n'importe quel support ou section héro.

Confidentialité

Tout se passe dans l'onglet du navigateur via l'API canvas HTML5. Votre capture est lue depuis une URL d'objet locale, dessinée dans le cadre, et encodée en PNG par le navigateur lui-même. Aucune image n'est envoyée, stockée ni transmise, et une fois la page chargée l'outil continue de fonctionner sans connexion réseau.

Questions fréquentes

Ma capture d'écran est-elle envoyée sur un serveur ?

Non. Les cadres d'appareils sont dessinés avec l'API canvas HTML5 dans l'onglet de votre propre navigateur, et votre capture est lue depuis une URL d'objet locale. Rien n'est envoyé nulle part, donc les maquettes d'apps non publiées, de tableaux de bord internes ou de travaux clients restent sur votre machine. Une fois la page chargée, l'outil continue de fonctionner sans aucune connexion réseau.

Quels cadres d'appareils sont disponibles ?

Six : un iPhone avec Dynamic Island, un téléphone Android avec une caméra en poinçon, un iPad Pro, un MacBook Pro avec l'encoche et le socle, une fenêtre de navigateur avec une barre d'onglets et une barre d'adresse, et un moniteur de bureau sur un pied. Chaque cadre utilise les vraies proportions d'écran de cet appareil, donc une maquette faite ici correspond à ce que la capture donnerait sur le matériel.

Ma capture n'a pas la même forme que l'écran de l'appareil. Que se passe-t-il ?

C'est précisément le rôle de l'indicateur de recadrage. Remplir l'écran agrandit la capture jusqu'à couvrir tout l'écran, ce qui coupe ce qui dépasse, et l'indicateur vous donne le pourcentage exact masqué. Le curseur de déplacement fait ensuite glisser la fenêtre visible le long de l'axe recadré pour conserver la partie importante. Tout faire tenir réduit la capture jusqu'à ce qu'elle tienne entièrement dans l'écran et remplisse les bandes restantes avec une couleur que vous choisissez, donc rien n'est perdu.

Quelle résolution doit avoir ma capture d'écran ?

Adaptez-la à l'appareil que vous encadrez : 1179 par 2556 pour l'iPhone, 1080 par 2400 pour le téléphone Android, 1668 par 2388 pour l'iPad, 3024 par 1964 pour le MacBook, 1440 par 900 pour la fenêtre de navigateur et 2560 par 1440 pour le moniteur. Tout fichier de cette taille ou plus grand reste net. Les captures plus petites fonctionnent aussi, mais elles sont agrandies et les bords mous deviennent visibles autour du texte.

Puis-je exporter l'appareil sur un fond transparent ?

Oui. Choisissez la pastille AUCUN et la marge autour de l'appareil est exportée en alpha plutôt qu'en couleur, tandis que le cadre, l'écran et l'ombre portée sont toujours dessinés. Télécharger PNG conserve cette transparence, ce qu'il vous faut lorsque la maquette va sur une diapositive, une section héro ou une page dont le propre fond doit transparaître.

Pourquoi le cadre navigateur passe-t-il en sombre ?

L'interface du navigateur suit la couleur de cadre que vous choisissez. Choisissez Noir sidéral et la barre d'onglets, la barre d'outils et la barre d'adresse passent en thème sombre pour que la maquette corresponde à une capture en mode sombre ; n'importe laquelle des couleurs de cadre plus claires donne le thème clair. Le titre d'onglet et l'adresse sont de simples champs de texte, donc vous pouvez mettre votre propre nom de produit et votre domaine dans l'image.

Outils d'image:

• Ajouter une ligne à l'image
• Ajouter du texte à l'image
• ⬛ Calculateur de Rapport d’Aspect Nouveau
• Rogner une image en cercle Nouveau
• Créateur de Collages Populaire
• Générateur de points à relier Populaire
• Visionneuse et Suppresseur de Données EXIF Nouveau
• Retourner un GIF
• Retourner l'image
• Créateur de GIF
• Outil de pixelisation d'image
• Compresseur d'images
• Outil de recadrage d'image
• Améliorateur d'image
• Redimensionneur d'Image
• Rotateur d'images
• Diviseur d'image
• Convertisseur d'Image en Art ASCII Nouveau
• Traceur d’image en SVG Nouveau
• Générateur d’Images Placeholder Lorem Picsum Nouveau
• OCR / Image en Texte Populaire
• Calculateur de Taille d'Impression et Résolution (DPI/PPI)
• Générateur d'image à coins arrondis Nouveau
• Embellisseur de captures d'écran Nouveau
• Générateur de maquettes pour appareils Nouveau
• Ajouter une ombre portée à une image Nouveau
• Ajouter une bordure à une image Nouveau