O cara da informática

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

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

Artigos anteriores da série:

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

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

Olá pessoal. Hoje vou dar seguimento e fazer a terceira parte da imagem de cabeçalho do blog. Começamos criando as duas camadas que comportarão as imagens usadas (sim, ao contrário das duas etapas anteriores, vou usar duas imagens combinadas que, no final, se tornarão uma só imagem através da fusão de camadas). Darei os nomes de Imagem3aux e Imagem3, posicionadas nessa sequência e logo abaixo da camada Divisória2.

Na camada Imagem3, vou colocar uma foto das mãos de uma mulher digitando em um laptop, como na imagem abaixo:

Edição de imagem de cabeçalho parte 3

Agora, vou inserir na Imagem3aux uma imagem que criei em separado, com um trecho de código XHTML com cor azul (código hexadecimal 50d0ff) sobre fundo preto (em um outro artigo mostrarei como criar imagens desse tipo). O resultado é o seguinte:

Edição de imagem de cabeçalho parte 3

Veremos o porque de eu usar essas duas imagens. Como eu disse no artigo anterior dessa série, o objetivo é usar várias imagens que sejam uma referência visual às várias áreas de atuação existentes quando se trata de informática e tecnologia da informação. Nos artigos anteriores, usei imagens que remetem à infra-estrutura de redes e hardware; agora quero usar uma imagem que remeta à programação, por isso farei uma combinação das duas imagens mostrando ao mesmo tempo “o programador” e o código. Para isso, vou alterar o modo de exibição da camada Imagem3aux para o modo Overlay (sobreposição), clicando na caixa de seleção de modo no painel de camadas e fazendo a alteração de modo, como mostrado na imagem abaixo:

Edição de imagem de cabeçalho parte 3

O resultado:

Edição de imagem de cabeçalho parte 3

Agora, vamos aos ajustes: primeiro, quero que a camada Imagem3aux apareça de forma um pouco mais suave sobre a Imagem3; para isso, vou alterar a opacidade da camada para 50%, com o seguinte resultado:

Edição de imagem de cabeçalho parte 3

Em seguida, vamos fundir as duas camadas. Para isso, vamos selecionar a camada Imagem3aux e usar o comando de teclado ctrl+e, como fizemos no artigo anterior; depois de aplicado o comando, teremos somente a camada Imagem3, porém com todas as alterações feitas anteriormente preservadas em uma única camada.

Agora só precisamos fazer os cortes, seguindo os procedimentos usados nas edições anteriores. Vamos começar posicionando a camada Shape curva 2 (a da shape vermelha) para cortar a Imagem3:

Edição de imagem de cabeçalho parte 3

Usando o método descrito nos artigos anteriores, selecionamos a área a ser cortada e voilá:

Edição de imagem de cabeçalho parte 3

Agora vamos remover a sobra do outro lado, como fizemos com a Imagem2 no artigo anterior; como repetiremos o processo, vou mostrar aqui só o resultado final para essa imagem (ocultei as outras camadas para que só a Imagem3 ficasse visível):

Edição de imagem de cabeçalho parte 3

Vamos agora cortar a nossa shape branca (também seguindo o processo demonstrado nos artigos anteriores). Shape branca cortada, faremos nossa terceira divisória. Antes de qualquer coisa, vamos duplicar a camada da shape branca, como fizemos nas outras etapas e dar o nome Divisória3 para o clone. Feito isso, vamos posicionar a Shape curva 1 (a shape verde, lembram?) para fazer o corte da divisória:

Edição de imagem de cabeçalho parte 3

Agora, cortamos a nossa divisória e mudamos sua opacidade pra 100% (lembrem-se de mudar a opacidade da camada, pois as camadas duplicadas herdam as características das camadas originais, como eu demonstrei no primeiro artigo da série). O resultado final (já com as sombras aplicadas):

Edição de imagem de cabeçalho parte 3

No próximo artigo, a finalização do projeto. Tem alguma sugestão, comentário ou crítica? Deixe seu comentário, ficaremos muito satisfeitos em recebê-los e usar suas opiniões no nosso projeto! Até breve!

Anúncios

Uma resposta para “Criando uma imagem de cabeçalho para o blog – Parte 3

  1. 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: