HTML en image : réglages et meilleurs résultats

À quoi sert HTML en image ?

HTML en image transforme une page web enregistrée sur votre ordinateur en image PNG nette. Il est pensé pour les cartes de partage, les aperçus de lien et les visuels de lancement que vous concevez en HTML. Chaque titre, image et bouton de la page devient un calque que vous pouvez déplacer, redimensionner, faire pivoter ou estomper avant l’export : vous adaptez la page à une publication carrée ou à une story sans toucher au code. Dans l’application, l’outil s’appelle HTML to Image.

Il traite un fichier à la fois, dans un Studio. Le fichier HTML d’origine n’est jamais modifié, et rien ne quitte votre ordinateur.

01Étape 1 : Ouvrez l’outil et ajoutez vos fichiers HTML

Cliquez sur Tools dans la barre latérale, ouvrez l’onglet Web & Ebook puis cliquez sur HTML to Image dans la section Convert. Vous pouvez aussi taper « html to image » dans le champ de recherche en haut.

Déposez vos fichiers .html ou .htm sur la file d’attente, ou cliquez dessus pour les choisir. Gardez les images, les polices et les feuilles de style de la page dans le même dossier que le fichier HTML, ou dans un sous-dossier, pour que Hangar les trouve.

Le panneau de droite n’a aucun réglage. HTML to Image traite un fichier à la fois dans son Studio, et c’est de là que vous exportez : Open Studio, en bas du panneau, l’ouvre, tout comme Open selected file in Studio.

1234

1. 1Adjust
2. 2One file at a time
3. 3Open selected file in Studio
4. 4Edit & export per file

04Étape 4 : Composez la page

Cliquez sur un élément du plan de travail, ou sur sa ligne dans Layers, pour le sélectionner. Maintenez ⌘ en cliquant pour sélectionner le groupe qui le contient, ou cliquez sur Parent quand ce bouton apparaît au-dessus de la sélection.

• Déplacer : faites-le glisser. Il s’aimante aux bords et au centre du plan de travail. Maintenez Option pour le déplacer librement. Les flèches le décalent de 1 pixel, ou de 10 avec Maj.
• Redimensionner : faites glisser un coin pour garder ses proportions, ou maintenez Maj pour l’étirer. Les poignées latérales l’étirent dans une seule direction.
• Faire pivoter : faites glisser la poignée de rotation, la petite flèche courbe sur la sélection. Maintenez Maj pour tourner par pas de 15°.
• Valeurs exactes : sous Transform, tapez X, Y, W, H, Rotation et Opacity. Cliquez sur Reset pour remettre l’élément à sa place d’origine.

Redimensionner met l’élément à l’échelle comme une image : le texte grandit ou rétrécit, mais ne passe pas à la ligne autrement, et le reste de la page ne bouge pas autour. Utilisez les flèches Undo et Redo en haut, ou ⌘+Z et Maj+⌘+Z.

Pour regarder de plus près, utilisez les boutons de zoom en bas, ⌘ avec la molette, ou ⌘++ et ⌘+-. Cliquez sur Fit ou appuyez sur ⌘+0 pour voir tout le plan de travail. Maintenez Espace et faites glisser pour vous déplacer.

123456

1. 1Selected layer
2. 2Artboard
3. 3Background
4. 4Transform
5. 5Export @2×
6. 6Size and export size

05Étape 5 : Exportez, puis vérifiez le résultat

Cliquez sur Export @2× en haut. Le bouton affiche Capturing… pendant que Hangar crée l’image. Le PNG fait le double de la taille du plan de travail ; la ligne en bas à gauche du plan de travail indique les deux, par exemple « 1200 × 630 » et « @2× 2400 × 1260 ».

Une fois terminé, une carte affiche « Exported 1 image » avec le poids du fichier (Size). Cliquez sur Open folder pour le voir. L’image est enregistrée dans le dossier de sortie de votre espace de travail, dans un dossier html-shot avec un sous-dossier à la date du jour, comme 10-15. Son nom commence par celui du fichier HTML, suivi d’un long code, par exemple juniper-autumn-card-019a3f2c-….png. Chaque export crée un nouveau fichier : rien n’est écrasé. Voir Où sont enregistrés vos fichiers.

Le Studio reste ouvert : vous pouvez changer la taille ou la mise en page et exporter à nouveau. Quand vous le fermez, avec le x, la touche Échap ou un clic à l’extérieur, tous vos déplacements et retouches sur ce fichier disparaissent. Exportez d’abord.

1234

1. 1Exported 1 image
2. 2Size
3. 3Open folder
4. 4Dismiss

Tous les réglages, et quand les changer

Tous les réglages se trouvent dans le Studio. Ils s’appliquent au fichier ouvert et ne sont pas conservés après sa fermeture.

Artboard

La taille de l’image. Le PNG fait le double.

• PlageOG, Square, Story, Custom, Fit content
• Par défautOG (1200 × 630)

W et H (Custom)

La largeur et la hauteur de votre choix. Le plan de travail change pendant la saisie.

• Plage1 à 8192
• Par défaut1200 × 630 au départ

Fit content

Ajuste le plan de travail à tout le contenu de la page, pour que rien ne soit coupé.

• Par défautDésactivé

Background

Désactivé, le Studio affiche un damier derrière la page. Activé, il remplit le plan de travail avec la couleur choisie. Dans les deux cas, il remplace la couleur de fond principale de la page.

• Par défautDésactivé

Background color

La couleur de remplissage quand Background est activé.

• PlageN’importe quelle couleur
• Par défautPresque noir (#16181d)

X et Y

La position du coin supérieur gauche de l’élément sélectionné sur le plan de travail.

• PlagePixels
• Par défautLa position de l’élément sur la page

W et H (Transform)

Met à l’échelle l’élément sélectionné. Le texte est agrandi ou réduit, pas remis en forme.

• PlagePixels
• Par défautLa taille propre de l’élément

Rotation

Fait pivoter l’élément sélectionné.

• PlageDegrés
• Par défaut0

Opacity

Estompe l’élément sélectionné.

• Plage0 à 100
• Par défaut100

Reset

Remet l’élément sélectionné à sa place d’origine sur la page.

Comment obtenir le meilleur résultat ?

• Concevez la page pour la taille exportée. La page est mise en page à la largeur du plan de travail. Une page pensée pour un grand écran peut paraître à l’étroit en Square ou en Story : vérifiez-la dans ces formats et déplacez ou redimensionnez les éléments si besoin.
• Gardez tout à côté du fichier HTML. Placez les images, les feuilles de style et les fichiers de polices dans le même dossier que la page, ou dans un sous-dossier, et faites-y référence avec un chemin relatif comme images/loaf.jpg.
• Utilisez des polices que vous avez. Les polices installées sur votre Mac et les fichiers de polices enregistrés à côté de la page fonctionnent. Les polices liées depuis le web ne se chargent pas.
• Faites une page qui tient sans scripts. Les scripts ne s’exécutent jamais : la page doit paraître terminée d’elle-même.
• Réglez le fond vous-même. Activez Background et choisissez la couleur de votre page, pour que l’image ait la couleur attendue. Les éléments qui ont leur propre couleur de fond, comme un bouton ou une carte, la gardent.
• Vérifiez la ligne de taille en bas à gauche du plan de travail avant d’exporter, pour obtenir un PNG à la taille voulue.

Pourquoi un résultat déçoit

• Un message orangé indique que Hangar n’a pas trouvé une ressource ou une feuille de style. La page fait référence à un fichier absent de ce chemin sur votre ordinateur. Vérifiez le nom et le dossier, puis fermez le Studio et rouvrez le fichier. Le message n’indique que le premier fichier manquant.
• Des images, des polices ou des styles d’un site web manquent. HTML en image ne charge jamais rien depuis le web, et ne le signale pas. Téléchargez ces fichiers à côté de la page et faites-y référence à cet endroit.
• Des images ou des polices citées dans une feuille de style manquent, alors qu’elles sont sur votre ordinateur. Quand une feuille de style se trouve dans un sous-dossier, ses chemins sont lus depuis le dossier du fichier HTML, pas depuis celui de la feuille de style. Placez la feuille de style à côté du fichier HTML, ou écrivez les chemins tels que les voit le fichier HTML.
• La couleur de fond de la page a disparu. Le réglage Background remplace le fond principal de la page. Activez-le et choisissez la même couleur.
• Une partie de la page est coupée. Seul ce qui est sur le plan de travail est exporté. Choisissez Fit content, une taille plus grande, ou déplacez et redimensionnez les éléments pour qu’ils tiennent.
• Un élément dessiné par un script manque. Les scripts ne s’exécutent jamais. Enregistrez la page avec ce contenu déjà écrit dans le HTML.
• Le fichier ne s’ouvre pas et Hangar indique qu’il n’a pas pu charger le HTML. Le fichier doit être un fichier texte enregistré en UTF-8, la norme des pages web, et il doit toujours être dans la file d’attente. Enregistrez-le à nouveau en UTF-8 depuis votre éditeur.
• L’export a échoué parce que l’espace de travail n’a pas de dossier de sortie. Définissez-en un pour votre espace de travail, puis exportez à nouveau. Voir Espaces de travail.

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

Limites

• HTML en image fonctionne uniquement sur Mac.
• HTML en image accepte les fichiers .html et .htm, un à la fois. Il n’y a pas d’export par lots.
• Le plan de travail peut mesurer de 1 à 8192 pixels de côté. Le PNG fait toujours le double.
• Le résultat est un PNG fixe. Les animations et les vidéos de la page ne sont pas capturées.
• Les scripts ne s’exécutent jamais, et rien n’est chargé depuis le web.
• La liste Layers affiche jusqu’à 120 éléments.
• Les retouches dans le Studio ne sont pas enregistrées. Fermer le Studio les efface, et le fichier HTML n’est jamais modifié.
• Tout se passe sur votre ordinateur. Rien n’est envoyé en ligne.