Um panorama postado no Instagram como uma única imagem se transforma em uma faixa fina no feed O mesmo panorama cortado em três ou quatro slides e postado como um carrossel preenche a tela, e deslizar se move pela imagem como se você estivesse panorâmica de uma câmera O efeito é simples de descrever e fácil de errar um pouco: um slide de um pixel fora, ou um último slide mais estreito que o resto, e o deslizamento salta.
Este guia explica como funciona um carrossel sem costura, quantos slides um determinado panorama precisa, como é a aritmética de corte com contagens reais de pixels e como usar o Gerador de rolagem carrossel no Toolz para fazer o fatiamento no seu navegador.
tl;dr: Um carrossel sem costura é uma imagem larga cortada em slides iguais que compartilham exatamente suas bordas, postada em ordem, então deslizar rola a imagem A contagem de slides é a proporção panorama' s dividida pela proporção slide' s: um panorama 3:1 é de 3 slides quadrados ou 4 slides retrato (4:5).O gerador rolagem carrossel sugere que conte, corte a imagem exatamente para tantos slides' valor da largura, cortes em limites de pixel inteiro e exporta slides de 1080 px de largura como JPEG, PNG ou WebP em um zip numerado Ele executa o lado do cliente, nada carregado, gratuito, sem inscrição.
O que é um carrossel Instagram sem costura?
Um carrossel sem costura é um poste de carrossel cujos slides são peças consecutivas de uma imagem Em vez de passar de uma foto para a próxima, o espectador desliza e a imagem continua através da lacuna Os fotógrafos de paisagem usam-no para panoramas, os designers usam-no para longas ilustrações e as marcas usam-no para linhas de tempo ou linhas de produtos que percorrem vários quadros.
Funciona porque um carrossel mostra slides lado a lado em uma faixa, e cada slide em um poste tem o mesmo tamanho Se o slide 1 terminar na coluna de pixels 1.200 do original e o slide 2 começar na coluna 1.200, a junção será invisível Se o slide 2 começar na coluna 1.198 ou 1.203, uma fatia da imagem se repete ou desaparece, e em um horizonte reto ou uma borda de construção que se mostra como um passo visível.
Duas regras de plataforma moldam todo o resto A partir desta escrita, o Instagram aceita até 20 slides em um carrossel, e todos os slides em um post compartilham a proporção do primeiro; um slide em uma forma diferente é cortado para combinar As plataformas alteram esses detalhes de tempos em tempos, portanto, trate-os como comportamento atual, em vez de uma especificação fixa.
Qual formato de slide você deve escolher?
Retrato 4:5 é a escolha usual, porque é a forma mais alta que o feed do Instagram exibe e leva mais tela em um telefone Quadrado e paisagem estão lá quando a composição lhes convém.
O gerador oferece os três formatos de carrossel, cada um exportado com 1.080 px de largura:
| Forma deslizante | Tamanho saída | Relação (largura /altura) | Slides para um panorama 3:1 | Slides para um panorama 4:1 |
|---|---|---|---|---|
| Retrato (padrão) | 1080 x 1350 | 0,8 | 4 | 5 |
| Praça | 1080x1080 | 1.0 | 3 | 4 |
| Paisagem | 1080x566 | 1.91 | 2 | 2 |
As contagens de slides na tabela vêm de uma divisão, coberta na próxima seção O padrão a ser notado é que slides mais estreitos precisam de mais deles para cobrir a mesma largura Os slides de retrato mostram a maior altura do panorama por slide, que geralmente é o que faz uma foto de paisagem parecer grande, mas precisam de mais deslizamentos Os slides de paisagem mostram um panorama em menos quadros mais curtos e se adequam a imagens muito largas e rasas, como os skylines.
Quantos slides um panorama precisa?
Divida a proporção panorama's pela proporção slide's e depois arredonde para o slide inteiro mais próximo.
slides = round( (image width / image height) / (slide width / slide height) )
Para um panorama 3:1 em slides de retratos: 3 /0,8 = 3,75, que arredonda para 4. em slides quadrados: 3 /1 = 3. Em slides de paisagem: 3 /1,908 = 1,57, que arredonda para 2.
Para um panorama 4:1, como uma imagem de 6.000 x 1.500: 4 /0,8 = 5 slides de retrato, 4 /1 = 4 slides quadrados e 4 /1.908 = 2,1, portanto 2 slides de paisagem.
o ferramenta panorama to carrossel executa este cálculo assim que adicionar uma imagem, fixa a resposta entre 1 e 10 e define o controle deslizante Slides para ela com uma linha como & quot;4 corresponde às proporções da sua imagem & #39; s mais próximas. & quot; O próprio controle deslizante vai de 2 a 10. Depois de movê-lo, a sugestão para de substituir sua escolha; adicionar uma nova imagem ou escolher um formato de slide diferente traz a sugestão de volta.
A contagem raramente se divide perfeitamente, então algo tem que dar Arredondando até mais slides apara um pouco da parte superior e inferior do panorama Arredondando para baixo para menos slides apara da esquerda e da direita O gerador faz esse aparamento uma vez, centrado, antes do corte, e é por isso que cada slide sai do mesmo tamanho.
Como a ferramenta corta slides sem costura?
Funciona em três etapas, e cada uma existe para parar um tipo específico de costura.
Passo 1: corte a tira. Os slides juntos formam uma tira longa cuja proporção é a proporção de slides vezes a contagem de slides Para 4 slides de retrato que é 1080 x 4 /1350 = 3,2. a ferramenta leva a maior região centrada da imagem exatamente com essa proporção Se a imagem for mais larga que a tira, os lados são aparados; se for mais alto, a parte superior e inferior são aparados.
Passo 2: divida a faixa em colunas de pixels inteiros. A largura da tira é arredondada para um número inteiro de pixels, dividido pela contagem de slides, e quaisquer pixels restantes são distribuídos um de cada vez para os slides principais Uma tira de 3.199 px em 3 slides torna-se 1.067 + 1.066 + 1.066. as colunas são consecutivas, então cada slide começa exatamente no pixel após o término do anterior Nenhuma coluna é contada duas vezes e nenhuma é ignorada.
Passo 3: dimensione cada slide para o tamanho de saída. Cada coluna é desenhada em uma tela no tamanho predefinido completo, 1080 x 1350 para retrato, usando o navegador & #39; s canvas drawImage operação definida no Padrão HTML WHATWG, com suavização de imagem de alta qualidade.
Por que não arredondar cada slide' s posição independentemente? porque limites fracionários deriva Se uma tira é 3.201 px largura e 4 slides são computados como 800.25 px cada, arredondar cada início e largura por conta própria pode colocar um slide' s borda direita um pixel passado o próximo slide' s borda esquerda. Espalhar o restante através dos slides principais mantém cada limite um inteiro e cada slide dentro de um pixel de origem dos outros No caso 1.067 versus 1.066, que um pixel de fonte extra altera a escala horizontal da saída em menos de 0.1%, o que não é visível.
Um exemplo trabalhado com contagens reais de pixels
Pegue um panorama de 4.000 x 1.333, uma proporção de 3,0008, e escolha slides de retrato.
A contagem sugerida. 3,0008 /0,8 = 3,751, que arredonda para 4 slides.
A tira para 4 slides. A proporção da tira é 3,2, e a proporção da imagem de 3,0008 é menor que isso, então a imagem é relativamente mais alta que a tira A ferramenta mantém a largura total de 4000 px e a altura dos acabamentos: 4000 /3,2 = 1.250 px. Isso remove 83 px, cerca de 41,5 px da parte superior e 41,5 px da parte inferior.
Os slides. 4.000 /4 = 1.000 px cada um sem resto, então quatro fatias de 1.000 x 1.250, cada uma aumentada em 1,08 para 1.080 x 1.350.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
Escolhendo 3 slides em vez disso. Arraste o controle deslizante para 3 e a proporção da tira cai para 2,4. agora a imagem é mais larga que a tira, então a ferramenta mantém a altura total de 1.333 px e a largura dos acabamentos: 1.333 x 2,4 = 3.199,2 px, arredondada para 3.199. Cerca de 400 px saem de cada lado Dividir em 3, ou seja, 1.067 + 1.066 + 1.066 px, então o primeiro slide recebe o pixel que sobrou.
A empurrá-lo para longe demais. Em 6 slides a proporção de tiras seria 0,8 x 6 = 4,8, muito mais larga que a imagem O gerador mostra um aviso quando a proporção de imagens' s cai abaixo de 75% da proporção de tiras Para esta imagem, 0,8 x 6 x 0,75 = 3,6, e 3,0 é menor que 3,6, então a página diz: " Esta imagem não é larga o suficiente para 6 slides nessa forma, então cada slide será cortado em cima e em baixo." Em 5 slides o limite é 3,0 e a imagem simplesmente limpa.
Um segundo exemplo mostra um panorama que se encaixa exatamente Uma imagem de 6000 x 1500 é 4:1. em slides de retrato a sugestão é 4 /0,8 = 5, a proporção de tiras é 5 x 0,8 = 4,0, e nada é aparado: cinco fatias de 1200 x 1500, cada uma reduzida em 0,9 a 1080 x 1350. mudar para slides quadrados e a sugestão é 4, novamente sem acabamento: quatro fatias de 1500 x 1500, dimensionadas para 1080 x 1080.
Como você faz o carrossel passo a passo?
- Adicione o panorama. abra o Divisor carrossel Instagram e solte uma imagem, clique para navegar ou cole uma da área de transferência Qualquer imagem que o navegador possa decodificar funciona, o que na prática significa PNG, JPEG, WebP, GIF e AVIF.
- Escolha o formato do slide. Retrato 4:5 é o padrão A nota sob o selecionador reafirma para que serve a forma.
- Verifique a contagem de slides. Aceite a sugestão ou mova o controle deslizante A faixa de visualização redesenha imediatamente e o cabeçalho mostra a saída, por exemplo & quot; 4 x 1080x1350".
- Escolha um formato e faça o download. Carregue em & quot; Baixe todos os 4 como um zip" para todo o conjunto, ou use o & quot;Slide 1 & quot;, & quot;Slide 2 & quot; botões para salvar slides únicos.
Os arquivos são nomeados a partir do nome do seu arquivo original com um número preenchido com zero: harbor.jpg torna-se harbor-01.jpeg, harbor-02.jpeg e assim por diante por dentro harbor-carousel.zip. O preenchimento mantém os slides em ordem de deslizamento em qualquer gerenciador de arquivos, o que importa quando você seleciona todos eles no seu telefone A biblioteca zip carrega somente quando você pressiona o botão zip, para que a própria página permaneça leve.
Carregue os slides para o Instagram em ordem numérica como uma única postagem de carrossel. Postá-los fora de ordem é a maneira mais comum de um conjunto correto de slides acabar parecendo quebrado.
Você deve exportar JPEG, PNG ou WebP?
JPEG é o padrão e a escolha certa para fotografias Instagram re-codifica uploads como JPEG de qualquer maneira, então um arquivo sem perdas compra um upload maior e nada visível no final A compressão JPEG é definida em Recomendação T.81 da UIT-T, e o gerador codifica com qualidade de 0,92.
PNG não tem perdas, especificado pelo Recomendação PNG do W3C, e se adequa a panoramas que são ilustrações, diagramas ou contêm texto, onde artefatos JPEG em torno de bordas duras seriam mostrados antes do Instagram' a própria compactação adiciona mais.
WebP dá os menores arquivos com qualidade semelhante e também usa 0,92 para sua codificação com perdas É uma escolha sensata para slides com destino a outro lugar que não o Instagram, como uma galeria de sites.
Se você precisar dos slides em outro formato posteriormente, ou de uma pasta deles convertida em massa, o guia para conversão do formato da imagem abrange o que muda entre JPG, PNG e WebP e quando cada um vale a pena.
A divisão diminuirá a qualidade da imagem?
O corte não; a escala pode Cada corrediça é tirada da fonte na definição completa e escalada então a 1080 px largo.
Quando uma fatia é mais larga do que 1080 px, como no exemplo 6000 x 1500 onde cada fatia é 1200 px, a corrediça é reduzida, o que não perde nenhum detalhe visível Quando uma fatia é mais estreita do que 1080 px, a corrediça é ampliada acima e olhará mais macio A imagem 4000 x 1333 em 4 corrediças do retrato dá 1000 px fatias, um alargamento suave de 1,08 x. Uma imagem larga de 2000 px dividida em 5 corrediças dá 400 px fatias, ampliada 2,7 x, e parecerá macia em um telefone.
Uma regra de ouro segue da aritmética: para slides nítidos, a fonte deve ter pelo menos 1080 px de largura por slide, então 4.320 px para 4 slides e 5.400 px para 5. se um panorama for menor do que isso, menos slides parecerão mais nítidos. Para saber mais por que ampliar não pode adicionar detalhes, consulte o guia em redimensionando imagens sem perder qualidade, que passa por redução de escala, aumento de escala e reamostragem.
O que causa uma costura visível e como você a conserta?
A maioria das costuras vem de uma das cinco causas e o gerador remove as duas primeiras.
| Sintoma | Causa provável | Consertar |
|---|---|---|
| Uma tira fina repetida ou ausente em uma junção | Limites de fatia fracionada arredondados independentemente | Use fatiamento de pixel inteiro, como faz o gerador |
| O último slide parece esticado ou curto | Pixels restantes despejados em um slide | Espalhe o restante nos slides principais |
| Desliza para fora da sequência | Carregado na ordem errada | Publique na ordem do número do arquivo, 01 primeiro |
| Um slide cortado de forma diferente do resto | Razões de aspecto mistas em uma postagem | Exporte cada slide no mesmo formato |
| Sujeito cortado no meio de um rosto ou placa | O limite do slide atinge o assunto | Altere a contagem de slides para que um limite se mova |
A última linha é um problema de composição, não técnico Com 4 slides, os limites ficam em 25%, 50% e 75% da tira; com 3 slides, em 33% e 67%. Se um rosto de person' s pousa exatamente em uma junção, um slide mais ou menos geralmente move o corte em algum lugar inofensivo Rostos e texto em uma junção sobrevivem ao deslizamento, mas parecem estranhos sempre que um espectador para em um único slide.
Quais são os limites da ferramenta?
O controle deslizante vai de 2 a 10 slides O Instagram permite mais, mas depois das dez um panorama típico não tem mais largura suficiente para dar a cada slide detalhes reais, e cada slide se torna uma faixa estreita que para de ser lida como uma imagem.
A colheita está sempre centrada Se a parte importante do panorama se senta perto da borda superior ou inferior e a altura escolhida dos acabamentos de contagem, altere a contagem ou corte a fonte primeiro com o cortador de imagem de mídia social, que permite escolher o ponto focal.
A entrada tem de ser um ficheiro que o navegador identifica como uma imagem e pode descodificar Um ficheiro que não seja uma imagem é recusado com uma mensagem a nomeá-la, e uma imagem corrompida ou uma num formato que o navegador não consegue ler obtém o & quot; Essa imagem não pôde ser lida." As fotos HEIC de um iPhone não são descodificadas pela maioria dos navegadores, por isso converta-as primeiro.
Como todas as ferramentas do site, os downloads contam para um limite de uso diário Não há marca d'água nem conta necessária.
O panorama é carregado em algum lugar?
Não. A imagem é decodificada, cortada, cortada e codificada em uma tela HTML no seu navegador, e o zip é montado localmente Nada é enviado para um servidor, armazenado ou registrado, e a página continua trabalhando com a rede desconectada depois de carregada. Isso é importante para fotos de produtos inéditos ou trabalhos de cliente que você ainda não publicou.
Ferramentas relacionadas para postes de carrossel
O gerador de rolagem fica ao lado de um punhado de outras ferramentas de imagem construídas para postagens sociais, todas elas do lado do cliente.
o cortador de imagem de mídia social corta uma única imagem para quinze tamanhos de plataforma com uma grade focal de nove pontos. O gerador fosco coloca uma imagem não quadrada em um quadrado ou retrato fosco para que toda a imagem sobreviva ao feed, que se adapta a um poste de capa que mostra o panorama completo pequeno antes do carrossel gerador de cartão fotográfico constrói cartões de cotação e gráficos de estilo de notícias a partir de modelos e do marcador d'água adiciona um logotipo ou marca d'água de assinatura, em um canto ou azulejo, antes de postar Cada ferramenta do conjunto está listada no centro de ferramentas de imagem social.
