Desplácese por cualquier cuenta de noticias o feed de marca y la mayoría de las publicaciones comparten una forma: una foto, un titular en negrita, una barra de acento delgada, una fecha y un identificador en la esquina. Estas son tarjetas fotográficas. Parecen diseñados porque están construidos a partir de un diseño fijo donde sólo cambian las palabras y la imagen, razón por la cual un equipo puede publicar docenas por semana sin que cada uno luzca diferente.
Esta guía cubre qué hace que una tarjeta sea legible en tamaño de feed, cómo los tamaños de texto se reducen en un teléfono, qué colores pasan pautas de contraste, por qué las tarjetas deben exportarse como PNG, cómo adaptar una tarjeta cuadrada para otras plataformas y dónde están los bordes de privacidad. El generador de tarjetas de fotos se utiliza para las piezas paso a paso y cada configuración que se describe a continuación es una que ofrece la herramienta.
TL;Dr: Una tarjeta fotográfica es un gráfico social hecho a partir de una plantilla: su imagen, un titular y texto de soporte colocados en un diseño fijo. El generador de tarjetas fotográficas tiene ocho plantillas (periódico clásico, negrita moderna, noticias de última hora, tarjeta de cotización, minimalista, tarjeta de características, noticias degradadas y cotización vertical), 50 fuentes de Google, acento, fondo y selección de color de texto, escala de imagen y controles de posición, y un logotipo opcional. Cada tarjeta se exporta como un PNG de 1080 x 1080, representado en su navegador. Su imagen se lee localmente y no se carga, aunque las fuentes se cargan desde Google Fonts. Es gratis, no hay registro.
¿Qué es una tarjeta fotográfica?
Una tarjeta fotográfica es una imagen cuadrada o rectangular de una red social que combina una fotografía con texto superpuesto o adyacente, dispuesto a partir de una plantilla reutilizable. Los medios de comunicación los utilizan para compartir titulares, las marcas los utilizan para anuncios y los creadores los utilizan para citas. La plantilla fija la tipografía, el espaciado y las posiciones; el autor proporciona el contenido.
Esa división es el punto central. Una plantilla resuelve las decisiones de diseño una vez: qué tan grande es el titular en relación con la imagen, adónde va la fecha, cuánto espacio rodea el texto. Cambiar las palabras no puede romper esas relaciones, por lo que una fuente de tarjetas hechas a partir de la misma plantilla se lee como una publicación consistente.
¿Qué plantilla deberías elegir?
Elige por lo que debe llevar la tarjeta. Cada plantilla expone solo los campos de texto que utiliza su diseño, por lo que el panel de contenido cambia cuando cambias.
| Plantilla | Diseño | Campos de texto | mejor para |
|---|---|---|---|
| Periódico clásico | Imagen grande, área de texto a continuación | Título, subtítulo, fecha, dominio | Noticias generales y publicaciones de blogs |
| Negrita moderna | La mitad superior de la imagen, el titular y el resumen a continuación, se corrigieron "Leer más" botón | Título, subtítulo, fecha | Anuncios |
| Noticias de última hora | Tira de encabezado roja, imagen, titular, barra de ticker de estilo desplazable | Título, subtítulo, fecha | Actualizaciones urgentes |
| Tarjeta de cotización | Cita sobre una foto de fondo oscurecida | Título (la cita), subtítulo (la atribución), fecha | Extraiga cotizaciones que tenga permiso para compartir |
| Minimalista | Imagen enmarcada con mucho espacio en blanco | Título, subtítulo, fecha | Declaraciones simples, fechas de eventos |
| Tarjeta destacada | Imagen, logotipo redondo superpuesto, tira de pie de página | Título, subtítulo, fecha, dominio | Artículos extensos |
| Noticias de gradiente | Imagen de sangrado completo, gradiente de acento, barra de pie de página | Encabezado, categoría, fecha, dominio | Historias basadas en imágenes |
| Cita vertical | Panel de cotización a la izquierda, imagen de retrato a la derecha | Contenido (la cita), autor, designación, fecha, dominio | Citas con foto del orador |
La mayoría de las plantillas tienen una línea de fecha y varias agregan un campo de dominio o identificador; cualquier campo se puede borrar. Algunas etiquetas están fijadas en el diseño, como " NOTICIAS DE ÚLTIMA HORA" en la tira de Noticias de última hora y "Leer más" en negrita moderna. La ranura del logotipo aparece solo cuando se agrega un logotipo; sin uno, la plantilla oculta el área del logotipo en lugar de mostrar un marco vacío.
¿Qué tamaño debe tener el texto en una tarjeta social?
Más grande de lo que parece en su monitor. Una tarjeta está diseñada con 1080 píxeles de ancho, pero se ve en una señal telefónica aproximadamente al ancho de la pantalla, y un teléfono típico tiene alrededor de 390 píxeles CSS de ancho. Eso significa que todo lo que hay en la tarjeta se muestra aproximadamente a 390 / 1080 = 36% de su tamaño diseñado.
Esto es lo que eso hace con el texto en los tamaños que usan las plantillas:
| Tamaño en la tarjeta de 1080 px | Tamaño aproximado en una alimentación de 390 px de ancho | interés |
|---|---|---|
| Titular de 64 páginas | 23 px | Muy claro |
| Titular de 48 páginas | 17 px | Claro |
| 32 px subtítulo o pie de página | 12 px | Legible |
| Texto detallado de 24 páginas | 9 páginas | Pequeño, necesita atención |
| 20 metadatos px | 7 páginas | Difícil de leer |
La aritmética es simplemente tamaño × 390 / 1080. Para un titular de 48 píxeles, 48 × 0,361 = 17,3 píxeles, comparable al cómodo cuerpo de texto de un teléfono. A 20 píxeles el resultado es de unos 7, razón por la cual las fechas y los tiradores de las tarjetas son más decorativos que esenciales. Coloque cualquier cosa que el lector deba ver en el titular, no en el pie de página.
Esto también establece un límite práctico de longitud. Un título que se ajusta a cinco líneas a 48 píxeles obliga a la plantilla a apretar la imagen o desbordarla. Apunte a un titular de aproximadamente 6 a 12 palabras.
¿Qué colores debe utilizar una tarjeta fotográfica?
Elija colores que mantengan el texto legible frente a lo que hay detrás. Las Pautas de Accesibilidad al Contenido Web establecen un punto de referencia útil: WCAG 2.2 Criterio de éxito 1.4.3 pide una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande, que WCAG define como al menos 18 puntos o 14 puntos en negrita. Una imagen social no es una página web, pero los mismos umbrales describen lo que pueden leer las personas con baja visión o pantalla tenue.
El generador te da tres colores:
- Acento barras de colores, pastillas, degradados y formas resaltadas. Lleva la marca.
- conocimientos colorea las áreas no cubiertas por la imagen.
- Texto colorea la copia principal en las plantillas que la utilizan; Algunas plantillas colocan texto blanco sobre sus paneles de acento.
| Combinación | Relación de contraste | Texto normal (4.5:1) | Texto grande (3:1) |
|---|---|---|---|
Casi negro #111827 en blanco #ffffff |
Aproximativ 17,7:1 | Pasar | Pasar |
Blanco en el acento rojo predeterminado #D9232D |
Aproximadamente 5.0:1 | Pasar | Pasar |
Blanco sobre un gris medio #999999 |
Aproximadamente 2,8:1 | Fallo | Fallo |
Blanco sobre amarillo claro #facc15 |
Aproximadamente 1,5:1 | Fallo | Fallo |
Las dos primeras filas son el generador 's predeterminado. Puedes comprobar cualquier par de colores de tu propia marca con el comprobador de contraste de color, y el guía de contraste de color explica cómo se calcula la relación.
El texto colocado directamente sobre una fotografía no tiene una relación de contraste única, porque la foto varía. Plantillas como Gradient News manejan eso con un degradado debajo del texto y una sombra de texto. Cuando elija una foto para esas plantillas, elija una con un área más oscura o tranquila donde se encuentre el titular.
Cómo hacer una tarjeta fotográfica, paso a paso
- Abre el fabricante de tarjetas fotográficas y elija una plantilla del menú desplegable Plantilla. Su texto de muestra se carga en los campos de contenido.
- Reemplace el texto en cada campo. Presione Ingresar dentro de un encabezado o cuadro de contenido para forzar un salto de línea donde desee.
- Agregue su imagen principal: haga clic en el área de carga para elegir un archivo o pegue una URL de imagen en el campo debajo.
- Ajuste la imagen con el control deslizante Escala (0,5x a 2,0x) y los controles deslizantes de posición X e Y (cada uno de -200 a 200 píxeles) hasta que el sujeto se siente donde la plantilla la enmarca.
- Opcionalmente agregue un logotipo de la misma manera. Una imagen de logotipo cuadrado se adapta mejor a las ranuras de logotipo circular y cuadrado.
- Abra el menú desplegable, busque o filtre la fuente por categoría (sin serif, serif, display, escritura a mano o monoespaciado) y elija una fuente.
- Establezca los colores de acento, fondo y texto con los selectores de color.
- Haga clic en Descargar PNG. El archivo se guarda como
photocard-<template>-<timestamp>.png, por lo que las exportaciones repetidas nunca se sobrescriben entre sí.
Su configuración, texto e imagen se guardan en el navegador mientras trabaja, por lo que al recargar la página se recupera la tarjeta. Reset los borra y restaura la plantilla Clásica.
¿por qué las tarjetas se descargan como PNG?
Porque las tarjetas son en su mayoría texto grande y de color plano, y ese contenido se comprime mejor y se ve más limpio como PNG que como JPEG. JPEG' La compresión con pérdida funciona en bloques de 8 x 8 píxeles y descarta detalles finos, que alrededor de los bordes afilados de las letras aparecen como halos y motas tenues, a menudo llamados timbres. PNG almacena cada píxel exactamente utilizando la compresión sin pérdidas definida en el Especificación PNG W3C, entonces un titular permanece nítido.
| formato | Compresión | Texto nítido | Zonas de colores planos | Fotografías |
|---|---|---|---|---|
| PNG | sin pérdidas | Crujiente | Pequeño y exacto | Archivos grandes |
| JPEG | con pérdidas | Halos alrededor de los bordes | Puede mostrar bandas y motas | Archivos pequeños |
La mayoría de las plataformas vuelven a codificar las cargas de todos modos. Comenzando desde un PNG limpio, su codificador proporciona la mejor entrada posible. Si un PNG con una foto grande es demasiado grande para un límite de carga, el Guía de compresión de imágenes cubre cómo encogerlo.
¿Cómo se utiliza una carta cuadrada en otras plataformas?
Cada plantilla exporta a 1080 x 1080, un cuadrado 1:1. Ese es el tamaño de feed cuadrado estándar en Instagram y Facebook, y se muestra sin recortar en la mayoría de los feeds. Otras ubicaciones quieren formas diferentes.
| Destino | Tamaño buscado | De un cuadrado de 1080 |
|---|---|---|
| Feed de Instagram o Facebook | 1080 x 1080 | Úselo tal cual |
| Feed de retratos de Instagram | 1080 x 1350 | Agregue espacio arriba y abajo con un mate |
| Imagen estilo enlace LinkedIn o X | 1200 x 627 sau 1600 x 900 | Recortar en una franja ancha o colocar sobre una mata ancha |
| Miniatura de YouTube | 1280 x 720 | Recorta a 16:9 y luego agranda ligeramente |
| Historia de Instagram | 1080 x 1920 | Colóquelo sobre un mate alto |
El recorte pierde parte de la tarjeta; un mate lo conserva todo. Para una miniatura de YouTube, recortar un cuadrado de 1080 a 16:9 mantiene una tira de 1080 x 608 y elimina 236 píxeles de arriba y de abajo. Ampliar esa tira a 1280 x 720 es una escala de 1280 / 1080 = 1,19, una leve ampliación. Mantenga el titular cerca del centro vertical de la tarjeta si planifica esto, para que la cosecha no lo atraviese. El recortador de imágenes de redes sociales ¿el cultivo tiene ajustes preestablecidos de plataforma y el guía de cambio de tamaño de imagen explica lo que la ampliación aporta a la calidad.
Para mantener toda la carta cuadrada sobre un lienzo más alto o más ancho, colóquela sobre un fondo con el Generador mate.
¿Están cargadas tus fotos?
Su foto no se carga en Toolz. Cuando elige un archivo, el navegador lo lee en la memoria como una URL de datos, la tarjeta se muestra en la página y la descarga se representa localmente mediante la biblioteca html2canvas, que vuelve a dibujar el HTML de la página 's en un lienzo. Sin embargo, hay tres detalles de red y almacenamiento que vale la pena conocer:
- Las fuentes provienen de Google Fonts. La lista de fuentes se carga desde
fonts.googleapis.com, entonces su navegador solicita a Google los archivos de fuente, que Google describe en su Preguntas frecuentes sobre privacidad de Google Fonts. El texto y la imagen que agrega no forman parte de esas solicitudes. Sin conexión, las fuentes que aún no estaban cargadas vuelven a ser un tipo de letra predeterminado. - Las URL de las imágenes se obtienen de su host. Si pega la URL de una imagen en lugar de cargar un archivo, su navegador carga la imagen desde esa dirección, como lo haría con cualquier página web.
- El trabajo se guarda en su navegador. Su texto, colores e imagen se guardan en el navegador 's almacenamiento local para que sobrevivan a una recarga. En una computadora compartida, presione Restablecer cuando haya terminado para borrarlos.
Problemas comunes y cómo solucionarlos
La tarjeta descargada muestra una fuente diferente a la vista previa. La fuente no había terminado de cargarse cuando hizo clic en Descargar PNG, por lo que la exportación volvió a caer a un tipo de letra predeterminado. Espere uno o dos segundos después de elegir una fuente y luego exporte nuevamente.
Falta una imagen pegada como URL en la descarga. Renderizar una imagen remota en un lienzo descargable requiere que el host de imágenes permita el uso de origen cruzado con encabezados CORS, una limitación documentación html2canvas notas. Muchos sitios no los envían. Descargue la imagen y cárguela como un archivo.
La imagen está cortada o tiene espacio vacío. Utilice el control deslizante Escala y los controles deslizantes de posición X e Y. Escalar por debajo de 1,0x puede revelar el fondo de la plantilla alrededor de la foto; escalar por encima de él corta más fuerte.
El texto desborda su área. El titular es demasiado largo para la plantilla. Acórtelo o cambie a una plantilla que proporcione más texto a la tarjeta.
La tarjeta se reinicia después de una recarga o las imágenes grandes no persisten. Los navegadores limitan el almacenamiento local a unos pocos megabytes por sitio, y una fotografía grande almacenada como URL de datos puede excederla. La tarjeta aún exporta; simplemente es posible que no sobreviva a una recarga. Cambie el tamaño de las fotografías muy grandes antes de agregarlas.
Los corchetes angulares en el texto se ven mal. El texto se inserta en la plantilla como marcado para que funcionen los saltos de línea, lo que significa caracteres como < se puede leer como el comienzo de una etiqueta. Evite los corchetes angulares en el texto de la tarjeta.
Consejos para las tarjetas que lee la gente
- Lidera con una idea por carta. Si necesita dos titulares, necesita dos cartas.
- Recorta la foto para que su tema no quede debajo del área del título de tu plantilla.
- Mantenga constante su marca: la misma plantilla, fuente y color de acento en una serie.
- Agregue texto alternativo cuando publique. La imagen es una imagen de palabras para un lector de pantalla, así que escriba el título y los detalles clave en el campo de texto alternativo de la plataforma 's.
- Publique únicamente citas y fotografías que tenga derecho a utilizar y atribuya las citas con precisión.
Alternativas a un generador de tarjetas de plantilla
- Herramientas generales de diseño como Canva, Figma o Adobe Express ofrecen muchas más plantillas, posicionamiento gratuito y bibliotecas de equipos, normalmente con una cuenta.
- Sala de prensa y plataformas de programación social a veces se incluyen plantillas de tarjetas de marca vinculadas a un flujo de trabajo de publicación.
- Generadores basados en código que representan HTML en imágenes en un servidor se adaptan a sitios que producen una tarjeta para cada artículo automáticamente.
Una herramienta de plantilla de navegador se ajusta al término medio: rápida, sin cuenta, salida consistente y sus imágenes permanecen en su máquina. Para pasos relacionados antes de publicar, el Imagen Marcador de agua agrega un logotipo o crédito a una foto, y el centro de herramientas de redes sociales enumera el conjunto completo.
