Scorri qualsiasi account di notizie o feed di marca e la maggior parte dei post condivide una forma: una foto, un titolo in grassetto, una barra di accento sottile, una data e una maniglia nell'angolo Queste sono schede foto Sembrano progettate perché sono costruite da un layout fisso dove cambiano solo le parole e l'immagine, motivo per cui un team può pubblicare decine a settimana senza che ognuna sembri diversa.
Questa guida copre ciò che rende una scheda leggibile alle dimensioni del feed, come le dimensioni del testo si riducono su un telefono, quali colori passano le linee guida di contrasto, perché le schede dovrebbero essere esportate come PNG, come adattare una scheda quadrata per altre piattaforme e dove si trovano i bordi della privacy Generatore di schede fotografiche viene utilizzato per le parti passo passo e ogni impostazione descritta di seguito è quella offerta dallo strumento.
tl; dr: Una scheda fotografica è un grafico sociale fatto da un modello: la tua immagine, un titolo e un testo di supporto inseriti in un layout fisso Il generatore di schede fotografiche ha otto modelli (giornale classico, grassetto moderno, ultime notizie, carta di preventivo, minimalista, carta caratteristica, notizie sfumate e citazione verticale), 50 caratteri Google, rilevatori di colori di accento, sfondo e testo, scala delle immagini e controlli di posizione e un logo opzionale Ogni carta esporta come 1080 x 1080 PNG, renderizzato nel tuo browser La tua immagine viene letta localmente e non caricata, sebbene i caratteri vengano caricati da Google Fonts. È gratuito, senza registrazione.
Che cosa è una scheda fotografica?
Una scheda fotografica è un'immagine di social media quadrata o rettangolare che combina una fotografia con testo sovrapposto o adiacente, disposto da un modello riutilizzabile I notiziari li usano per condividere titoli, i marchi li usano per gli annunci e i creatori li usano per le citazioni Il modello corregge la tipografia, la spaziatura e le posizioni; l'autore fornisce il contenuto.
Quella divisione è il punto intero Un modello regola le decisioni di progettazione una volta: quanto è grande il titolo rispetto all'immagine, dove va la data, quanto spazio circonda il testo Cambiare le parole non può rompere quelle relazioni, quindi un feed di carte fatte dallo stesso modello si legge come una pubblicazione coerente.
Quale modello scegliere?
Scegli in base a ciò che la scheda deve trasportare Ogni modello espone solo i campi di testo utilizzati dal suo layout, quindi il pannello del contenuto cambia quando si passa.
| Template | Disposizione | Campi testo | Meglio per |
|---|---|---|---|
| Giornale Classico | Grande immagine, area di testo qui sotto | Intestazione, sottovoce, data, dominio | Notizie generali e post sul blog |
| Audace moderno | Immagine metà superiore, titolo e riepilogo sotto, fisso & quot;Leggi di più& quot; pulsante | Rubrica, sottorubrica, data | Annunci |
| Ultime notizie | Striscia di intestazione rossa, immagine, titolo, barra di ticker in stile scorrimento | Rubrica, sottorubrica, data | Aggiornamenti time-sensitive |
| Preventivo Card | Citazione su una foto di sfondo oscurata | Intestazione (la citazione), sottovoce (l'attribuzione), data | Tira citazioni che hai il permesso di condividere |
| Minimalista | Immagine incorniciata con molto spazio bianco | Rubrica, sottorubrica, data | Semplici dichiarazioni, date degli eventi |
| Scheda caratteristica | Immagine, logo rotondo sovrapposto, striscia a piè di pagina | Intestazione, sottovoce, data, dominio | Articoli di lunga durata |
| Notizie Gradienti | Immagine in piena emorragia, gradiente di accento, barra a piè di pagina | Intestazione, categoria, data, dominio | Storie guidate da immagini |
| Citazione verticale | Pannello delle citazioni a sinistra, immagine ritratto a destra | Contenuto (la citazione), autore, designazione, data, dominio | Citazioni con una foto del relatore |
La maggior parte dei modelli ha una riga di data e molti aggiungono un dominio o un campo di handle; qualsiasi campo può essere cancellato Alcune etichette sono fisse nel layout, come & quot;BREAKING NEWS" sulla striscia Breaking News e & quot;Read More" su Modern Bold Lo slot del logo viene visualizzato solo quando si aggiunge un logo; senza uno, il modello nasconde l'area del logo anziché mostrare una cornice vuota.
Quanto dovrebbe essere grande il testo su una social card?
Più grande di quanto sembri sul tuo monitor Una scheda è progettata a 1080 pixel di larghezza ma visualizzata in un feed telefonico all'incirca alla larghezza dello schermo, e un telefono tipico è largo circa 390 pixel CSS Ciò significa che tutto sulla scheda è mostrato a circa 390 /1080 = 36% delle sue dimensioni progettate.
Ecco cosa fa per inviare testo alle dimensioni utilizzate dai modelli:
| Dimensione sulla scheda 1080 px | Dimensione approssimativa in un'alimentazione larga 390 px | leggibilità |
|---|---|---|
| Titolo 64 px | 23 px | Molto chiaro |
| Titolo 48 px | 17 px | Chiaro |
| 32 px sottovoce o piè di pagina | 12 px | Leggibile |
| testo dettagliato 24 px | 9 px | Piccolo, ha bisogno di attenzione |
| 20 metadati px | 7 px | Difficile da leggere |
L'aritmetica è semplicemente la dimensione × 390 /1080 Per un titolo da 48 pixel, 48 × 0,361 = 17,3 pixel, paragonabile al comodo corpo del testo su un telefono A 20 pixel il risultato è circa 7, motivo per cui le date e le maniglie sulle carte sono decorative piuttosto che essenziali Metti tutto ciò che un lettore deve vedere nel titolo, non il piè di pagina.
Questo stabilisce anche un limite pratico alla lunghezza Un titolo che avvolge cinque linee a 48 pixel costringe il modello a spremere l'immagine o a traboccare Punta a un titolo di circa 6-12 parole.
Quali colori deve utilizzare una scheda fotografica?
Scegli i colori che mantengono il testo leggibile rispetto a ciò che si trova dietro di esso Le Linee guida per l'accessibilità dei contenuti Web stabiliscono un utile punto di riferimento: Criterio di successo delle WCAG 2.2 1.4.3 chiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo di grandi dimensioni, che le WCAG definiscono come almeno 18 punti, o 14 punti in grassetto Un'immagine social non è una pagina web, ma le stesse soglie descrivono ciò che le persone con visione bassa o schermo fioco possono leggere.
Il generatore ti dà tre colori:
- Accento barre di colori, pillole, gradienti e forme di evidenziazione Porta il marchio.
- fondo colora le aree non coperte dall'immagine.
- Testo colora la copia principale sui modelli che la utilizzano; alcuni modelli impostano testo bianco sui pannelli degli accenti.
| Combinazione | Rapporto di contrasto | Testo normale (4,5:1) | Testo grande (3:1) |
|---|---|---|---|
Quasi nero #111827 su bianco #ffffff |
Circa 17:7:1 | Passaggio | Passaggio |
Bianco sull'accento rosso predefinito #D9232D |
Circa 5,0:1 | Passaggio | Passaggio |
Bianco su un grigio medio #999999 |
Circa 2,8:1 | Fallire | Fallire |
Bianco su un giallo chiaro #facc15 |
Circa 1,5:1 | Fallire | Fallire |
Le prime due righe sono il generatore's predefiniti È possibile controllare qualsiasi coppia dei colori del proprio marchio con il controllore di contrasto colore, e il guida al contrasto dei colori spiega come viene calcolato il rapporto.
Il testo posizionato direttamente sopra una fotografia non ha un unico rapporto di contrasto, perché la foto varia I modelli come Gradient News gestiscono quello con un gradiente sotto il testo e un'ombra di testo Quando scegli una foto per quei modelli, scegline una con un'area più scura o più calma dove si trova il titolo.
Come fare una scheda fotografica, passo dopo passo
- Apri il foto card maker e scegli un modello dal menu a discesa Template Il suo testo di esempio viene caricato nei campi del contenuto.
- Sostituire il testo in ogni campo Premere Invio all'interno di un'intestazione o di una casella di contenuto per forzare un'interruzione di riga dove si desidera.
- Aggiungi la tua immagine principale: fai clic sull'area di caricamento per scegliere un file o incolla un URL di immagine nel campo sottostante.
- Regolare l'immagine con il cursore Scala (da 0,5x a 2,0x) e i cursori di posizione X e Y (ciascuno da -200 a 200 pixel) finché il soggetto non si trova dove il modello lo inquadra.
- Facoltativamente aggiungere un logo allo stesso modo Un'immagine del logo quadrata si adatta meglio alle slot del logo circolare e quadrato.
- Apri il menu a discesa Carattere, cerca o filtra per categoria (senza serif, serif, display, scrittura a mano o monospace) e scegli un carattere.
- Imposta l'accento, lo sfondo e i colori del testo con i selettori di colore.
- Fare clic su Scarica PNG Il file viene salvato come
photocard-<template>-<timestamp>.png, quindi le esportazioni ripetute non si sovrascrivono mai a vicenda.
Le impostazioni, il testo e l'immagine vengono salvati nel browser mentre lavori, quindi ricaricare la pagina riporta indietro la scheda Reset li cancella e ripristina il modello Classic.
Perché le schede vengono scaricate come PNG?
Perché le carte sono per lo più di grande testo e colore piatto, e che il contenuto comprime meglio e sembra più pulito come PNG che come JPEG. JPEG's compressione con perdita funziona in blocchi di 8 x 8 pixel e scarta dettaglio fine, che intorno ai bordi taglienti delle lettere si mostra come deboli aloni e macchioline, spesso chiamato squillo PNG memorizza ogni pixel esattamente utilizzando la compressione senza perdita definita nel Specifica PNG W3C, quindi un titolo rimane nitido.
| formato | Compressione | Testo affilato | Aree di colore piatte | Fotografie |
|---|---|---|---|---|
| png | senza perdita | Croccante | Piccolo ed esatto | File di grandi dimensioni |
| JPEG | impertinente | Aureole attorno ai bordi | Può mostrare bande e macchioline | File piccoli |
La maggior parte delle piattaforme ricodifica comunque i caricamenti Partendo da un PNG pulito dà al proprio encoder il miglior input possibile Se un PNG con una foto di grandi dimensioni è troppo grande per un limite di upload, il Guida alla compressione dell'immagine copre come restringerlo.
Come si utilizza una carta quadrata su altre piattaforme?
Ogni modello esporta a 1080 x 1080, un quadrato 1:1. cioè la dimensione standard del feed quadrato su Instagram e Facebook, e viene visualizzato senza ritagli sulla maggior parte dei feed Altri posizionamenti vogliono forme diverse.
| Destinazione | Voluto taglia | Da un quadrato 1080 |
|---|---|---|
| Instagram o feed di Facebook | 1080x1080 | Utilizzare così com'è |
| Feed ritratto Instagram | 1080x1350 | Aggiungi spazio sopra e sotto con un mascherino |
| Immagine in stile linkedIn o X | 1200 x 627 o 1600 x 900 | Ritagliare su una striscia larga o posizionare su un ampio opaco |
| Miniatura YouTube | 1280x720 | Ritaglia a 16:9, poi ingrandisci leggermente |
| Storia Instagram | 1080x1920 | Posizionare su un alto opaco |
Il ritaglio perde parte della carta; un mascherino la mantiene tutta Per una miniatura di YouTube, ritagliare un quadrato da 1080 a 16:9 mantiene una striscia 1080 x 608 e rimuove 236 pixel dall'alto e dal basso Ingrandire quella striscia a 1280 x 720 è una scala di 1280 /1080 = 1,19, un ingrandimento lieve Mantenere il titolo vicino al centro verticale della carta se si pianifica questo, in modo che il ritaglio non lo tagli attraverso Il ritaglia immagine sui social media esegue il ritaglio con i preset della piattaforma e il guida ridimensionamento immagine spiega cosa fa l'allargamento alla qualità.
Per mantenere invece l'intera carta quadrata su una tela più alta o più larga, mettila su uno sfondo con il Generatore Matte.
Le tue foto vengono caricate?
La tua foto non viene caricata su Toolz Quando scegli un file, il browser lo legge in memoria come URL di dati, la scheda è disposta nella pagina e il download viene eseguito localmente dalla libreria html2canvas, che ridisegna la pagina' s HTML su una tela Ci sono tre dettagli di rete e archiviazione che vale la pena conoscere, però:
- I caratteri provengono da Google Fonts. L'elenco dei caratteri viene caricato da
fonts.googleapis.com, quindi il tuo browser effettua richieste a Google per i file di caratteri, che Google descrive nel suo Domande frequenti sulla privacy di Google Fonts. Il testo e l'immagine che aggiungi non fanno parte di tali richieste Offline, i caratteri che non erano già stati caricati ricadono su un carattere tipografico predefinito. - Gli URL delle immagini vengono recuperati dal loro host. Se incolli un URL di immagine invece di caricare un file, il tuo browser carica l'immagine da quell'indirizzo, come farebbe per qualsiasi pagina web.
- Il lavoro viene salvato nel browser. Il testo, i colori e l'immagine vengono salvati nel browser's archiviazione locale in modo che sopravvivano a un ricaricamento Su un computer condiviso, premere Reset quando si è fatto per cancellarli.
Problemi comuni e come risolverli
La scheda scaricata mostra un carattere diverso dall'anteprima. Il font non aveva finito di caricarsi quando si è cliccato Scarica PNG, quindi l'esportazione è ricaduta su un carattere tipografico predefinito Attendere un secondo o due dopo aver scelto un font, quindi esportare di nuovo.
Manca un'immagine incollata come URL nel download. Il rendering di un'immagine remota in un'area scaricabile richiede che l'host dell'immagine consenta l'uso multiorigine con le intestazioni CORS, una limitazione documentazione html2canvas note Molti siti non li inviano Scarica l'immagine e caricala invece come file.
L'immagine è tagliata o ha spazio vuoto. Usa il cursore Scala e i cursori di posizione X e Y. Il ridimensionamento sotto 1,0x può rivelare lo sfondo del modello intorno alla foto; il ridimensionamento sopra di esso ritaglia più stretto.
Il testo trabocca nella sua area. Il titolo è troppo lungo per il modello Accorcialo o passa a un modello che fornisce al testo più della scheda.
La scheda si ripristina dopo un ricaricamento, o le immagini di grandi dimensioni non persistono. I browser limitano l'archiviazione locale a pochi megabyte per sito e una foto di grandi dimensioni memorizzata come URL di dati può superarla La scheda esporta ancora; potrebbe semplicemente non sopravvivere a una ricarica Ridimensiona foto molto grandi prima di aggiungerle.
Le parentesi angolari nel testo sembrano sbagliate. Il testo viene inserito nel modello come markup in modo che le interruzioni di riga funzionino, il che significa caratteri come < può essere letto come l'inizio di un tag Evita le parentesi angolari nel testo della carta.
Consigli per le carte che le persone leggono
- Conduci con un'idea per carta Se ha bisogno di due titoli, ha bisogno di due carte.
- Ritaglia la foto in modo che il suo soggetto non si trovi sotto l'area del titolo del tuo modello.
- Mantieni costante il tuo marchio: lo stesso modello, carattere e colore di accento in una serie.
- Aggiungi testo alternativo quando pubblichi L'immagine è un'immagine di parole per uno screen reader, quindi scrivi il titolo e i dettagli chiave nel campo di testo alternativo di platform's.
- Pubblica solo citazioni e foto che hai il diritto di utilizzare e attribuisce le citazioni in modo accurato.
Alternative a un generatore di schede modello
- Strumenti generali di progettazione come Canva, Figma o Adobe Express offrono molti più modelli, posizionamento gratuito e librerie di team, solitamente con un account.
- Newsroom e piattaforme di social scheduling a volte includere modelli di carte di marca legati a un flusso di lavoro di pubblicazione.
- Generatori basati su codice che renderizzano HTML in immagini su un server si adattano ai siti che producono automaticamente una scheda per ogni articolo.
Uno strumento modello browser si adatta alla via di mezzo: veloce, nessun account, output coerente e le tue immagini rimangono sulla tua macchina Per i passaggi correlati prima di pubblicare, il Filigrana immagine aggiunge un logo o un credito a una foto, e il hub degli strumenti dei social media elenca il set completo.
