Mockup d’appareil : réglages et meilleurs résultats

À quoi sert l’outil Mockup d’appareil ?

L’outil Mockup d’appareil place vos captures d’écran et vos enregistrements d’écran sur l’écran d’un ordinateur portable, d’une tablette ou d’un téléphone, prêts pour un site web, une fiche d’app store ou une publication sur les réseaux sociaux. Dans l’application, il s’appelle Device Mockup. L’appareil peut apparaître seul, sur le fond de votre choix, ou dans l’une des 21 pièces mises en scène, appelées scènes. Tout se passe sur votre propre ordinateur.

Device Mockup s’ouvre sous forme de Studio : un aperçu en direct au centre, les réglages à droite et le bandeau de vos fichiers en bas. Vous pouvez définir un même style pour tous les fichiers et les exporter tous d’un coup. Cliquez sur Undo en haut pour annuler un changement.

02Étape 2 : Choisissez une scène ou un appareil

Ouvrez l’onglet Device. Deux façons de présenter votre capture :

• Une scène : une pièce mise en scène, comme un bureau sous la lumière du matin ou une table de café, avec l’appareil déjà posé et éclairé. Utilisez les flèches à côté de Browse all scenes pour passer à la suivante, ou cliquez sur Browse all scenes pour voir votre capture dans toutes les pièces. Filtrez par Laptop, Tablet ou Phone, puis cliquez sur une pièce pour l’utiliser. Dans une scène, la pièce et l’appareil restent fixes ; seul votre écran change.
• Un appareil seul : sous Standalone device, choisissez Laptops, Tablets ou Phones et un modèle. Choisissez ensuite sa Finish (sa couleur) et sa View (son angle), par exemple Front, Left ou Right.

Pour un appareil seul, Composition propose des mises en page rapides : Centered, Compact, Left, Right, Raised et Close-up. Sous Placement, réglez Device size, choisissez une position dans la grille, ou affinez Horizontal position et Vertical position. Vous pouvez aussi faire glisser l’appareil dans l’aperçu.

1234567

1. 1Canvas format
2. 2Device tab
3. 3Browse all scenes
4. 4Standalone device
5. 5All files
6. 6Export 3 files
7. 7Your files

123

1. 1Device type
2. 2In use
3. 3Close

06Étape 6 : Coupez une vidéo et choisissez sa couverture

Quand une vidéo est sélectionnée, une barre sous l’aperçu permet de la lire (ou appuyez sur Espace). Faites glisser les poignées à chaque bout pour couper le début et la fin. La ligne à côté indique la durée conservée et le temps approximatif de l’export.

Placez la tête de lecture sur un bon moment et cliquez sur Set cover frame. Cette image devient la vignette du fichier MP4. Sans elle, c’est la première image conservée qui sert. Les fichiers WebM n’ont pas d’image de couverture. Le découpage et la couverture se règlent vidéo par vidéo.

12345

1. 1Trim start
2. 2Set cover frame
3. 3Kept length
4. 4WebM, transparent
5. 5Frame rate

07Étape 7 : Exportez, puis vérifiez le résultat

En bas de l’onglet Backgrounds, ouvrez Export settings. Pour les images, choisissez PNG ou JPEG. Pour les vidéos, choisissez MP4 (se lit partout, avec le son d’origine) ou WebM, transparent (garde un fond transparent, pour les pages web et les logiciels de montage), ainsi qu’un Frame rate (cadence d’images).

Cliquez ensuite sur Export en haut à droite. Avec plusieurs fichiers, le bouton affiche par exemple Export 3 files, et montre la progression pendant le traitement.

À la fin de l’export, une carte indique le nombre de fichiers exportés, une vignette, le poids total (Size) et la durée (Took). Cliquez sur Open folder pour les voir. Ils sont enregistrés dans le dossier de sortie de votre espace de travail, dans un dossier device_mockup avec un sous-dossier à la date du jour, comme 10-15. Chaque fichier reçoit -mockup à la fin de son nom, par exemple northwind-workspace-mockup.png. Voir Où sont enregistrés vos fichiers.

1234

1. 1Exported 3 files
2. 2Took
3. 3Open folder
4. 4Dismiss

Tous les réglages, et quand les changer

Certains réglages n’apparaissent que s’ils s’appliquent : Finish, View, Composition, Placement et Device shadow sont masqués dans les scènes, et Content, Screen fit et les réglages de fenêtre ne concernent que les ordinateurs portables.

Scene

Montre votre capture dans une pièce mise en scène, avec l’appareil déjà en place. La pièce et l’appareil restent fixes.

• Plage21 pièces
• Par défautAucune

Standalone device

Le modèle d’appareil, montré seul sur votre fond.

• PlageLaptops, Tablets, Phones
• Par défautMacBook Pro 16 pouces

Finish

La couleur de l’appareil.

• PlageSelon le modèle
• Par défautSilver

View

L’angle sous lequel on voit l’appareil.

• PlageFront, Left, Right et d’autres, selon le modèle
• Par défautFront

Composition

Des mises en page rapides pour la taille et la position de l’appareil.

• PlageCentered, Compact, Left, Right, Raised, Close-up
• Par défautCentered

Device size

La taille de l’appareil sur le canevas.

• Plage30 % à 250 %
• Par défaut100 %

Horizontal position, Vertical position

L’emplacement de l’appareil sur le canevas. La grille règle les deux à la fois.

• Plage0 % à 100 %
• Par défaut50 %

Canvas format

La taille de l’image ou de la vidéo finale.

• PlageTailles prêtes à l’emploi, Fit to device, ou 16 à 8192 px par côté
• Par défautPresentation (1600 × 1200)

Content

Sur un portable, si votre capture remplit l’écran ou s’affiche comme une fenêtre sur un fond d’écran.

• PlageFull screen, Window
• Par défautWindow

Screen fit

Si votre capture couvre sa zone, au prix d’un peu de bord, ou s’affiche en entier sans déformation.

• PlageFill screen, Fit entire image
• Par défautFit entire image

Window size

La part de l’écran occupée par la fenêtre.

• Plage12 % à 94 %
• Par défaut78 %

Keep below the camera

Garde votre capture sous l’encoche de la caméra, en haut de l’écran du portable.

• Par défautDésactivé

Add window controls

Ajoute en haut de la fenêtre une barre de titre Mac avec ses trois boutons.

• Par défautDésactivé

Keep image proportions

Donne à la fenêtre les proportions de votre capture. Désactivez-le pour régler vous-même Window height.

• Par défautActivé

Window shadow

Une ombre douce sous la fenêtre.

• Par défautActivé

Corner radius

L’arrondi des coins de la fenêtre.

• Plage0 % à 12 %
• Par défaut2 %

Content zoom

Zoome dans votre capture quand elle remplit l’écran. Utilisez la grille pour choisir la partie visible.

• Plage100 % à 400 %
• Par défaut100 %

Scene background

Ce qui entoure l’appareil. None, puis Use transparent scene, le rend transparent.

• PlageWallpaper, Gradient, Solid, None
• Par défautFond d’écran Limestone Sun

Device screen wallpaper

Ce qui s’affiche sur l’écran d’un portable autour d’une fenêtre.

• PlageWallpaper, Gradient, Solid
• Par défautFond d’écran Dune Quiet

Image fitting

Si un fond d’écran ou votre propre image couvre la zone ou s’affiche en entier.

• PlageFill, Fit entire image
• Par défautFill

Show shadow

Une ombre sous l’appareil.

• Par défautActivé

Softness

Le flou de l’ombre de l’appareil.

• Plage0 à 120 px
• Par défaut48 px

Opacity

L’intensité de l’ombre de l’appareil.

• Plage0 % à 100 %
• Par défaut35 %

Images

Le format des images (le titre devient Export quand tous vos fichiers sont des images). Le PNG garde la transparence. Le JPEG donne des fichiers plus légers, avec un fond blanc là où il serait transparent.

• PlagePNG, JPEG
• Par défautPNG

JPEG quality

Plus haut garde plus de détails ; plus bas donne des fichiers plus légers.

• Plage50 % à 100 %
• Par défaut95 %

Videos

Le format des vidéos (le titre devient Export quand tous vos fichiers sont des vidéos). Le MP4 se lit partout et garde le son. WebM, transparent garde un fond transparent et le son.

• PlageMP4, WebM, transparent
• Par défautMP4

Frame rate

Match source (affiché avec la cadence de la vidéo, comme Source, 60 fps) garde toutes les images. 30 fps exporte plus vite et donne un fichier plus léger pour les enregistrements à haute cadence.

• PlageMatch source, 30 fps
• Par défautMatch source

Comment obtenir le meilleur résultat ?

• Utilisez une capture nette, en pleine taille. Une capture à la pleine résolution de votre écran reste nette sur un grand appareil. Une capture petite ou redimensionnée paraît floue une fois étirée sur l’écran.
• Adaptez la capture à l’appareil. Une capture de téléphone va sur un téléphone, une capture d’ordinateur sur un portable. Si les formats diffèrent, utilisez Fit entire image ou une Window sur un portable, ou recadrez avec Content zoom.
• Choisissez le canevas selon l’endroit où vous publiez. Utilisez les tailles App Store, Google Play ou Social pour ne pas avoir à recadrer ensuite.
• Essayez les scènes pour un rendu en situation. Browse all scenes montre votre propre capture dans chaque pièce, pour comparer avant de choisir.
• Donnez un style propre à un fichier si besoin. Passez le menu au-dessus de l’aperçu sur This file avant de modifier un fichier qui demande un autre appareil ou un autre fond.
• Pour un site web ou un logiciel de montage, gardez la transparence. Choisissez None, cliquez sur Use transparent scene, et exportez en PNG ou en WebM, transparent.

Pourquoi un résultat déçoit

• Une partie de ma capture est coupée. Fill screen couvre tout l’écran : une capture d’un autre format perd ses bords. Sur un portable, passez à Fit entire image. Sur les téléphones et les tablettes, la capture remplit toujours l’écran : ramenez la partie importante dans le champ avec la grille ou Edit screen framing.
• Le fond est devenu blanc. Le JPEG et le MP4 ne gèrent pas la transparence. Exportez en PNG pour les images ou en WebM, transparent pour les vidéos.
• Je ne peux pas déplacer ni redimensionner l’appareil. Dans une scène, l’appareil est fixé dans la pièce. Choisissez un Standalone device pour le placer vous-même.
• Les réglages d’ombre de l’appareil ont disparu. Les scènes ont leur propre éclairage : Device shadow n’apparaît que pour les appareils seuls.
• Le fond d’écran choisi ne s’affiche pas. Un contenu en plein écran le recouvre. Cliquez sur Show as a window pour placer votre capture dans une fenêtre au-dessus du fond d’écran.
• Mon GIF animé ne bouge pas. Les GIF et WebP animés sont utilisés comme une seule image fixe. Utilisez un fichier vidéo pour avoir du mouvement.
• La capture paraît floue. Elle est plus petite que l’écran de l’appareil. Utilisez une capture plus grande, ou réduisez la taille de l’appareil ou du canevas.
• L’export vidéo prend du temps. Chaque image est dessinée dans l’appareil. Coupez la vidéo au passage utile, ou choisissez 30 fps pour les enregistrements à haute cadence.

Pour les autres erreurs, voir Un fichier a échoué : que vérifier.

Limites

• Appareils : MacBook Air 13 et 15 pouces, MacBook Pro 16 pouces, iPad Pro 11 et 13 pouces, iPhone 17 Pro et iPhone 17 Pro Max, plus 21 scènes.
• Le canevas peut mesurer de 16 à 8192 pixels de côté.
• Chaque fichier reçoit un seul appareil. Pour montrer plusieurs appareils ensemble, exportez-les séparément et assemblez-les dans une autre app.
• Les GIF et WebP animés sont utilisés comme une seule image fixe.
• Les réglages restent tant que Hangar est ouvert et sont réinitialisés quand vous le quittez.
• Tout se passe sur votre ordinateur. Rien n’est envoyé en ligne.