O cara da informática

Ele entende de computadores mas não é nenhum robô!

Criando uma imagem de cabeçalho para o blog – Parte 1

Hoje, começo um projeto de design digital para dar ao blog uma imagem de cabeçalho. Vou descrever e mostrar todo o processo de criação até chegar à arte-final, toda editada com o Adobe Photoshop CS4.

Seguindo as configurações do tema escolhido, criei uma matriz com exatos 960 x 200* pixels e, então, criei uma camada com cor azul chapada (código hexadecimal 007dc5) para referência visual. Essa será a camada de fundo (não-visível na arte-final):

Edição de imagem de cabeçalho

Com a camada de fundo em posição, criei uma segunda camada para posicionar a primeira imagem da arte, uma imagem com racks de rede estruturada, a qual vou chamar de imagem1:

Edição de imagem de cabeçalho

Feito isso, criei uma terceira camada, com uma shape retangular branca, a qual vou usar para fazer um efeito de divisão entre as várias imagens que vão compor a arte-final. Observe que esta camada está ajustada com opacidade de 50%, para que seja possível ver as camadas inferiores durante a edição (é possível ver a camada branca pelo efeito de translucência causado nas camadas de fundo e na imagem1):

Edição de imagem de cabeçalho

Em seguida, crio mais duas camadas, a camada 4 com uma shape curva verde, a qual vou chamar de shape curva 1…

Edição de imagem de cabeçalho

e a camada 5 com uma shape curva vermelha, a qual vou chamar de shape curva 2:

Edição de imagem de cabeçalho

Ambas as shapes coloridas são, de fato, dois círculos perfeitos bem grandes posicionados estrategicamente, de forma que só parte deles fiquem expostos. A borda curva é a parte que nos interessa no momento, então não há problema. Embora haja outras maneiras de realizar o que vem em seguida, o uso de grandes círculos bem posicionados se mostrou o método mais prático para mim.

Com todos os elementos em posição, iniciaremos os “cortes”. Quero cortar a imagem1 com o formato da shape vermelha. Para isso, vou selecionar os pixels da shape vermelha que estão visíveis dentro dos limites da matriz, clicando com o botão direito do mouse sobre a camada da mesma e selecionando a função “select pixels” (selecionar pixels) no menu de contexto, como na imagem abaixo:

Edição de imagem de cabeçalho

Os pixels da shape vermelha foram selecionados. Porém, eu quero que a imagem1 tenha exatamente a forma da shape vermelha, portanto quero cortar a parte que está além da mesma. Para isso, eu inverto a seleção com o comando ctrl+shift+i no teclado. Quando a seleção se inverter, seleciono a camada da imagem1 e aperto a tecla delete. O resultado será o seguinte (escondi as outras camadas para que o resultado ficasse visível):

Edição de imagem de cabeçalho

A imagem1 ficou com a mesma forma da shape vermelha. Meu desejo agora é remover a forma da shape vermelha da shape branca. Como ainda tenho uma seleção ativa, é só invertê-la novamente aplicando o comando ctrl+shift+i. Com a seleção invertida, seleciono agora a camada da shape branca e aperto a tecla delete. Observe o resultado:

Edição de imagem de cabeçalho

A shape branca foi “cortada” com o formato da shape vermelha.

Para finalizar esta primeira parte, vamos fazer a divisória branca entre a imagem1 e a imagem2 (a imagem2 será introduzida no próximo artigo, junto com as outras imagens). Antes de começar com os cortes, vou fazer uma cópia da shape branca e dar-lhe o nome divisória1. Faço isso selecionando sua camada e acessando o menu Layer/Duplicate layer (Camada/Duplicar camada), como na imagem abaixo:

Edição de imagem de cabeçalho

Com a camada duplicada e renomeada, vou agora esconder a camada da shape branca original. Em seguida, vou selecionar os pixels da shape verde da mesma forma que fiz para selecionar os pixels da shape vermelha e então inverter a seleção. Feito isso, vou selecionar a camada da divisória1 e apertar a tecla delete. O resultado será o seguinte (escondi as outras camadas para que o resultado ficasse visível):

Edição de imagem de cabeçalho

Agora só falta aplicar as sombras para criar o efeito visual desejado, mas antes devemos tornar a divisória branca totalmente opaca (ela está translúcida pois herdou a configuração de opacidade de 50% da camada da shape branca original). Para isso, é só ajustar a opacidade desta camada para 100%.

Antes de aplicar os efeitos de sombra, preciso reposicionar as camadas. Quero que a sombra da imagem1 cubra parte da divisória1; para isso, preciso posicionar a camada da imagem1 sobre a camada da divisória1. Feito isso, vou clicar com o botão direito do mouse na camada da imagem1 e selecionar a opção “blending options” (opções de mesclagem) no menu de contexto, como na imagem abaixo:

Edição de imagem de cabeçalho

No painel aberto, vou selecionar a função “Drop shadow” (sombra projetada) e fazer os seguintes ajustes no quadro de configurações:

Edição de imagem de cabeçalho

Observe que, como resultado, surgiu uma sombra da imagem1 projetada sobre a divisória1:

Edição de imagem de cabeçalho

Quero que uma sombra de divisória1 seja projetada sobre o plano de fundo; para isso, vou repetir o processo acima na camada da divisória1. O resultado:

Edição de imagem de cabeçalho

No próximo artigo, darei continuidade à confecção da imagem de cabeçalho do blog. Gostaria de saber suas opiniões e sugestões sobre que tipo de efeitos ou imagens eu devo usar nas etapas seguintes (mesmo que seja pra dizer que a etapa seguinte deve ser jogar tudo fora – tá tudo horrível – e começar do zero). Até lá!

*As imagens publicadas neste artigo possuem as medidas 480 x 100 pixels, metade das medidas da imagem real.

Anúncios

8 Respostas para “Criando uma imagem de cabeçalho para o blog – Parte 1

  1. Fillipe Silva 30/04/2011 às 13:52

    Gabriel,

    Achei legal a iniciativa de mostrar passo a passo como está sendo feito alguma coisa que terá real utilidde no seu blog.

    Acho que um foco legal que você pode começar a dar aos seus posts é o de mostrar qual a sua motivação ao fazer determinado passo.

    Por exemplo: Porque o banner terá essa imagem de computador com vários fios aparecendo? No que isso ajudará na experiência de um usuário ao entrar no seu blog.

    Porque esse efeito de uma página sendo virada? Porque este tamanho for escolhido?

    Acredito que essas informações seriam muito importantes e dariam um foco que não seria de apenas um tutorial de PhotoShop.

    Um grande abraço e espero pela continuação dessa série de posts.

  2. Gabriel Oliveira 02/05/2011 às 11:49

    Bem-vindo, Fillipe, obrigado pela visita e pelas dicas! Sem dúvida serão de grande ajuda para os próximos posts! Grande abraço e volte sempre, em breve posto a continuação desse trabalho e entro com algumas explicações sobre o que você indicou e questionou, ok? Será um prazer tê-lo acompanhando nosso trabalho!

    Só uma coisa que quero esclarecer de uma vez sobre essa arte e sobre seus questionamentos: você me pergunta sobre esse “banner”… mas eu não disse que essa imagem será um banner, eu disse que ela será uma imagem de cabeçalho para o blog! Eu farei banners posteriormente para os links dos parceiros, mas essa imagem em especial é somente para o cabeçalho do blog!

    Grande abraço!

  3. Thalita Langbehn 02/05/2011 às 22:50

    Gostei das informações. Acho que o blog ele deve mesmo ser de interesse público e prestar esse tipo de serviço.

    Ótima iniciativa!

  4. Danilo Ramos 03/05/2011 às 22:38

    fala Gabriel, muito bem explicado seu tutorial, ah… o seu comentário teve resposta no css orbit.

    Abraço !

  5. Pingback: Criando uma imagem de cabeçalho para o blog – Parte 2 « O cara da informática

  6. Pingback: Criando uma imagem de cabeçalho para o blog – Parte 3 « O cara da informática

  7. Pingback: Criando uma imagem de cabeçalho para o blog – Parte 4 « O cara da informática

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: