Role qualquer conta de notícias ou feed de marca e a maioria dos posts compartilham uma forma: uma foto, um título em negrito, uma barra de acento fina, uma data e uma alça no canto Estes são cartões de foto Eles parecem projetados porque são construídos a partir de um layout fixo onde apenas as palavras e a imagem mudam, e é também por isso que uma equipe pode publicar dezenas por semana sem que cada um pareça diferente.
Este guia cobre o que torna um cartão legível no tamanho do feed, como os tamanhos de texto encolhem em um telefone, quais cores passam as diretrizes de contraste, por que os cartões devem ser exportados como PNG, como adaptar um cartão quadrado para outras plataformas e onde estão as bordas de privacidade gerador de cartão de foto é usado para peças passo a passo, e cada configuração descrita abaixo é aquela que a ferramenta oferece.
tl;dr: Um cartão fotográfico é um gráfico social feito de um modelo: sua imagem, um título e texto de suporte colocado em um layout fixo O Gerador de Cartões Fotográficos possui oito modelos (Jornal Clássico, Negrito Moderno, Notícias de Última Hora, Cartão de Cotação, Minimalista, Cartão de Recurso, Notícias de Gradiente e Cotação Vertical), 50 Fontes do Google, captadores de cores de sotaque, fundo e texto, escala de imagem e controles de posição, e um logotipo opcional Cada cartão exporta como um PNG 1080 x 1080, renderizado em seu navegador Sua imagem é lida localmente e não carregada, embora as fontes sejam carregadas do Google Fonts. É gratuito, sem inscrição.
O que é um cartão fotográfico?
Um cartão fotográfico é uma imagem quadrada ou retangular de mídia social que combina uma fotografia com texto sobreposto ou adjacente, disposta a partir de um modelo reutilizável Os meios de comunicação os usam para compartilhar manchetes, as marcas os usam para anúncios e os criadores os usam para citações O modelo fixa a tipografia, o espaçamento e as posições; o autor fornece o conteúdo.
Essa divisão é o ponto inteiro Um modelo resolve as decisões de design uma vez: quão grande é o título em relação à imagem, para onde vai a data, quanto espaço envolve o texto Alterar as palavras não pode quebrar essas relações, então um feed de cartões feitos do mesmo modelo é lido como uma publicação consistente.
Qual modelo você deve escolher?
Escolha pelo que o cartão tem que carregar Cada modelo expõe apenas os campos de texto que seu layout usa, de modo que o painel de conteúdo muda quando você troca.
| Modelo | Layout | Campos texto | melhor para |
|---|---|---|---|
| Jornal Clássico | Imagem grande, área de texto abaixo | Rubrica, subposição, data, domínio | Notícias gerais e postagens em blogs |
| Ousado moderno | Imagem metade superior, título e resumo abaixo, fixo " Leia Mais" botão | Rubrica, subposição, data | Anúncios |
| Notícias de última hora | Faixa de cabeçalho vermelha, imagem, título, barra de ticker estilo rolagem | Rubrica, subposição, data | Atualizações urgentes |
| Cartão Citação | Cite uma foto de fundo escurecida | Rubrica (a cotação), subposição (a atribuição), data | Puxe as citações que você tem permissão para compartilhar |
| Minimalista | Imagem emoldurada com bastante espaço em branco | Rubrica, subposição, data | Declarações simples, datas de eventos |
| Cartão Característico | Imagem, logotipo redondo sobreposto, tira do rodapé | Rubrica, subposição, data, domínio | Artigos longos |
| Notícias Gradient | Imagem de sangramento total, gradiente de acento, barra de rodapé | Título, categoria, data, domínio | Histórias lideradas por imagens |
| Citação Vertical | Painel de citação à esquerda, imagem do retrato à direita | Conteúdo (a citação), autor, designação, data, domínio | Citações com uma foto do orador |
A maioria dos modelos tem uma linha de data, e vários adicionam um domínio ou campo de identificador; qualquer campo pode ser limpo Algumas etiquetas são fixadas na disposição, como o & quot; BREAKING NEWS" na tira de Notícias de Última Hora e o & quot; Leia Mais" no Modern Bold. O slot de logotipo aparece apenas quando você adiciona um logotipo; sem um, o modelo esconde a área do logotipo em vez de mostrar um quadro vazio.
Qual deve ser o tamanho do texto em um cartão social?
Maior do que parece no seu monitor Um cartão é projetado com 1080 pixels de largura, mas visto em um feed de telefone aproximadamente na largura da tela, e um telefone típico tem cerca de 390 pixels CSS de largura Isso significa que tudo no cartão é mostrado em cerca de 390 /1080 = 36% do tamanho projetado.
Aqui está o que isso faz com o texto nos tamanhos que os modelos usam:
| Tamanho no cartão 1080 px | Tamanho aproximado em uma alimentação de 390 px de largura | legibilidade |
|---|---|---|
| Manchete de 64 px | 23 pontos | Muito claro |
| Manchete de 48 px | 17 pontos | Limpar |
| 32 px subposição ou rodapé | 12 pontos | Legível |
| Texto de detalhe de 24 px | 9px | Pequeno, precisa de atenção |
| Metadados de 20 px | 7 pontos | Difícil de ler |
A aritmética é simplesmente tamanho × 390 /1080. para um título de 48 pixels, 48 × 0.361 = 17.3 pixels, comparável ao texto confortável do corpo em um telefone Em 20 pixels o resultado é cerca de 7, razão pela qual datas e alças em cartões são decorativas, em vez de essencial Coloque qualquer coisa que um leitor deve ver no título, não o rodapé.
Isso também define um limite prático de comprimento Uma manchete que envolve cinco linhas em 48 pixels força o modelo a apertar a imagem ou estourar, Mire para uma manchete de cerca de 6 a 12 palavras.
Que cores um cartão fotográfico deve usar?
Escolha cores que mantenham o texto legível em relação ao que está por trás dele As Diretrizes de Acessibilidade de Conteúdo da Web estabelecem uma referência útil: Critério de sucesso 1.4.3 das WCAG 2.2 pede uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande, que WCAG define como pelo menos 18 pontos, ou 14 pontos em negrito Uma imagem social não é uma página da web, mas os mesmos limites descrevem o que as pessoas com baixa visão ou uma tela fraca podem ler.
O gerador dá-lhe três cores:
- Acento cores barras, pílulas, gradientes e realçar formas Ele carrega a marca.
- experiência colore as áreas não cobertas pela imagem.
- Texto colore a cópia principal nos modelos que a utilizam; alguns modelos definem texto branco sobre seus painéis de destaque.
| Combinação | Relação de contraste | Texto normal (4,5:1) | Texto grande (3:1) |
|---|---|---|---|
Quase preto #111827 em branco #ffffff |
Cerca de 17,7:1 | Passar | Passar |
Branco no acento vermelho padrão #D9232D |
Cerca de 5,0:1 | Passar | Passar |
Branco em cinza médio #999999 |
Cerca de 2,8:1 | Falha | Falha |
Branco sobre um amarelo claro #facc15 |
Cerca de 1,5:1 | Falha | Falha |
As duas primeiras linhas são os padrões generator' s. Você pode verificar qualquer par de cores de sua própria marca com o verificador do contraste da cor, e o guia de contraste de cores explica como a proporção é calculada.
O texto colocado diretamente sobre uma fotografia não tem uma única taxa de contraste, porque a foto varia Modelos como Gradient News lidam com isso com um gradiente sob o texto e uma sombra de texto Quando você escolher uma foto para esses modelos, escolha uma com uma área mais escura ou mais calma onde fica a manchete.
Como fazer um cartão fotográfico, passo a passo
- abra o fabricante de cartões fotográficos e escolha um modelo no menu suspenso Modelo. Seu texto de amostra é carregado nos campos de conteúdo.
- Substitua o texto em cada campo Pressione Enter dentro de um cabeçalho ou caixa de conteúdo para forçar uma quebra de linha onde você quiser.
- Adicione sua imagem principal: clique na área de upload para escolher um arquivo ou cole um URL de imagem no campo abaixo dele.
- Ajuste a imagem com o controle deslizante Escala (0,5 x a 2,0 x) e os controles deslizantes de posição X e Y (cada -200 a 200 pixels) até que o assunto fique onde o modelo o enquadra.
- Opcionalmente, adicione um logotipo da mesma maneira Uma imagem de logotipo quadrado se encaixa melhor nos slots de logotipo circular e quadrado.
- Abra o menu suspenso Fonte, pesquise ou filtre por categoria (sem serifa, serifa, display, caligrafia ou monoespaço) e escolha uma fonte.
- Defina as cores de destaque, fundo e texto com os selecionadores de cores.
- Clique em Baixar PNG. O arquivo é salvo como
photocard-<template>-<timestamp>.png, portanto, as exportações repetidas nunca se substituem.
Suas configurações, texto e imagem são salvos no navegador enquanto você trabalha, então recarregar a página traz o cartão de volta A redefinição os limpa e restaura o modelo Clássico.
Por que os cartões são baixados como PNG?
Porque os cartões são principalmente texto grande e cor plana, e que o conteúdo comprime melhor e parece mais limpo como PNG do que como JPEG. JPEG & #39; s compressão com perdas funciona em blocos de 8 x 8 pixels e descarta detalhes finos, que em torno de bordas de letras nítidas aparece como halos fracos e manchas, muitas vezes chamado de toque PNG armazena cada pixel exatamente usando a compressão sem perdas definida no Especificação PNG W3C, então uma manchete permanece nítida.
| formato | Compressão | Texto nítido | Áreas de cor plana | Fotografias |
|---|---|---|---|---|
| png | sem perdas | Crocante | Pequeno e exato | Arquivos grandes |
| jpeg | com perdas | Halos nas bordas | Pode mostrar faixas e manchas | Arquivos pequenos |
A maioria das plataformas recodifica uploads de qualquer maneira Começando a partir de um PNG limpo dá ao seu codificador a melhor entrada possível Se um PNG com uma foto grande for muito grande para um limite de upload, o Guia de compressão de imagens cobre como encolhê-lo.
Como você usa um cartão quadrado em outras plataformas?
Cada modelo exporta em 1080 x 1080, um quadrado de 1:1. que é o tamanho padrão de alimentação quadrado no Instagram e Facebook, e ele exibe sem cortar na maioria dos feeds Outras colocações querem formas diferentes.
| Destino | Tamanho desejado | De um quadrado de 1080 |
|---|---|---|
| Feed do Instagram ou Facebook | 1080x1080 | Use como está |
| Ração retrato Instagram | 1080 x 1350 | Adicione espaço acima e abaixo com um fosco |
| LinkedIn ou imagem estilo link X | 1200 x 627 ou 1600 x 900 | Corte em uma faixa larga ou coloque em um fosco largo |
| Miniatura do YouTube | 1280x720 | Corte para 16:9 e aumente ligeiramente |
| História Instagram | 1080x1920 | Coloque em um fosco alto |
O recorte perde parte do cartão; um fosco mantém tudo Para uma miniatura do YouTube, cortar um quadrado de 1080 para 16:9 mantém uma tira de 1080 x 608 e remove 236 pixels da parte superior e inferior Aumentar essa tira para 1280 x 720 é uma escala de 1280 /1080 = 1,19, uma ampliação suave Mantenha a manchete perto do centro vertical do cartão se você planejar isso, para que a colheita não a corte cortador de imagem de mídia social a colheita com predefinições de plataforma e o guia de redimensionamento de imagem explica o que o alargamento faz à qualidade.
Para manter toda a carta quadrada em uma tela mais alta ou mais larga, coloque-a em um fundo com o Gerador fosco.
Suas fotos estão carregadas?
Sua foto não é carregada no Toolz. Quando você escolhe um arquivo, o navegador lê-lo na memória como um URL de dados, o cartão é colocado para fora na página, eo download é processado localmente pela biblioteca html2canvas, que redesenha a página' s HTML em uma tela Existem três detalhes de rede e armazenamento que vale a pena conhecer, embora:
- As fontes vêm do Google Fonts. A lista de fontes é carregada de
fonts.googleapis.com, então seu navegador faz solicitações ao Google para os arquivos de fonte, que o Google descreve em seu Perguntas frequentes sobre privacidade do Google Fonts. O texto e a imagem que você adiciona não fazem parte dessas solicitações. Offline, as fontes que ainda não foram carregadas voltam a ser uma fonte padrão. - URLs de imagem são obtidos de seu host. Se você colar um URL de imagem em vez de fazer upload de um arquivo, seu navegador carrega a imagem desse endereço, como faria com qualquer página da web.
- O trabalho é salvo no seu navegador. Seu texto, cores e imagem são salvos no navegador & #39; s armazenamento local para que eles sobrevivam a uma recarga Em um computador compartilhado, pressione Reset quando terminar de limpá-los.
Problemas comuns e como corrigi-los
O cartão baixado mostra uma fonte diferente da visualização. A fonte não tinha terminado o carregamento quando você clicou em Baixar PNG, então a exportação caiu de volta para um tipo de letra padrão Aguarde um segundo ou dois depois de escolher uma fonte, em seguida, exportar novamente.
Uma imagem colada como URL está faltando no download. Renderizar uma imagem remota em uma tela para download requer que o host da imagem permita o uso de origem cruzada com cabeçalhos CORS, uma limitação do documentação html2canvas notas. muitos sites não enviá-los Baixe a imagem e carregá-lo como um arquivo em seu lugar.
A imagem é cortada ou tem espaço vazio. Use o controle deslizante Escala e os controles deslizantes de posição X e Y. A escala abaixo de 1,0 x pode revelar o fundo do modelo ao redor da foto; a escala acima dela aflora mais apertada.
O texto transborda de área. O título é muito longo para o modelo Encurte-o ou mude para um modelo que forneça ao texto mais do cartão.
O cartão é reiniciado após uma recarga ou imagens grandes não persistem. Os navegadores limitam o armazenamento local a alguns megabytes por site, e uma foto grande armazenada como URL de dados pode excedê-la O cartão ainda exporta; ele pode simplesmente não sobreviver a uma recarga Redimensione fotos muito grandes antes de adicioná-las.
Os colchetes angulares no texto parecem errados. O texto é inserido no modelo como marcação para que a linha quebre o trabalho, o que significa caracteres como < pode ser lido como o início de uma tag Evite colchetes angulares no texto do cartão.
Dicas para cartões que as pessoas leem
- Liderar com uma ideia por cartão Se precisar de duas manchetes, precisa de duas cartas.
- Cortar a foto para que seu assunto não se sente sob a área de título do seu modelo.
- Mantenha sua marca constante: o mesmo modelo, fonte e cor de destaque em uma série.
- Adicione texto alternativo ao postar A imagem é uma imagem de palavras para um leitor de tela, portanto, escreva o título e os principais detalhes no campo de texto alternativo do platform's.
- Poste apenas citações e fotos que você tem o direito de usar e atribua aspas com precisão.
Alternativas a um gerador de cartões de modelo
- Ferramentas gerais de design como Canva, Figma ou Adobe Express oferecem muito mais modelos, posicionamento gratuito e bibliotecas de equipe, geralmente com conta.
- Redação e plataformas de agendamento social às vezes, inclua modelos de cartão de marca vinculados a um fluxo de trabalho de publicação.
- Geradores baseados em código que renderizam HTML em imagens em um servidor de sites adequados que produzem um cartão para cada artigo automaticamente.
Uma ferramenta de modelo de navegador se encaixa no meio termo: rápido, sem conta, saída consistente e suas imagens permanecem em sua máquina Para etapas relacionadas antes de postar, o Marcador de água de imagem adiciona um logotipo ou crédito a uma foto e o centro de ferramentas de mídia social lista o conjunto completo.
