Imagem com padrão para banners de anúncios/promoções

Foto por Lauren Mancke

A maioria das vezes que posto algum tutorial tem gente que me fala "mas Jana, não sei mexer no photoshop", gente, eu também não sabia, mexo nele desde 2006 e aprendi tudo no google pesquisando.

As vezes é meio chato de achar alguma versão que não seja portable (portátil) ou trial (de teste), mas assim que você se familiariza um pouquinho, você acha mais fácil do que o Photofiltre ou o Photoscape. Eu mesmo não sei mexer nesses editores, por isso não trago os tutoriais. Mas sem fugir do post, vamos lá tentar fazer nosso texto com plano de fundo (pattern/background).

Esse aqui serve para aqueles planos de fundo que se repetem, normalmente é uma imagem menor que 500px e pode ser encontrada facilmente em tumblr's/sites de plano de fundo para twitter. Na postagem, vou usar um background do site Iemai, mas pode ser utilizado qualquer um, inclusive tem alguns aqui no blog.

1) Assim que você escolher a imagem, vamos abrir um novo documento no photoshop em File > New (atalho: ctrl+n). Na janela que aparecer, em Width(largura) o número de pixels deve ser menor que o número de pixels da caixa de postagem, aqui eu vou usar 600px de largura por 300px de altura. Não esqueça de definir o plano de fundo como branco no lugar de transparente.

2) Baixe o plano de fundo e abra-o no photoshop em File » Open (atalho: ctrl+o). Feito isso, vá em Edit » Define Pattern, escreva o nome que quiser e de OK e feche a imagem do background. Em seu arquivo, nas layers (camadas) que fica do lado direito que normalmente o último bloco, dê um duplo clique em "Background", que vaie estar com uma miniatura branca ao lado, vai aparecer uma caixinha e é só dar ok, você verá que o nome se mudará para "Layer 1".

4) Vá no menu superior, procure por Layers » Layer Style » Blending Options. Assim que aparecer o menuzinho, selecione a opção "Pattern Overlay" e na caixinha azul que aparecer, abra seu plano de fundo salvo, ele provavelmente será o último e dê OK.

5) OPCIONAL: Aperte CTRL + R, duas réguas irão aparecer, certo? Clique com o botão direito em cima de uma delas e selecione a opção pixel, clique e arraste para marcar o tamanho da bordinha que vai ficar. Feito isso, no menu vertical na esquerda, procure a ferramenta Rectangle Marquee Tool (atalho: letra M).

6) OPCIONAL: Abra uma nova layer em Layer » New » Layer (atalho Shift+CTRL+N) e pinte-a de branco com CTRL+DEL (ou ALT+DEL - isso depende das cores dos quadradinhos do menu vertical esquerdo). Depois de pintar o retângulo de branco, vá em Select » Modify » Contract e selecione o tamanho da borda na caixinha que aparecer, eu deixei 1px. Assim que você der OK, aperte delete e depois dê um botão direito dentro da seleção e escolha Deselect.

6.1) Para mudar a cor da borda: Selecione a camada que está a borda Layers » Layer Style » Blending Options e selecione Color Overlay.

6.2) Para mudar a opacidade da borda: em Layers (nos blocos que ficam na direita) selecione a camada que está a borda e vá em opacity, ai é só colocar um número entre 0% a 100%.

7) Agora vamos adicionar o texto, para isso iremos precisar de fontes diferentes. Caso você não saiba instalá-las, veja este tutorial. No menu lateral, procure o ícone com uma letra "T", essa ferramenta é a Horizontal Type Tool (atalho: T - meio óbvio, né?). (Pule para o passo 8 caso você tenha feito os passos 5 e 6) Clique e segure para selecionar o retângulo formado pelas linhas.

8) OPCIONAL: Como nós temos bordas, não podemos selecionar o retângulo das linhas porque o texto vai ficar grudado na borda e isso fica feio, portanto, você deve clicar e segurar DENTRO do retângulo formado.

9) Escreva o título, pule uma linha e deixe a outra linha vaga, escreva o conteúdo (se quiser: pular uma linha, deixar uma vaga e escrever o endereço do blog, sinta-se à vontade). Você pode usar duas ou mais fontes nesse mesmo texto. Basta selecionar as palavras e aplicar a fonte desejada pelo menu superior. Por esse menu tem como alterar tamanho, cor e etc, basta selecionar a palavra/frase.

Prontinho, ai está sua imagem criada! Agora é só salvar em File » Save as for web. Na caixa que aparecer, troque GIF por PNG-24 e clique em Save (no final da caixinha, lado direito).

Ai é só hospedar e colocar no post, resultado final:



Espero que vocês tenham gostado, qualquer dúvida é só me perguntar ^.~