Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como criar e adicionar cinemagraphs no WordPress

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja aprender a criar e adicionar Cinemagraphs em suas postagens do WordPress? Cinemagraphs são imagens com uma parte ou área em movimento enquanto o restante da imagem permanece imóvel. Essas imagens são altamente envolventes e acrescentam um elemento de narrativa aos seus artigos. Neste artigo, mostraremos a você como criar e adicionar cinemagraphs no WordPress com facilidade.

Creating cinemagraphs for your WordPress site

O que são Cinemagraphs?

Cinemagraphs são normalmente imagens GIF em que uma pequena parte da imagem está se movendo enquanto o restante permanece imóvel. Elas têm uma aparência muito cinematográfica, daí o nome cinemagraphs.

Cinemagraph preview

Elas acrescentam um elemento de narrativa às imagens, o que as torna mais atraentes. São particularmente úteis quando acompanham um conteúdo de formato longo, um episódio de podcast ou uma história em áudio.

Criar cinemagraphs é um pouco diferente dos GIFs comuns. Entretanto, se você tiver as ferramentas certas, com pouco esforço e alguma prática, poderá criar cinemagraphs impressionantes a partir de seus próprios vídeos.

Dito isso, vamos dar uma olhada em como criar e adicionar cinemagraphs facilmente no WordPress.

Criação de cinemagraphs a partir de vídeos

Para começar, você precisará dos seguintes itens:

  1. Um pequeno clipe de vídeo que deseja converter em uma cinemagrafia
  2. Adobe Photoshop
  3. Seu tempo, paciência e criatividade

Vamos começar.

Primeiro, você precisa preparar seu vídeo. Você pode usar uma ferramenta de edição de vídeo, como o iMovie, para cortar o vídeo até obter o clipe mínimo necessário para a cinemagrafia.

Em seguida, você precisa abrir o Photoshop e importar o vídeo para as camadas clicando no menu Arquivo ” Importar ” Quadros de vídeo para camadas.

Import your video into layers

Selecione o vídeo e, em seguida, clique no botão OK para continuar. Dependendo do tamanho do vídeo, ele pode demorar um pouco para ser totalmente importado.

Video to layers import

Depois que o vídeo for importado, você verá os quadros de vídeo como camadas no painel de camadas.

Layers imported from video

Agora você precisa selecionar todas as camadas, exceto a primeira camada (Camada 1).

Vá para Layer ” New ” Group From Layers menu ou pressione Command + G (CTRL+G no Windows) para adicionar camadas em um grupo.

Grouped layers

Em seguida, você precisa selecionar o grupo e ir para Layer ” Layer Mask ” Reveal All para adicionar uma máscara ao grupo.

Reveal all

Depois de adicionar a máscara, pressione as teclas Command + I (Ctrl + I no Windows) para inverter a cor da máscara.

Agora, defina a cor do primeiro plano como branco e clique na ferramenta pincel. Você precisa usar a ferramenta pincel para destacar a área que deseja mostrar no loop.

Brush the moving parts to highlight them

Depois disso, vá para Window ” Timeline (Janela ” Linha do tempo ) para abrir todas as suas camadas em um formato de animação.

Você notará que todos os quadros aparecem transparentes na linha do tempo, exceto o primeiro quadro.

Timeline

Para alterar isso, selecione a primeira camada (Camada 1) no painel de camadas, clique no ícone Unfiy Layer Visibility (Desajustar visibilidade da camada) e pressione o botão Match (Corresponder).

Unify visibility

Em seguida, clique no ícone de alternância da Linha do tempo e selecione todos os quadros. Depois disso, clique novamente no botão de alternância para escolher Copiar quadros.

Copy frames

Depois de copiar os quadros, clique no botão de alternância e selecione a opção “Paste Frames” (Colar quadros).

Você será solicitado a escolher um método de colagem. Selecione “Paste After Selection” (Colar após a seleção) e pressione o botão OK.

Paste after selection

Em seguida, você precisa clicar no ícone de alternância da linha do tempo mais uma vez e selecionar a opção “Reverse Frames” (Inverter quadros).

Reverse frames

Sua animação de cinemagraph está quase pronta.

Para salvá-la em seu computador, vá para a opção Arquivo ” Salvar para a Web. Isso abrirá uma janela pop-up em que você precisará selecionar o formato GIF e clicar no botão Salvar.

Save as GIF

E pronto, seu Cinematograph está pronto.

Você pode adicioná-lo ao seu site como faria com qualquer outro GIF no WordPress. Basta editar o post ou a página em que deseja adicionar o cinemagraph e clicar no botão Adicionar mídia.

Upload your cinemagraph GIF in WordPress

Isso abrirá o pop-up do carregador de mídia. Clique no botão selecionar arquivos para carregar o arquivo GIF do seu computador.

Após o upload, clique no botão “Insert into post” (Inserir na postagem) para continuar.

Agora você verá a imagem no editor de postagens do WordPress.

Não se esqueça de salvar ou atualizar a postagem. Agora você pode clicar no botão de visualização para ver a cinemagrafia em ação. Aqui está a cinemagrafia que criamos durante este tutorial.

Cinemagraph example

Esperamos que este artigo tenha ajudado você a aprender como criar e adicionar cinemagraphs no WordPress. Talvez você também queira ver nossa lista de sites que oferecem imagens livres de royalties para usuários do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

2 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Gary Stenzel says

    I have been making cinemagraphs with a free editor from Microsoft called “Cliplets”. It works really good and is easy to use.
    It’s a whole lot less complicated than using Photoshop.
    You should give it a try.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.