Como criar e usar planos de fundo texturizados com as opções de design da Divi

No tutorial Divi de hoje, vamos mostrar como você pode criar planos de fundo texturizados simples e usá-los como planos de fundo para suas seções para tornar seu site um pouco mais autêntico. Se você verificar nosso recente Layout de gerenciamento de aprendizagem gratuito, verá que também usamos um plano de fundo texturizado em todas as páginas.

Agora, vamos começar mostrando dois tipos de texturas que recriaremos com o Photoshop; texturas feitas com formas e texturas feitas com pincéis. Depois de saber como fazer isso, você pode ser tão criativo quanto quiser e criar fundos texturizados autênticos. Depois disso, mostraremos como você pode criar resultados impressionantes combinando os fundos texturizados e as opções de design do Divi.

Resultado de imagem feito com formas

A primeira imagem que mostraremos como criar com o Photoshop se parece com isto:

Resultado com as opções de design da Divi

E uma vez integrado ao Divi, você pode obter resultados impressionantes como este:

Resultado de imagem feito com pincéis

A segunda imagem que faremos tem a seguinte aparência:

Resultado com as opções de design da Divi

E pode fornecer o seguinte resultado maravilhoso ao usá-lo em seu site:

Como criar e usar planos de fundo texturizados com as opções de design da Divi

Inscreva-se no nosso canal no Youtube

Crie um fundo texturizado com o Photoshop

Feito com formas

O primeiro plano de fundo texturizado que mostraremos como recriar tem principalmente formas criadas com a ferramenta Laço poligonal e a ferramenta Borracha. Iremos guiá-lo passo a passo sobre como criar o seguinte resultado:

Novo arquivo

Abra o Photoshop e comece adicionando um novo arquivo. Este arquivo terá uma largura de 1920 px e uma altura de 847 px.

Adicionar cor de fundo

Em seguida, adicione uma cor de fundo ao arquivo que você acabou de criar. Certifique-se de usar cores cinza ligeiramente mais escuras em todo o processo. É essencial usar uma cor um pouco mais escura, pois ela o ajudará mais tarde neste post ao adicionar opções de design Divi. Neste exemplo, usamos '# 626262' como cor de fundo e usamos a ferramenta Lata de tinta para adicionar a cor à camada.

Adicionar Camada 2

Continue adicionando uma nova camada logo acima da primeira camada.

Adicione a primeira forma à camada 2

Em seguida, selecione a Polygonal Lasso Tool e comece a fazer uma forma tendo a Camada 2 selecionada.

Uma vez feito isso, selecione a ferramenta Lata de tinta e use '# 747474' para colorir a parte selecionada.

Adicionar Camada 3

Em seguida, adicione outra camada logo acima da Camada 2.

Adicione a segunda forma, camada 3

Continue fazendo outra forma, como a da tela de impressão abaixo, usando a Polygonal Lasso Tool.

Selecione a ferramenta Lata de tinta e use '# 6a6a6a' desta vez.

Até agora, sua imagem deve ser parecida com esta:

Use a ferramenta Borracha na Camada 3

Seguindo em frente, selecione a ferramenta Borracha enquanto seleciona a Camada 3.

Use a ferramenta Borracha junto com um pincel de dureza de 0% e tamanho de 338px.

Então, vá em frente e apague a área que você deseja que desapareça. Nós deliberadamente deixamos apenas uma pequena parte da Camada 3, onde você pode ver uma transição entre a Camada 2 e a Camada 3.

Duplicar, transformar, girar e posicionar camadas no lado oposto

Agora que criamos o lado esquerdo, o outro lado será muito mais rápido. Queremos que seja exatamente o mesmo, é por isso que vamos selecionar a camada 2 e a camada 3. Em seguida, vamos duplicar as camadas.

Depois de duplicados, você os verá aparecer em sua lista de camadas.

Com as duas camadas duplicadas selecionadas, vá em Edit> Transform> Rotate 180 ° e arraste as camadas para o outro lado da imagem.

Salvar para a web

A única coisa que resta a fazer é salvar a imagem. Para fazer isso, clique em Arquivo> Exportar> Salvar para a web .

Por último, certifique-se de que o arquivo é um arquivo JPG ou PNG e salve-o.

Feito com escovas

A seguir, mostraremos como criar fundos texturizados usando pincéis. O plano de fundo texturizado que mostraremos como recriar se parece, neste caso, com este:

Novo arquivo

Comece novamente criando um novo documento com uma largura de 1920 px e uma altura de 847 px.

Adicionar cor de fundo

Feito isso, adicione um plano de fundo à primeira camada com o código de cores '# 8f8f8f'.

Pesquisar Pincel Correspondente Online

A próxima etapa é encontrar um pincel que corresponda ao estilo de sua seção de herói. Existem muitos pincéis gratuitos do Photoshop que são impressionantes e também são gratuitos. Você pode encontrar e baixar aquele que usaremos neste tutorial, indo para a página seguinte.

Pincel de upload

Localize o arquivo ABR em seu computador e vá para o Photoshop para carregar os pincéis. Selecione Editar> Predefinições> Gerenciador de predefinições> Pincéis> Carregar e selecione o arquivo ABR que você salvou em seu computador.

Adicionar Camada 2

Uma vez feito isso, adicione outra camada logo acima da Camada 1.

Use o pincel com a cor mais clara

Em seguida, você pode começar a usar o pincel para criar o plano de fundo texturizado que deseja, selecionando a ferramenta Pincel.

Escolha o pincel desejado com um tamanho de 600px e use uma opacidade de 60%.

'

A primeira cor que usaremos é '# a0a0a0'. Vá em frente e faça a primeira camada de pincel em sua imagem.

Use o mesmo pincel com uma cor mais escura

Em seguida, substitua a cor anterior por '#ababab' e faça a mesma coisa.

Use o mesmo pincel com a cor mais escura

Por último, você precisará usar a cor '# 686868' para finalizar o plano de fundo texturizado.

Salvar para a web

Agora que seu plano de fundo texturizado está pronto, a única coisa que resta fazer é salvar a imagem. Para fazer isso, selecione Arquivo> Exportar> Salvar para a web .

Mais uma vez, escolha se deseja salvar sua imagem como um arquivo JPG ou PNG.

Adicionar fundos texturizados às seções

Plano de fundo texturizado feito com formas

Você pode brincar com as configurações de plano de fundo do Divi para obter o resultado exato que deseja depois de criar as imagens. Para o fundo texturizado feito com formas, vamos escolher um tipo de gradiente radial para ter uma das cores do gradiente no meio e a outra em harmonia com nossa imagem de fundo.

Fundo Gradiente

Use o seguinte fundo gradiente para sua seção:

• Primeira cor: # 474ab6
• Segunda cor: # 9271f6
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 41%
• Posição final: 100%

Opções de combinação de imagens

Em seguida, faça upload da imagem e use as seguintes configurações:

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: sobreposição

Plano de fundo texturizado feito com pincéis

O fundo gradiente que vamos usar para o fundo texturizado feito com pincéis é linear. Faremos uma transição sutil que ainda separará um pouco a cor que está sendo usada em harmonia com a imagem de fundo.

Fundo Gradiente

Abra as configurações da seção e use as seguintes configurações para a subcategoria Plano de fundo:

• Primeira cor: # 474ab6
• Segunda cor: # 9271f6
• Tipo de gradiente: Linear
• Direção do gradiente: 270 graus
• Posição inicial: 70%
• Posição final: 100%

Opções de combinação de imagens

Em seguida, faça upload da imagem de plano de fundo e use as seguintes configurações com ela:

• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: sobreposição

Resultado

Agora que passamos por todas as etapas, vamos, mais uma vez, dar uma olhada no resultado final.

Resultado de imagem feito com formas

Resultado com as opções de design da Divi

Resultado de imagem feito com pincéis

Resultado com as opções de design da Divi

Pensamentos finais

Neste post, mostramos como você pode usar fundos texturizados para tornar seu site mais autêntico. Mostramos como você pode criar dois tipos de texturas com o Photoshop e seguimos mostrando como você pode usá-los em suas seções junto com as opções de design do Divi. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por WEB-DESIGN / shutterstock.com