Você filma uma paisagem ampla, abre a tela do post, e o aplicativo oferece um quadrado com as duas melhores montanhas cortadas Ou você tira uma captura de tela de um gráfico, e a cultura de alimentação remove os rótulos do eixo que fizeram o gráfico valer a pena compartilhar A imagem está bem O quadro é a forma errada.
Há duas saídas Você pode cortar a imagem para caber o quadro, ou você pode colocar a imagem inteira em um fundo que já tem a forma certa A segunda abordagem é chamada de fosco, e é o que o Gerador fosco constrói: uma tela quadrada, em forma de retrato ou história com sua imagem completa colocada dentro dela, em uma cópia desfocada de si mesma ou de uma cor sólida Este guia explica quando um fosco vence um corte, como funciona a geometria, o que as configurações de preenchimento, raio e sombra fazem em pixels e qual tamanho de saída escolher para cada plataforma.
tl;dr: Um fosco é o fundo em que uma foto fora de forma fica para que possa ser postada sem ser cortada Em vez de cortar uma imagem 16:9 para baixo para 1:1, você encaixa toda a imagem dentro de um quadro 1080 x 1080 ou 1080 x 1350 e preenche o espaço restante com uma cópia desfocada da foto ou uma cor sólida O Matte Generator faz isso do lado do cliente em uma tela HTML, com 15 predefinições de plataforma, preenchimento de 0 a 25%, cantos arredondados, uma sombra de queda opcional e exportação PNG, JPEG ou WebP. É gratuito, sem inscrição e nada é carregado.
O que é um fosco fotográfico?
Um photo matte é a fronteira entre uma imagem e a borda de seu quadro A palavra vem do enquadramento da imagem, onde uma placa de tapete com uma janela cortada fica entre uma impressão e o vidro para que a imagem não corra para a borda do quadro Nas mídias sociais a ideia é a mesma, sem o papelão: o & quot; frame" é a proporção que uma plataforma deseja, e o fosco é o que preenche o espaço que sua imagem não preenche.
A propriedade definidora de um fosco é que nada é removido da imagem Cada pixel que você compôs sobrevive no post O comércio é que a imagem não preenche mais todo o bloco, por isso é menor na tela do que uma colheita da mesma foto seria.
Você deve usar um fosco ou cortar a imagem?
Cortar quando o assunto se senta no meio e as bordas são incidentais Use um fosco quando as bordas carregam informações que você não pode perder Essa é toda a decisão, e vale a pena fazer de propósito, em vez de aceitar o que quer que a tela de upload faça.
| situação | Melhor escolha | por que |
|---|---|---|
| Retrato de uma pessoa, fundo liso | Colheita | O assunto preenche mais o bloco e lê melhor no tamanho da miniatura |
| Ampla paisagem ou panorama | Matte | A largura é o ponto da foto |
| Captura de tela de um gráfico, código ou conversa | Matte | Rótulos e bordas carregam as informações |
| Tiro do produto que deve mostrar todo o objeto | Matte | Cortar o produto anula o propósito |
| Foto de grupo com pessoas em ambas as extremidades | Matte | Uma colheita remove alguém |
| Detalhe tiro ou textura | Colheita | Não há vantagem significativa a proteger |
| Panorama muito amplo que você quer que as pessoas percorram | Nem | Divida-o em um carrossel |
Se você decidir que uma colheita é certa, afinal, o Cortador de imagem de mídia social lida com esse lado da decisão com as mesmas predefinições de plataforma Para um panorama que é muito amplo para qualquer abordagem, o Gerador de rolagem carrossel corta-o em painéis deslizáveis.
Como um fosco encaixa uma imagem em um quadrado?
A regra de ajuste é a mesma chamada CSS object-fit: contain, definido no Módulo de imagens CSS nível 3 especificação: dimensione a imagem pelo maior fator que mantém tanto a sua largura e sua altura dentro do quadro, em seguida, centralizá-lo No código o cálculo é de três linhas:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Qualquer dimensão que atinja a borda do quadro primeiro decide a escala Uma imagem ampla toca as bordas esquerda e direita e deixa barras acima e abaixo Uma imagem alta toca a parte superior e inferior e deixa barras nas laterais O Gerador fosco aplica preenchimento primeiro, encolhendo o quadro, depois executa esse ajuste dentro do que resta.
Um exemplo trabalhado com números reais
Tire uma foto de paisagem de 1920 x 1080 (16:9) e coloque-a na predefinição quadrada do Instagram, 1080 x 1080, com o preenchimento padrão de 6%.
- O preenchimento é de 6% do quadro e #39;s lado mais curto: 1080 x 0,06 = 64,8 pixels em cada borda.
- O espaço deixado para a imagem é 1080 - (2 x 64,8) = 950,4 pixels quadrados.
- A escala de ajuste é menor de 950,4 /1920 = 0,495 e 950,4 /1080 = 0,880, então 0,495.
- A imagem é desenhada em 1920 x 0,495 = 950,4 de largura e 1080 x 0,495 = 534,6 de altura.
- Ele é centrado verticalmente: (950,4 - 534,6) /2 = 207,9, mais o preenchimento de 64,8, coloca sua borda superior em 272,7 pixels.
A ferramenta reporta isto sob a antevisão como & quot; colocado em 950 x 535 dentro de um frame" de 1080 x 1080; Você pode verificar qualquer outro caso da mesma maneira.
Qual tamanho de saída você deve escolher?
Escolha o tamanho do posicionamento para o qual você está postando e lembre-se de que, para uma imagem ampla, um quadro mais alto não torna a imagem maior A largura é o que a limita A tabela abaixo executa o mesmo ajuste para duas fotos de origem, com preenchimento de 6%, nas predefinições comuns.
| Predefinição | Moldura | A paisagem de 1920 x 1080 é desenhada em | O retrato do telefone 1080 x 1920 é desenhado em |
|---|---|---|---|
| Instagram quadrado post | 1080x1080 | 950x535 | 535x950 |
| Postagem de retrato no Instagram (4:5) | 1080 x 1350 | 950x535 | 686x1220 |
| História do Instagram ou Reel (9:16) | 1080x1920 | 950x535 | 950x1690 |
| Imagem de postagem X (16:9) | 1600 x 900 | 1408 x 792 | 446x792 |
Duas coisas se destacam Para a foto da paisagem, quadrado e retrato 4:5 dar um tamanho de imagem idêntico; o quadro retrato só adiciona mais fosco Assim, para imagens largas, quadrado é a escolha mais arrumada Para a foto de telefone alto, retrato 4:5 dá a imagem cerca de 28% mais altura do que um quadrado faz (1220 contra 950 pixels), razão pela qual retrato é o melhor padrão para fotos verticais.
A lista completa predefinida na ferramenta abrange Instagram (quadrado, retrato, paisagem, história), Threads (quadrado, retrato), Bluesky (imagem de alimentação e quadrado), X (imagem de postagem e cartão de resumo), feed do Facebook, feed do LinkedIn, YouTube miniatura, pino padrão do Pinterest e visualização do link Open Graph. As plataformas alteram suas colheitas e recodificam os uploads, portanto, trate-os como " o que se encaixa no & quot; em vez de uma garantia.
Que fundo um fosco deve usar?
A ferramenta oferece quatro fundos: uma cópia desfocada da imagem, uma cor sólida que você escolher, branco ou preto A cópia desfocada é o padrão e geralmente a melhor escolha para fotos, porque preenche o quadro com a imagem & #39; paleta própria sem que você precise escolher uma cor.
| experiência | parece | melhor para | cuidado com |
|---|---|---|---|
| Cópia desfocada da imagem | O familiar Instagram & quot;fill" olhar | Fotos, viagens, comida, qualquer coisa colorida | Imagens ocupadas produzem um cenário movimentado |
| Cor sólida | Um cartão plano atrás da imagem | Contas de marca, fotos de produtos, logotipos | Escolha uma cor que não combine com a foto |
| Branco | Impressão da galeria em uma parede branca | Feeds mínimos, capturas de tela no modo de luz | Fotos com bordas claras perdem seus limites sem sombra |
| Preto | Caixa de correio de cinema | Fotos noturnas, fotos de filmes, capturas de tela escuras da UI | Fotos com bordas escuras perdem seus limites sem sombra |
Como o pano de fundo desfocado é feito
O fundo desfocado não é um palpite para uma cor correspondente É a sua própria imagem, recortada para preencher todo o quadro, desfocada fortemente e escurecida ligeiramente, com a imagem nítida desenhada no topo O desfoque usa a tela filter propriedade, documentada em MDN's CanvasRenderingContext2D.filter page, e seu raio é dimensionado com o quadro: 6% do lado mais curto, ou seja, 65 pixels em um quadrado de 1080.
Um detalhe importa para a qualidade Um borrão perto da borda de uma tela tem uma média de pixels transparentes de fora dela, o que deixa uma borda pálida ao redor da borda A ferramenta evita que, desenhando o pano de fundo 12% maior que o quadro de todos os lados (130 pixels de overdraw em um quadrado de 1080), de modo que o borrão tenha dados de imagem reais para amostrar até a borda Uma lavagem preta de 12% passa então por cima, o que mantém o assunto nítido lendo como o assunto.
O que o preenchimento, o raio do canto e a sombra fazem?
Todas as três configurações são proporcionais, então elas parecem iguais em 1.080 pixels e em 1.600.
estofamento corre de 0 a 25% e é medido contra o quadro & #39; s lado mais curto Em 0, uma imagem larga toca ambas as bordas laterais e o fosco mostra apenas como barras acima e abaixo: uma caixa de correio pura Entre 4% e 8% lê como uma borda deliberada sem encolher muito a imagem Valores maiores se adequam a postagens de estilo de cartão de cotação onde o fundo faz parte do design Em um quadrado de 1080, cada ponto percentual de preenchimento remove 21,6 pixels da imagem & #39; s largura disponível.
Raio canto corre de 0 a 50% e é medido contra a imagem colocada' s lado mais curto, não o quadro Com o exemplo da paisagem acima, a imagem tem 534,6 pixels de altura, de modo que o raio padrão de 12% arredonda cada canto por cerca de 64 pixels Em 50% os lados curtos tornam-se semicírculos completos, dando uma forma de pílula.
Soltar sombra está ligado por omissão É uma sombra preta de 28% com um desfoque de 3% do quadro' s lado mais curto e um deslocamento descendente de 1%, o que num quadro de 1080 significa um desfoque de 32 pixels e uma queda de 11 pixels Separa a imagem de um fundo de brilho semelhante, o que é exatamente o caso em que os mattes brancos ou pretos precisam de ajuda.
Como colocar uma foto em um fosco, passo a passo
- abra o gerador fosco grátis e adicione sua imagem soltando um arquivo, clicando para navegar ou colando na área de transferência Colar é a rota mais rápida para capturas de tela.
- Escolha o tamanho de saída da lista de predefinições agrupadas Comece com o quadrado do Instagram para fotos amplas e o retrato do Instagram para fotos altas.
- Escolha o fundo Mantenha a cópia desfocada para fotos; mude para uma cor sólida e digite um valor hexadecimal para o trabalho da marca.
- Ajuste o preenchimento, o raio do canto e a alternância de sombra enquanto assiste à visualização A tela de visualização renderiza no tamanho real da saída, então o que você vê é o arquivo que você obterá.
- Escolha um formato e baixe O arquivo leva o nome do seu original
-matteadicionado, entãobeach.jpgtorna-sebeach-matte.png.
PNG, JPEG ou WebP: qual formato você deve exportar?
Exporte PNG quando o resultado tiver transparência ou texto nítido, JPEG quando quiser um pequeno arquivo que toda plataforma aceite e WebP quando quiser o menor arquivo e o destino o suportar JPEG e WebP são codificados com 92% de qualidade.
| formato | Compressão | Mantém a transparência | Uso típico |
|---|---|---|---|
| png | sem perdas | sim | Capturas de tela, logotipos em um fosco transparente, arquivando o resultado |
| jpeg | Perdido, qualidade 0,92 | Não, achata-se a opaco | Postagens fotográficas em qualquer plataforma |
| WebP | Perdido, qualidade 0,92 | sim | Sites e plataformas que aceitam WebP |
A maioria das plataformas sociais recodifica o que você carrega de qualquer maneira, então o formato de exportação importa menos para o feed do que para sua própria cópia Se você planeja editar o resultado ainda mais, mantenha um PNG Se o arquivo precisar ser menor antes do upload, o Guia de compressão de imagens caminha pelas configurações de qualidade com mais profundidade.
Você pode usar uma PNG transparente?
Sim, e funciona bem para logotipos e fotos de produtos recortados Uma PNG transparente colocada em um composto de cor sólida de forma limpa, então um fosco se torna uma maneira rápida de colocar um logotipo em um quadrado de marca Se você precisar remover um fundo primeiro, o guia do removedor de fundo abrange esse passo Exportar o resultado como PNG ou WebP para manter a transparência no arquivo; JPEG não tem canal alfa e irá achatá-lo.
Um fosco reduz a qualidade da imagem?
Não, desde que a fonte seja maior que o espaço em que é atraída As predefinições de saída são de 1080 pixels ou mais largas, e uma foto típica do telefone é de 3000 a 4000 pixels em seu lado longo, então a imagem é reduzida, o que não perde nada visível A tela a desenha com suavização de alta qualidade.
A única exceção é uma fonte pequena Se você colocar uma imagem de 600 x 400 em um quadrado de 1080 com 6% de preenchimento, ela tem que ser dimensionada até 950 x 634, um fator de cerca de 1,58, e vai parecer suave pela mesma razão que qualquer ampliação faz A ferramenta não pode adicionar detalhes que nunca estiveram no arquivo Se sua fonte for pequena, reduza o preenchimento ou escolha uma predefinição menor para que o fator de escala fique próximo de 1. o guia de redimensionamento de imagem explica por que o upscaling desfoca e quando é aceitável.
Erros comuns e mensagens de erro
Alguns problemas surgem com frequência suficiente para serem mencionados.
- O & quot; esse ficheiro não é uma imagem." A ferramenta verifica o arquivo' s tipo MIME relatado antes de decodificar Um PDF ou um documento arrastado por engano é rejeitado nesta etapa.
- O & quot; essa imagem não pôde ser lida." O arquivo afirma ser uma imagem, mas o navegador não poderia decodificá-lo Isso acontece com downloads corrompidos e com formatos um navegador particular não suporta As listas dropzone PNG, JPEG, WebP, GIF e AVIF; fotos HEIC de um iPhone geralmente precisam ser convertidas primeiro.
- O fosco parece cinza em vez de colorido. Você provavelmente escolheu a opção de cor sólida e deixou o cinza claro padrão. Mude o fundo de volta para a cópia desfocada.
- Uma imagem branca desaparece em um fosco branco. Ligue a sombra, adicione um pequeno preenchimento ou mude para o cenário desfocado.
- O poste ainda é cortado. A predefinição que você exportou não corresponde onde você postou Uma imagem de 1200 x 630 Open Graph carregada como uma postagem de feed do Instagram será cortada, porque 1.91:1 só é aceito como uma postagem de paisagem.
- O download não começa. Os downloads contam para um limite de uso diário Quando o limite é atingido, a ferramenta mostra uma mensagem em vez de um arquivo.
Alguma coisa está carregada?
Não. A imagem é lida com um URL de objeto local, composto em HTML <canvas> elemento na guia do seu navegador e codificado em um arquivo com a tela toBlob método descrito no Especificação de tela HTML WHATWG. Nenhum dado de imagem é enviado para um servidor, armazenado ou registrado Uma vez que a página tenha carregado, ela continua trabalhando com a rede desconectada Registros de rastreamento de uso apenas qual predefinição, plano de fundo e formato você usou, nunca a imagem.
Alternativas a um gerador fosco online
Uma ferramenta de navegador é uma rota entre várias.
- A plataforma & #39; opção de ajuste própria. Algumas telas de upload, Instagram' s entre eles, pode caber uma foto dentro do quadro com barras simples em vez de cortá-lo É rápido, mas você obtém pouco ou nenhum controle sobre o fundo, preenchimento ou sombra.
- Editores de fotos por telefone. Muitas aplicações de galeria e aplicações de edição têm um modo & quot; fit" ou & quot; no crop" modo com um fundo desfocado Funcionam bem para fotografias únicas no telefone, e os resultados variam de acordo com a aplicação.
- Software de design de desktop. Photoshop, Affinity ou Figma dão controle total, incluindo posições exatas de pixels Eles levam mais tempo e precisam do software instalado.
- Linha comando. ImageMagick pode preencher uma imagem com um tamanho fixo
-gravity center -extent 1080x1080, que se adapta a trabalhos em lote em um servidor.
As vantagens da abordagem do lado do cliente são que ela não precisa de instalação ou conta, funciona da mesma forma em qualquer sistema operacional e mantém a foto no seu dispositivo Para um único post ou um pequeno lote que geralmente é a opção mais rápida Para centenas de imagens, um script ganha.
o centro de ferramentas de mídia social lista os utilitários relacionados em um só lugar, incluindo o gerador de cartão de foto para orçamentos e cartões de notícias e o Marcador de água de imagem por adicionar um logotipo ou crédito antes de postar.
