Como criar um efeito de rolagem de fundo de camada dupla com Divi
Publicados: 2021-06-17Se você está procurando uma maneira de fazer seu site se destacar, pode aprender como criar fundos de duas camadas. A criação de fundos de camada dupla ajudará a dar vida à imagem de fundo por meio do movimento. No tutorial de hoje, mostraremos como criar um design de plano de fundo de camada dupla com Divi. Este tutorial contém três partes:
- Preparando dois arquivos de imagem no Adobe Photoshop
- Criando o design dentro do Divi
- Aplicando os efeitos de rolagem para animar o plano de fundo
Você também poderá baixar o JSON e os arquivos de imagem gratuitamente!
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Baixe o layout GRATUITAMENTE
Para colocar as mãos no layout gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
1. Crie arquivos de imagem no Photoshop
Escolha a imagem do produto com fundo limpo e abra no Photoshop
Na primeira parte deste tutorial, vamos criar os arquivos de imagem que usaremos em todo o tutorial Divi. Para criá-los, usaremos o Adobe Photoshop, mas fique à vontade para usar qualquer outro software de edição de imagens de sua escolha. O efeito de imagem de fundo de camada dupla funcionará melhor se a imagem com a qual você está trabalhando tiver:
- Um foco claro em um objeto dentro da imagem
- Um fundo limpo
A imagem abaixo é um exemplo perfeito. Você pode encontrar este arquivo de imagem na pasta compactada compartilhada na área de download deste post.
Duplicar Camada
Depois de abrir a imagem dentro do Photoshop, clone a camada original uma vez. Estaremos trabalhando na camada duplicada.
Esconder a Camada Original
Para ter certeza de que vemos o resultado conforme avançamos no tutorial, oculte a camada original.
Criar PNG a partir da seleção de objetos na imagem
Use a ferramenta de seleção rápida na placa
No total, precisaremos de dois arquivos de imagem para o tutorial:
- um PNG do objeto, neste caso, a placa
- um JPEG do fundo sem o objeto
Estamos separando o objeto de seu fundo, para que possamos manipulá-los individualmente uma vez dentro do ambiente Divi.
Para começar a selecionar o objeto, escolha a “Ferramenta de Seleção Rápida” na barra de ferramentas e tente cobrir o máximo possível do objeto.
Selecionar + Seleção de Máscara
Você notará que a seleção do objeto ainda não é boa o suficiente. Você pode ajustar a aparência de sua seleção usando a opção “Selecionar e mascarar” ao clicar com o botão direito do mouse na seleção. Uma vez lá, você pode brincar com a opacidade, suavidade, etc.
Crie uma máscara de camada a partir da seleção
Embora tenhamos criado uma seleção suave, ainda existem partes dentro do objeto que ainda não foram selecionadas. Adicionaremos manualmente essas partes à nossa seleção clicando no botão de máscara de camada que você pode ver na tela de impressão abaixo:
Seleção Finetune Dentro da Máscara com Pincéis
Uma vez que sua máscara de camada foi criada, você pode começar a usar um pincel para modificar a máscara de camada. Certifique-se de que sua máscara de camada está selecionada.
- Usar um pincel preto (# 000) removerá partes de sua máscara de camada
- Usar um pincel branco (#fff) adicionará partes de trás de sua máscara de camada
Use um pincel que não tenha muita dureza, então você não precisa ser superpreciso.
Máscara de verificação dupla com camada colorida
Você sempre pode verificar sua máscara de camada colocando uma camada colorida abaixo dela. Camadas coloridas irão denunciá-lo mais facilmente se você perder um ponto.
Salvar seleção PNG como arquivo de imagem separado
Criar Novo Arquivo
Agora que você tem a seleção PNG do seu objeto, pode clonar a camada inteira, para que possa sempre voltar a ela. Na próxima parte, usaremos a camada duplicada para criar a imagem de fundo sem o objeto.
O tamanho do nosso objeto é bem menor do que o tamanho do arquivo inicial, então vamos criar um novo arquivo para o nosso objeto e trazê-lo.
Ajustar seleção em novo arquivo
Copie e cole a camada com sua máscara de camada dentro do novo arquivo que você criou.
Exportar para a Web
E exporte-o para a web como PNG.
Compactar arquivo de imagem
PNGs com fundos transparentes tendem a ter um tamanho de arquivo maior, portanto, é recomendável compactar o arquivo usando uma ferramenta de sua escolha.
Remover objeto da imagem original
Selecione Camada de Máscara
De volta ao arquivo inicial do Photoshop! Lá, vamos criar a imagem de fundo sem o objeto. Estamos usando a camada superior de nosso arquivo para fazer isso. Primeiro, certifique-se de que sua máscara de camada esteja selecionada.
Inverter máscara
Em seguida, vá até as propriedades desta camada e clique em “Inverter”.
Aplicar Máscara de Camada
Você agora notará que o objeto é transparente dentro da camada inicial. Vamos aplicar a máscara de camada à nossa camada clicando com o botão direito e selecionando “Aplicar máscara de camada”.
Preencher o espaço vazio usando a ferramenta Clone
Ainda temos um buraco no meio, que precisamos preencher. É aí que a ferramenta de clonagem se torna útil. Selecione um tamanho de pincel de sua escolha e preencha a imagem. Você não precisa ser muito exato com isso, dentro do tutorial Divi, vamos colocar o objeto em cima dele.
Salvar imagem sem objeto
Exportar para a Web
Depois de concluir a imagem de fundo sem o objeto, você pode salvá-la como um arquivo JPEG com qualidade de 70%.
Compactar arquivo de imagem
Certifique-se de compactar esta imagem também.
2. Construir efeito de fundo de camada dupla em Divi
Adicionar nova seção
Carregar imagem de fundo
Assim que você tiver os dois arquivos de imagem ao seu alcance, é hora de mudar para o Divi! Abra uma nova página e adicione uma nova seção. Carregue a imagem de plano de fundo que você criou na primeira parte do tutorial.
Espaçamento
Vá para a guia de design da seção e aplique alguns valores de espaçamento personalizados. A margem inferior que estamos adicionando nos ajudará a ver o efeito se encaixar. Normalmente, essa margem será substituída pelas próximas seções em seu design.
- Margem inferior: 100vh
- Enchimento superior:
- Desktop: 100px
- Tablet e telefone: 50px
- Preenchimento inferior:
- Desktop: 100px
- Tablet: 600px
- Telefone: 500px
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar módulos ainda, abra as configurações de linha e altere a largura e a largura máxima. Essas configurações permitirão que a linha toque os lados esquerdo e direito do contêiner de seção o tempo todo. Dessa forma, podemos garantir que as imagens PNG e de fundo tenham o mesmo equilíbrio em todos os tamanhos de tela.
- Largura: 100%
- Largura máxima: 100%
Espaçamento
Vá para as configurações de espaçamento da linha a seguir e remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Posição
Em seguida, reposicione toda a linha.
- Posição: Absoluta
- Localização:
- Desktop: Center
- Tablet e telefone: parte inferior central
- Deslocamento vertical:
- Área de Trabalho: /
- Tablet e telefone: 30vh
Adicionar Módulo de Imagem à Linha
Carregar imagem PNG
Depois de concluir as configurações da linha, adicione um Módulo de imagem à linha e carregue o arquivo PNG que você criou na primeira parte do tutorial.
Alinhamento
Vá para a guia de design e altere o alinhamento da imagem.
- Alinhamento de imagem: centro
Dimensionamento
Altere as configurações de dimensionamento a seguir.
- Largura:
- Desktop: 36%
- Tablet e telefone: 60%
Adicionar linha # 2
Estrutura da Coluna
Em seguida, adicione outra linha à seção usando a seguinte estrutura de coluna:
Cor de fundo
Abra as configurações de linha e altere a cor de fundo.
- Cor de fundo: #ffffff
Dimensionamento
Modifique as configurações de dimensionamento a seguir.
- Largura: 90%
- Largura máxima: 550 px
- Alinhamento de linha:
- Desktop: Esquerda
- Tablet e telefone: centro
Espaçamento
Em seguida, aplique alguns valores de preenchimento personalizados.
- Enchimento superior: 11%
- Estofamento inferior: 11%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Deslocamento horizontal
Estamos adicionando algum deslocamento horizontal às configurações de posição também.
- Deslocamento horizontal:
- Desktop: 5%
- Tablet e telefone: 0%
Adicione o Módulo de Texto # 1 à Coluna 1
Adicionar conteúdo H2
É hora de adicionar módulos, começando com um primeiro Módulo de texto contendo algum conteúdo H2.
Configurações de texto H2
Defina o estilo do texto H2 da seguinte maneira:
- Fonte do título 2: Kumbh Sans
- Tamanho do texto do título 2:
- Desktop: 90px
- Tablet: 60px
- Telefone: 45px
Adicione o Módulo de Texto # 2 à Coluna 1
Adicionar conteúdo de descrição
Adicione outro Módulo de Texto logo abaixo do anterior e insira algum conteúdo descritivo de sua escolha.
Configurações de texto
Altere as configurações de texto do módulo de acordo:
- Fonte do texto: Kumbh Sans
- Altura da linha de texto: 2em
Adicionar Módulo de Botão à Coluna 1
Adicionar cópia
O último módulo de que precisamos nesta coluna é um Módulo de botão. Adicione alguma cópia de sua escolha.
Configurações de botão
Defina o estilo do botão de acordo:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 20 px
- Cor do texto do botão: # 6b6443
- Largura da borda do botão: 0 px
- Raio da borda do botão: 0 px
- Fonte do botão: Kumbh Sans
- Peso da fonte do botão: negrito
- Mostrar ícone do botão: Sim
- Posicionamento do ícone do botão: Esquerda
- Mostrar apenas o ícone ao passar o mouse para o botão: Não
Sombra da caixa
Inclua também uma sombra de caixa.
- Posição horizontal da sombra da caixa: 0 px
- Posição vertical da sombra da caixa: 2 px
- Cor da sombra: # 6b6443
3. Adicionar efeitos de rolagem
Movimento vertical da imagem
Na última parte deste tutorial, vamos nos concentrar em adicionar os efeitos de rolagem ao Módulo de Imagem que contém o arquivo de imagem PNG. Abra as configurações do módulo, navegue até a guia avançada e aplique as seguintes configurações de movimento vertical:
- Habilitar movimento vertical: Sim
- Compensação inicial:
- Desktop: 0
- Tablet e telefone: 4 (a 0%)
- Offset médio:
- Desktop: 0
- Tablet e telefone: 0 (em 97%)
- Compensação final:
- Desktop: 0
- Tablet e telefone: -2 (em 100%)
Movimento horizontal da imagem
Estamos concluindo nosso projeto usando as seguintes configurações de movimento horizontal:
- Habilitar Movimento Horizontal: Sim
- Compensação inicial:
- Desktop: 0 (a 0%)
- Tablet e telefone: 0
- Offset médio:
- Desktop: 0 (em 65%)
- Tablet e telefone: 0 (em 97%)
- Compensação final:
- Desktop: -10 (em 100%)
- Tablet e telefone: 0
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Nesta postagem, mostramos como criar um fundo de camada dupla e animá-lo com os efeitos de rolagem integrados do Divi. Na primeira parte do tutorial, preparamos os arquivos de imagem dentro do Adobe Photoshop. Na parte dois do tutorial, nos concentramos em usar os arquivos de imagem dentro do Divi para criar um design responsivo. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.