Pular para o conteúdo principal
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.