O uso de imagens em sites é muito importante, tanto para SEO (Otimização nos Buscadores) quanto para Experiência do Usuário.

É importante saber que a maioria das imagens na internet tem direitos autorais, então vou deixar aqui 5 bancos de imagens gratuitos. Assim você não terá problemas.

Passo 1 – Configuração

Abra o Photoshop e crie um novo documento, Arquivo > Novo ou CTRL+N (Photoshop).

Criar banner gratuito - Passo 1

Defina um nome para o arquivo;

Medidas: Largura e Altura;

Resolução: 72 Pixels/polegada;

Modo de Cores: Cores RGB – 8 Bits.

Feito isso clique em “OK” ou pressione “Enter“.

Com o documento já criado, dê um duplo clique no ícone do cadeado em cima da primeira camada (layer) então confirme ou pressione “Enter” para começar a criar.

Criar banner gratuito - Passo 2

Passo 2 – Cores

Agora insira uma cor degradê no fundo do documento. Selecione a Ferramenta Degrade (G).

Criar banner gratuito - Passo 3

Na parte superior defina as cores para o fundo.

Criar banner gratuito - Passo 4

Dica: O Adobe Kuler tem uma biblioteca grátis com várias combinações de cores. E você também pode criar a sua combinação.

Cores utilizadas: #05D4D2 e #31A7E9 em hexadecimal.

Criar banner gratuito - Passo 5

Inseridas as cores, pressione “Enter” ou clique em “Ok“.

Em seguida, segure “Shift” e faça um traço com a ferramenta selecionada no meio do documento. Como na imagem seguinte.

Criar banner gratuito - Passo 6

O seu documento deverá ficar assim:

Criar banner gratuito - Passo 7

Passo 3 – Imagem de Fundo

Agora insira uma imagem de fundo. Se sua imagem já está salva no computador, arraste para dentro da ferramenta Photoshop.

Criar banner gratuito - Passo 8

Feito isso, aperte “Enter“, em seguida CTRL+T para transformar a imagem (lembre desse comando). Ajuste a imagem com o tamanho do arquivo, sempre segurando a tecla Shift. Quando ajustada, aperte “Enter novamente.

Agora, na opção de Opacidade, na barra lateral direita, ajuste para 20%.

Criar banner gratuito - Passo 9

Passo 4 – Textos

Insira sua Logo em formato PNG na parte esquerda do documento. Arraste, como feito no passo anterior. Pressione “Enter“, e em seguida CTRL+T para ajustar tamanho e posicionamento.

Criar banner gratuito - Passo 10

Agora insira o texto ao lado da sua Logo. Clique na Ferramenta Texto Horizontal ou pressione “T“.

Dica: O Google disponibiliza várias fontes para download gratuito aqui.

Criar banner gratuito - Passo 11

Assim que selecionar a ferramenta, clique no documento para inserir textos.

Criar banner gratuito - Passo 12

Passo 5 – Botão

Nesse passo insira um CTA – Call to Action, uma chamada para uma ação, como links ou funções que levam o usuário a realizar uma ação.

Selecione a Ferramenta Retângulo Arredondado (U).

Criar banner gratuito - Passo 13

Na parte superior, defina o raio em 30 px.

Criar banner gratuito - Passo 14

Com a ferramenta selecionada faça um retângulo no documento com aproximadamente 6 cm de largura com 1,5 cm de altura. Como na imagem seguinte:

Criar banner gratuito - Passo 15

Lembrando que essas medidas são para esse tutorial. Elas podem mudar de acordo com o tamanho do seu banner.

Com o retângulo arredondado feito, insira um texto novamente (tecla “T”), digite uma chamada para o Call to Action (CTA), como por exemplo: Confira, Veja Isto, Não Perca, Assine Agora, Contrate Agora, Acesse… Com o texto criado, aperte CTRL+T para posiciona-lo em cima do retângulo.

Criar banner gratuito - Passo 16

Passo 6 – Salvando

Agora é só salvar a imagem e inserir no seu blog ou loja virtual. Na parte esquerda superior, clique em Arquivo e em seguinte Salvar para Web ou pressione Alt+Shift+Ctrl+S.

Criar banner gratuito - Passo 17

Aparecerá a seguinte tela.

Criar banner gratuito - Passo 18

Nesta seção, certifique-se que o formato esteja em JPEG, a qualidade e porcentagem em 100. Após verificar isso, clique em Salvar.