O cara da informática

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

Arquivos de tags: Fusão

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

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

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

Olá, pessoal. Hoje, vamos a quarta e penúltima etapa da confecção do cabeçalho para o nosso blog (vocês já o verão instalado a partir da publicação deste artigo e, quando for lançada a quinta e última etapa dessa série, ele será atualizado para a sua versão final). Vou começar com um processo diferente dos artigos anteriores, pois quero calcular o espaço para as duas imagens que pretendo usar. Sendo assim, vou começar fazendo o corte da quarta divisória.

Para isso, duplico a nossa velha shape branca e dou o nome de Divisória4 à camada duplicada. Em seguida, vou usar as Shapes curvas 1 e 2 para marcar as posições de corte (reparem que, pelas posições ocupadas, podemos ver que essas shapes são de fato esferas e que, dependendo da posição, não conseguem preencher totalmente o espaço da imagem), como na amostra abaixo:

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

Todos os procedimentos de corte permanecem os mesmos descritos nos artigos anteriores. Não se esqueçam de selecionar a camada certa (Divisória4) antes de cortar. O resultado abaixo (com o efeito de sombra já aplicado à divisória):

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

Agora, logo abaixo da camada Divisória4, vou criar uma nova camada com o nome Imagem5 logo abaixo da Divisória4 e vou inserir esta imagem:

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

Precisaremos cortar essa imagem também; começo cortando a forma da Divisória4, com o seguinte resultado (ocultei a camada da Divisória4 para melhor visualização):

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

Agora, vou usar uma ferramenta de nome Quick selection tool (Ferramenta seleção rápida) com as configurações indicadas na barra de ferramentas da ferramenta, conforme aparece na imagem abaixo, para selecionar o resto da imagem:

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

Com a ferramenta selecionada, basta que eu clique na parte da imagem a ser removida e a mesma é totalmente selecionada. Em seguida, basta apertar delete:

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

Agora vou trabalhar na imagem que falta para fechar o espaço da imagem. Como falamos sobre design digital, resolvi usar uma imagem relacionada ao tema (a construção dessa imagem será descrita em um artigo à parte, o qual publicarei em breve). Ativo novamente a camada da Divisória4 e, acima desta, crio uma nova camada com nome Imagem4 e insiro a imagem na mesma:

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

Vejam que a imagem cobriu as outras imagens do canto – Divisória4 e Imagem5. Para podermos visualizar melhor, vamos passar a camada Imagem4 para baixo da Divisória4 e da Imagem5, temporariamente. Faço um ajuste no tamanho da imagem, pressionando o comando de teclado ctrl+t e reduzindo as dimensões para 90% de width (largura) e height (altura). Vejam o resultado:

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

Agora, vou fazer os cortes. Os procedimentos são os mesmos descritos nos artigos anteriores e na etapa anterior (Imagem5), portanto vou publicar o resultado já com os cortes feitos, camadas reposicionadas para as posições corretas e as sombras aplicadas:

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

É isso aí, pessoal, em breve a quinta e última etapa. Grande abraço!

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!

%d blogueiros gostam disto: