Ce générateur de mockups d'appareils est-il gratuit ?

Oui. Tous les appareils, couleurs, angles et tailles d'export sont gratuits, sans inscription et sans filigrane.

Puis-je faire un mockup iPhone ou iPad avec ?

Vous pouvez faire le mockup d'un smartphone ou d'une tablette moderne qui ressemble aux modèles populaires d'aujourd'hui, ce dont la plupart des gens ont besoin pour l'aperçu d'une application ou d'un site. Les modèles sont génériques et dessinés en code ; ce ne sont pas des images officielles de produits Apple, et cet outil n'est pas affilié à Apple.

Puis-je faire un mockup de site web ou de navigateur ?

Oui. Choisissez Navigateur pour placer une capture de votre site dans une fenêtre de navigateur de bureau avec barre d'adresse — saisissez votre propre domaine et choisissez une barre claire ou sombre — ou choisissez Écran pour l'afficher sur un grand écran sur pied.

Comment obtenir un mockup en PNG transparent ?

Réglez le fond sur Transparent et le format sur PNG (ou WebP), puis téléchargez. L'ombre est conservée sous forme de pixels doux et semi-transparents, elle se fond donc avec ce sur quoi vous placez le mockup.

Comment faire pivoter l'appareil ?

Utilisez les curseurs X, Y et Z ou saisissez un angle exact de −180° à 180°. Vous pouvez aussi faire glisser l'appareil dans l'aperçu — maintenez Shift pour le faire pivoter — ou cliquer sur l'aperçu et utiliser les touches fléchées. Les préréglages passent directement aux vues courantes, et Réinitialiser revient à l'angle par défaut.

Quelle résolution puis-je exporter ?

1080, 2048 ou 4096 pixels sur le grand côté, ou une taille personnalisée jusqu'à 8192 pixels, en 1:1, 4:5, 16:9, 9:16 ou 4:3. Le mockup est de nouveau rendu à cette taille : il est net et non agrandi.

Ma capture est coupée sur l'écran. Comment l'afficher en entier ?

Passez l'Ajustement à l'écran de Remplir à Ajuster, qui montre l'image entière avec des bandes de la couleur de votre choix. Avec Remplir, les boutons d'alignement déterminent si le haut, le milieu ou le bas d'une capture haute est conservé.

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

Non. La scène 3D tourne dans votre navigateur avec WebGL, et l'image ne quitte jamais votre appareil.

Il est indiqué que WebGL n'est pas disponible. Que faire ?

La vue 3D nécessite WebGL. Activez l'accélération matérielle dans les paramètres de votre navigateur, mettez à jour vos pilotes graphiques ou essayez un autre navigateur ; toute version récente de Chrome, Edge, Firefox ou Safari le prend en charge.

Générateur de mockup 3D : smartphone et PC

Votre capture sur un appareil 3D réaliste, sous n'importe quel angle

Déposez une capture d'écran ou un design : il apparaît sur l'écran d'un smartphone, d'une tablette, d'un ordinateur portable, d'un écran de bureau ou d'une fenêtre de navigateur en 3D. Faites pivoter l'appareil sur les axes X, Y et Z avec des curseurs, des angles saisis, les touches fléchées ou en le faisant glisser ; choisissez une couleur d'appareil, un fond et une ombre douce ; puis exportez un PNG, JPEG ou WebP net jusqu'à 8192 pixels — avec un fond transparent si vous voulez le placer sur votre propre diapositive ou landing page. Les appareils sont modélisés en code et rendus avec WebGL dans votre navigateur : rien n'est envoyé et il n'y a pas de filigrane.

Comment créer un mockup d'appareil

1Déposez une capture sur la page, choisissez un fichier ou collez-la avec Ctrl/⌘ + V. En attendant, un écran d'application d'exemple est affiché.
2Choisissez Smartphone, Tablette, Portable, Écran ou Navigateur. Choisissez une couleur — ou, pour la fenêtre de navigateur, une barre claire ou sombre et l'adresse qui y figure. Smartphones et tablettes peuvent passer en paysage ; l'écran du portable s'ouvre à n'importe quel angle.
3Choisissez une vue dans la barre au-dessus de l'aperçu — Hero ¾, Face, Incliné gauche/droite, Isométrique ou À plat — puis affinez dans l'onglet Vue, ou faites glisser l'appareil dans l'aperçu.
4Réglez le fond (transparent, uni, dégradé ou un flou de votre propre capture), l'ombre et la direction de la lumière.
5Choisissez le format d'image, la taille et le format de fichier, puis téléchargez l'image ou copiez-la dans le presse-papiers.

Mockups 3D de smartphone, tablette, portable, écran et navigateur

Les modèles de mockup plats n'offrent qu'un seul angle fixe. Ici, l'appareil est un vrai modèle 3D : vous pouvez le montrer de face pour une capture façon App Store, sous un angle de trois quarts spectaculaire pour une image hero, ou posé à plat pour un post sur les réseaux — à partir de la même image, en quelques secondes.

Le mockup de smartphone a un écran moderne bord à bord avec une découpe de caméra en forme de pilule, un cadre en métal poli et une triple caméra au dos. Le mockup de tablette a des bordures fines et régulières dans le style des tablettes actuelles de type iPad, et le mockup d'ordinateur portable a un clavier complet, un pavé tactile et un écran qui s'ouvre de fermé à complètement incliné. Ce sont des designs génériques qui ressemblent aux appareils populaires d'aujourd'hui — utiles partout où l'on cherche un mockup iPhone, iPad ou MacBook — mais ce ne sont pas des images officielles de produits, et cet outil n'est affilié ni à Apple ni à aucun autre fabricant.

Mockups de sites web dans une fenêtre de navigateur

Pour un site ou une application web, choisissez Navigateur : votre capture remplit la zone de page d'une fenêtre de navigateur de bureau épurée, avec des boutons de fenêtre et une barre d'adresse affichant le domaine que vous saisissez. La barre existe en clair et en sombre pour s'accorder à votre design, et la fenêtre peut flotter sous n'importe quel angle comme les appareils — ou se présenter de face pour un mockup de site plat et net.

Vous préférez du vrai matériel ? Écran place la page sur un grand écran aux bordures fines, posé sur un pied en aluminium, comme un site vu sur un moniteur de studio. Avec Remplir et Haut, une longue capture pleine page affiche son premier écran, exactement comme un visiteur le voit.

Commandes

Rotation X, Y et Z: X bascule l'appareil vers vous ou loin de vous, Y le tourne à gauche et à droite, Z le fait pivoter dans le plan de l'image. Chacun va de −180° à 180° et accepte des valeurs saisies. Dans l'aperçu, faites glisser pour tourner sur X et Y, maintenez <kbd>Shift</kbd> en faisant glisser pour pivoter sur Z, ou sélectionnez l'aperçu et utilisez les touches fléchées (<kbd>Shift</kbd> pour des pas de 15°), <kbd>Q</kbd>/<kbd>E</kbd> pour Z et <kbd>R</kbd> pour réinitialiser.
Zoom et champ de vision: Le zoom change la part du cadre occupée par l'appareil. Le champ de vision règle la perspective : un grand angle exagère la profondeur comme un appareil photo de téléphone tenu tout près, tandis qu'un angle très étroit paraît presque orthographique, comme un rendu produit ou une illustration isométrique.
Ajustement à l'écran: Remplir couvre tout l'écran et rogne le surplus — ancrez-le en haut pour montrer le début d'une longue capture pleine page. Ajuster montre l'image entière avec des bandes de la couleur de votre choix, et Étirer la déforme à la forme de l'écran.
Reflet de la vitre: Un léger reflet de l'éclairage de studio sur la vitre, qui fait paraître l'écran comme du verre plutôt qu'un autocollant. Désactivez-le pour des couleurs d'écran parfaitement plates.
Fond et ombre: Exportez sur un fond transparent, une couleur unie, un dégradé à deux couleurs ou un flou doux de votre propre capture. L'ombre peut se poser au sol sous l'appareil, idéal pour un portable sur un bureau, ou sur le mur derrière, ce qui donne à un smartphone une ombre portée flottante.
Éclairage: L'appareil est éclairé par un environnement de studio doux, si bien que le métal et le verre captent des reflets réalistes. L'angle de la lumière fait tourner les lumières et les reflets autour de l'appareil ; l'intensité rend toute la scène plus claire ou plus sombre.

Tailles et formats d'export

L'image est de nouveau rendue à la taille exportée — 1080, 2048 ou 4096 pixels sur le grand côté, ou toute taille personnalisée de 256 à 8192 — en carré 1:1, portrait 4:5, paysage 16:9, story 9:16 ou 4:3. Comme il s'agit d'un nouveau rendu et non d'un aperçu agrandi, les contours restent nets à toutes les tailles, quelle que soit la taille de votre écran.

PNG est sans perte et conserve la transparence, le bon choix pour un mockup que vous placerez sur un site, une diapositive ou un fichier de design. WebP conserve aussi la transparence et est beaucoup plus léger. JPEG n'a pas de transparence : un fond transparent est rempli de blanc. Copier place un PNG dans le presse-papiers, prêt à coller dans Figma, Keynote, Slack ou un document.

Conseils pour de meilleurs mockups

Exportez la capture à la résolution de l'appareil — une capture de smartphone d'environ 1179 × 2556 ou une capture de bureau en 2560 × 1600 — pour que l'écran reste net, même dans un mockup 4K.
Un angle de trois quarts avec une lumière du même côté que la rotation paraît le plus naturel ; une vue de face convient mieux aux fiches des magasins d'applications.
Pour le hero d'une landing page, utilisez un PNG transparent et laissez apparaître le fond de votre propre page.
Besoin de recadrer ou redimensionner la capture d'abord ? Utilisez l'outil de recadrage ou l'outil de redimensionnement d'image, et le redimensionneur d'images pour réseaux sociaux pour adapter le mockup fini à chaque plateforme.

Un générateur de mockup gratuit qui garde vos designs privés

Les écrans d'applications pas encore sorties et les travaux clients ne devraient pas être envoyés sur le serveur de quelqu'un d'autre. Ici, votre capture est lue, dessinée et rendue entièrement sur votre appareil avec WebGL ; elle n'est jamais envoyée nulle part. Pas de compte, pas de filigrane et pas de limite au nombre de mockups. Vos réglages — appareil, angle, fond et options d'export — sont mémorisés dans ce navigateur ; l'image, non.

Questions fréquentes

Ce générateur de mockups d'appareils est-il gratuit ?: Oui. Tous les appareils, couleurs, angles et tailles d'export sont gratuits, sans inscription et sans filigrane.
Puis-je faire un mockup iPhone ou iPad avec ?: Vous pouvez faire le mockup d'un smartphone ou d'une tablette moderne qui ressemble aux modèles populaires d'aujourd'hui, ce dont la plupart des gens ont besoin pour l'aperçu d'une application ou d'un site. Les modèles sont génériques et dessinés en code ; ce ne sont pas des images officielles de produits Apple, et cet outil n'est pas affilié à Apple.
Puis-je faire un mockup de site web ou de navigateur ?: Oui. Choisissez Navigateur pour placer une capture de votre site dans une fenêtre de navigateur de bureau avec barre d'adresse — saisissez votre propre domaine et choisissez une barre claire ou sombre — ou choisissez Écran pour l'afficher sur un grand écran sur pied.
Comment obtenir un mockup en PNG transparent ?: Réglez le fond sur Transparent et le format sur PNG (ou WebP), puis téléchargez. L'ombre est conservée sous forme de pixels doux et semi-transparents, elle se fond donc avec ce sur quoi vous placez le mockup.
Comment faire pivoter l'appareil ?: Utilisez les curseurs X, Y et Z ou saisissez un angle exact de −180° à 180°. Vous pouvez aussi faire glisser l'appareil dans l'aperçu — maintenez Shift pour le faire pivoter — ou cliquer sur l'aperçu et utiliser les touches fléchées. Les préréglages passent directement aux vues courantes, et Réinitialiser revient à l'angle par défaut.
Quelle résolution puis-je exporter ?: 1080, 2048 ou 4096 pixels sur le grand côté, ou une taille personnalisée jusqu'à 8192 pixels, en 1:1, 4:5, 16:9, 9:16 ou 4:3. Le mockup est de nouveau rendu à cette taille : il est net et non agrandi.
Ma capture est coupée sur l'écran. Comment l'afficher en entier ?: Passez l'Ajustement à l'écran de Remplir à Ajuster, qui montre l'image entière avec des bandes de la couleur de votre choix. Avec Remplir, les boutons d'alignement déterminent si le haut, le milieu ou le bas d'une capture haute est conservé.
Ma capture est-elle envoyée sur un serveur ?: Non. La scène 3D tourne dans votre navigateur avec WebGL, et l'image ne quitte jamais votre appareil.
Il est indiqué que WebGL n'est pas disponible. Que faire ?: La vue 3D nécessite WebGL. Activez l'accélération matérielle dans les paramètres de votre navigateur, mettez à jour vos pilotes graphiques ou essayez un autre navigateur ; toute version récente de Chrome, Edge, Firefox ou Safari le prend en charge.

Générateur de mockups d'appareils 3D