Faites défiler n'importe quel compte d'actualités ou flux de marque et la plupart des publications partagent une forme : une photo, un titre audacieux, une fine barre d'accent, une date et une poignée dans le coin Ce sont des cartes photo Elles ont l'air conçues car elles sont construites à partir d'une disposition fixe où seuls les mots et l'image changent, c'est aussi pourquoi une équipe peut publier des dizaines par semaine sans que chacun ait l'air différent.
Ce guide couvre ce qui rend une carte lisible à la taille du flux, comment les tailles de texte diminuent sur un téléphone, quelles couleurs passent les directives de contraste, pourquoi les cartes doivent être exportées en PNG, comment adapter une carte carrée pour d'autres plates-formes et où se trouvent les bords de confidentialité. Le Générateur de cartes photo est utilisé pour les pièces étape par étape, et chaque paramètre décrit ci-dessous est celui proposé par l'outil.
tl;dr : Une carte photo est un graphique social réalisé à partir d'un modèle : votre image, un titre et un texte de support placés dans une mise en page fixe Le générateur de cartes photo dispose de huit modèles (journal classique, gras moderne, dernières nouvelles, carte de devis, minimaliste, carte de fonctionnalité, nouvelles de dégradé et citation verticale), 50 polices Google, sélecteurs de couleurs d'accent, d'arrière-plan et de texte, contrôles d'échelle et de position d'image, et un logo en option Chaque carte exporte sous forme de PNG 1080 x 1080, rendu dans votre navigateur Votre image est lue localement et non téléchargée, bien que la charge des polices de Google Fonts. Il est gratuit, pas d'inscription.
Qu'est-ce qu'une carte photo ?
Une carte photo est une image de réseau social carrée ou rectangulaire qui combine une photographie avec un texte superposé ou adjacent, disposé à partir d'un modèle réutilisable Les organes d'information les utilisent pour partager les titres, les marques les utilisent pour les annonces et les créateurs les utilisent pour les citations Le modèle fixe la typographie, l'espacement et les positions ; l'auteur fournit le contenu.
Cette division est tout l'intérêt Un modèle règle les décisions de conception une fois : quelle est la taille du titre par rapport à l'image, où va la date, quelle quantité d'espace entoure le texte. Changer les mots ne peut pas briser ces relations, donc un flux de cartes fabriqué à partir du même modèle se lit comme une publication cohérente.
Quel modèle choisir ?
Choisissez par ce que la carte doit transporter Chaque modèle expose uniquement les champs de texte utilisés par sa mise en page, de sorte que le panneau de contenu change lorsque vous changez.
| Modèle | Disposition | Champs texte | le mieux pour |
|---|---|---|---|
| Journal classique | Grande image, zone de texte ci-dessous | Rubrique, sous-position, date, domaine | Actualités générales et articles de blog |
| Moderne Audacieux | Image moitié supérieure, titre et résumé ci-dessous, corrigé " ; Lire la suite et citer ; bouton | Rubrique, sous-position, date | Annonces |
| Dernières nouvelles | Bande d'en-tête rouge, image, titre, barre de ticker de style défilant | Rubrique, sous-position, date | Mises à jour urgentes |
| Carte De De Devis | Citation sur une photo de fond sombre | Rubrique (la citation), sous-rubrique (l'attribution), date | Tirez des guillemets que vous avez la permission de partager |
| Minimaliste | Image encadrée avec beaucoup d'espace blanc | Rubrique, sous-position, date | Déclarations simples, dates d'événements |
| Carte de fonctionnalité | Image, logo rond superposé, bande de pied de page | Rubrique, sous-position, date, domaine | Articles longs |
| Actualités Gradient | Image à saignement complet, dégradé d'accent, barre de pied de page | Titre, catégorie, date, domaine | Histoires dirigées par l'image |
| Citation verticale | Citation panneau gauche, portrait image droite | Contenu (la citation), auteur, désignation, date, domaine | Citations avec une photo de l'orateur |
La plupart des modèles ont une ligne de date, et plusieurs ajoutent un champ de domaine ou de poignée ; n'importe quel champ peut être effacé Certaines étiquettes sont fixées dans la mise en page, comme " ; BREAKING NEWS" ; sur la bande Breaking News et " ; Read More" ; sur Modern Bold L'emplacement du logo apparaît uniquement lorsque vous ajoutez un logo ; sans une, le modèle masque la zone du logo plutôt que d'afficher un cadre vide.
Quelle doit être la taille du texte sur une carte sociale ?
Plus grand qu'il n'y paraît sur votre moniteur Une carte est conçue à 1080 pixels de large mais vue dans un flux téléphonique à peu près à la largeur de l'écran, et un téléphone typique a environ 390 pixels CSS de large Cela signifie que tout ce qui se trouve sur la carte est affiché à environ 390 /1080 = 36 % de sa taille conçue.
Voici ce que cela fait au texte aux tailles utilisées par les modèles :
| Taille sur la carte 1080 px | Taille approximative dans une alimentation de 390 px de large | lisibilité |
|---|---|---|
| Titre de 64 px | 23 px | Très clair |
| Titre de 48 px | 17 px | Effacer |
| 32 px sous-position ou pied de page | 12 px | Lisible |
| 24 px texte de détail | 9 px | Petit, a besoin d'attention |
| 20 px métadonnées | 7 px | Difficile à lire |
L'arithmétique est simplement la taille × 390 /1080 Pour un titre de 48 pixels, 48.1.0.361 = 17.3 pixels, comparable au texte corporel confortable sur un téléphone À 20 pixels le résultat est d'environ 7, c'est pourquoi les dates et les poignées sur les cartes sont décoratives plutôt qu'essentielles Mettez tout ce qu'un lecteur doit voir dans le titre, pas le pied de page.
Cela fixe également une limite pratique à la longueur Un titre qui s'enroule sur cinq lignes à 48 pixels oblige le modèle à presser l'image ou à déborder Visez un titre d'environ 6 à 12 mots.
Quelles couleurs une carte photo doit-elle utiliser ?
Choisissez des couleurs qui maintiennent le texte lisible par rapport à ce qui se trouve derrière. Les directives d'accessibilité du contenu Web établissent une référence utile : WCAG 2.2 Critère de réussite 1.4.3 demande un rapport de contraste d'au moins 4,5 :1 pour le texte normal et de 3 :1 pour le texte volumineux, que WCAG définit comme au moins 18 points, ou 14 points gras Une image sociale n'est pas une page Web, mais les mêmes seuils décrivent ce que les personnes ayant une vision basse ou un écran sombre peuvent lire.
Le générateur vous donne trois couleurs :
- Accent colore les barres, les pilules, les dégradés et les formes de surbrillance Elle porte la marque.
- fond colore les zones non couvertes par l'image.
- Texte colorie la copie principale sur les modèles qui l'utilisent ; certains modèles définissent du texte blanc sur leurs panneaux d'accent.
| Combinaison | Rapport de contraste | Texte normal (4.5 :1) | Grand texte (3 :1) |
|---|---|---|---|
Proche-noir #111827 sur blanc #ffffff |
Vers 17h7:1 | Passe | Passe |
Blanc sur l'accent rouge par défaut #D9232D |
Environ 5,0:1 | Passe | Passe |
Blanc sur un gris moyen #999999 |
Environ 2,8:1 | Échec | Échec |
Blanc sur un jaune clair #facc15 |
Environ 1,5:1 | Échec | Échec |
Les deux premières lignes sont les valeurs par défaut du générateur' ; s. Vous pouvez vérifier n'importe quelle paire de couleurs de votre propre marque avec le vérificateur de contraste de couleurs, et le guide de contraste de couleurs explique comment le ratio est calculé.
Le texte placé directement sur une photographie n'a pas de rapport de contraste unique, car la photo varie. Les modèles tels que Gradient News gèrent cela avec un dégradé sous le texte et une ombre de texte. Lorsque vous choisissez une photo pour ces modèles, choisissez-en une avec une zone plus sombre ou plus calme où se trouve le titre.
Comment faire une carte photo, étape par étape
- Ouvrez le cartographe photo et choisissez un modèle dans la liste déroulante Modèle Son exemple de texte se charge dans les champs de contenu.
- Remplacez le texte dans chaque champ Appuyez sur Entrée dans une case de titre ou de contenu pour forcer une coupure de ligne là où vous en voulez une.
- Ajoutez votre image principale : cliquez sur la zone de téléchargement pour choisir un fichier, ou collez une URL d'image dans le champ en dessous.
- Ajustez l'image avec le curseur Échelle (0,5 x à 2,0 x) et les curseurs de position X et Y (chacun -200 à 200 pixels) jusqu'à ce que le sujet se trouve là où le modèle l'encadre.
- Ajoutez éventuellement un logo de la même manière Une image de logo carré correspond le mieux aux emplacements de logo circulaire et carré.
- Ouvrez le déroulant Police, recherchez ou filtrez par catégorie (sans empattement, empattement, affichage, écriture manuscrite ou monospace) et choisissez une police.
- Définissez les couleurs d'accent, d'arrière-plan et de texte avec les sélecteurs de couleurs.
- Cliquez sur Télécharger PNG. Le fichier est enregistré sous
photocard-<template>-<timestamp>.png1, donc les exportations répétées ne s’écrasent jamais.
Vos paramètres, texte et image sont enregistrés dans le navigateur au fur et à mesure de votre fonctionnement, donc le rechargement de la page ramène la carte. La réinitialisation les efface et restaure le modèle Classic.
Pourquoi les cartes se téléchargent-elles en PNG ?
Parce que les cartes sont pour la plupart de gros textes et de couleur plate, et que le contenu se compresse mieux et semble plus propre comme PNG que comme JPEG. JPEG' ; la compression avec perte fonctionne en blocs de 8 x 8 pixels et élimine les détails fins, qui autour des bords nets des lettres apparaissent sous forme de légers halos et taches, souvent appelés sonnerie. PNG stocke chaque pixel exactement en utilisant la compression sans perte définie dans le Spécification W3C PNG« Donc un titre reste net ».
| format | Compression | Texte net | Zones de couleur plates | Photographies |
|---|---|---|---|---|
| png | sans perte | Croustillant | Petit et exact | Gros fichiers |
| jpeg | lâche | Halos sur les bords | Peut montrer des bandes et des taches | Petits fichiers |
De toute façon, la plupart des plateformes réencodent les téléchargements. En partant d'un PNG propre, on obtient à leur encodeur la meilleure entrée possible Si un PNG avec une grande photo est trop grand pour une limite de téléchargement, le Guide de compression d'images couvre comment le rétrécir.
Comment utilisez-vous une carte carrée sur d'autres plateformes ?
Chaque modèle exporte à 1080 x 1080, un carré 1 :1. c'est la taille de flux carrée standard sur Instagram et Facebook, et il s'affiche sans recadrer sur la plupart des flux. D'autres placements veulent des formes différentes.
| Destination | Taille recherchée | D'un carré 1080 |
|---|---|---|
| Flux Instagram ou Facebook | 1080 x 1080 | Utiliser tel quel |
| Flux de portraits Instagram | 1080 x 1350 | Ajoutez de l'espace au-dessus et en dessous avec un mat |
| Image de style lien LinkedIn ou X | 1200 x 627 ou 1600 x 900 | Culpable sur une large bande ou placer sur une large matte |
| Miniature YouTube | 1280 x 720 | Cultivez jusqu'à 16 :9, puis agrandissez légèrement |
| Histoire d'Instagram | 1080x1920 | Placez sur une grande matte |
Le recadrage perd une partie de la carte ; un mat garde tout pour une vignette YouTube, recadrer un carré de 1080 à 16 :9 garde une bande de 1080 x 608 et supprime 236 pixels du haut et du bas Agrandir cette bande à 1280 x 720 est une échelle de 1280 /1080 = 1,19, un léger agrandissement Gardez le titre près du centre vertical de la carte si vous planifiez cela, pour que la récolte ne le coupe pas recadrage d'images sur les réseaux sociaux fait la récolte avec les préréglages de plate-forme, et le guide de redimensionnement d'image explique ce que l'élargissement fait à la qualité.
Pour conserver la carte carrée entière sur une toile plus haute ou plus large, placez-la sur un fond avec le Générateur mat.
Vos photos sont-elles téléchargées ?
Votre photo n'est pas téléchargée sur Toolz Lorsque vous choisissez un fichier, le navigateur le lit en mémoire sous forme d'URL de données, la carte est disposée dans la page et le téléchargement est rendu localement par la bibliothèque html2canvas, qui redessine la page' ; s HTML sur un canevas. Il existe cependant trois détails de réseau et de stockage qui méritent d'être connus :
- Les polices proviennent de Google Fonts. La liste des polices est chargée à partir de
fonts.googleapis.com(traduction), votre navigateur fait donc des demandes à Google pour les fichiers de polices, que Google décrit dans son FAQ sur la confidentialité de Google Fonts. Le texte et l'image que vous ajoutez ne font pas partie de ces requêtes Hors ligne, les polices qui n'étaient pas déjà chargées retombent dans une police par défaut. - Les URL d'image sont extraites de leur hôte. Si vous collez une URL d'image au lieu de télécharger un fichier, votre navigateur charge l'image à partir de cette adresse, comme il le ferait pour n'importe quelle page Web.
- Le travail est enregistré dans votre navigateur. Votre texte, vos couleurs et votre image sont enregistrés dans le navigateur' ; s stockage local pour qu'ils survivent à un rechargement Sur un ordinateur partagé, appuyez sur Réinitialiser lorsque vous avez fini de les effacer.
Problèmes courants et comment les résoudre
La carte téléchargée affiche une police différente de l'aperçu. La police n'avait pas fini de charger lorsque vous avez cliqué sur Télécharger PNG, l'exportation est donc retombée à une police par défaut Attendez une seconde ou deux après avoir choisi une police, puis exportez à nouveau.
Une image collée en URL est absente du téléchargement. Le rendu d'une image distante dans un canevas téléchargeable nécessite que l'hôte d'image autorise une utilisation d'origine croisée avec les en-têtes CORS, une limitation du documentation html2canvas notes. De nombreux sites ne les envoient pas Téléchargez l'image et téléchargez-la plutôt sous forme de fichier.
L'image est coupée ou a un espace vide. Utilisez le curseur Échelle et les curseurs de position X et Y. Une mise à l'échelle inférieure à 1,0 x peut révéler l'arrière-plan du modèle autour de la photo ; la mise à l'échelle au-dessus cultive plus étroitement.
Le texte déborde de sa zone. Le titre est trop long pour le modèle Raccourcissez-le, ou passez à un modèle qui donne au texte plus de la carte.
La carte se réinitialise après un rechargement, ou les grandes images ne persistent pas. Les navigateurs limitent le stockage local à quelques mégaoctets par site, et une grande photo stockée sous forme d'URL de données peut la dépasser La carte exporte toujours ; elle risque tout simplement de ne pas survivre à un rechargement Redimensionner de très grandes photos avant de les ajouter.
Les crochets angulaires dans le texte semblent faux. Le texte est inséré dans le modèle sous forme de balisage, donc la ligne casse le travail, ce qui signifie des caractères tels que < peut être lu comme le début d'une balise Évitez les crochets d'angle dans le texte de la carte.
Conseils pour les cartes que les gens lisent
- Diriger avec une idée par carte Si elle a besoin de deux titres, elle a besoin de deux cartes.
- Recadrez la photo pour que son sujet ne se trouve pas sous la zone de titre de votre modèle.
- Gardez votre marque constante : le même modèle, la même police et la même couleur d'accent sur une série.
- Ajoutez du texte alternatif lorsque vous publiez L'image est une image de mots à un lecteur d'écran, alors écrivez le titre et les détails clés dans la plate-forme et le champ de texte alternatif n°39.
- Ne publiez que des citations et des photos que vous avez le droit d'utiliser, et attribuez les citations avec précision.
Des alternatives à un générateur de cartes modèles
- Outils de conception générale tels que Canva, Figma ou Adobe Express offrent beaucoup plus de modèles, de positionnement gratuit et de bibliothèques d'équipe, généralement avec un compte.
- Salle de presse et plateformes de planification sociale incluez parfois des modèles de cartes de marque liés à un flux de travail de publication.
- Générateurs basés sur le code cela restitue automatiquement HTML aux images sur les sites d'une combinaison de serveur qui produisent une carte pour chaque article.
Un outil de modèle de navigateur s'adapte au juste milieu : rapide, pas de compte, sortie cohérente, et vos images restent sur votre machine Pour les étapes connexes avant de publier, le Filigrane d'image ajoute un logo ou un crédit à une photo, et le hub d'outils de médias sociaux répertorie l'ensemble complet.
