O cara da informática

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

Arquivos de tags: Design

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!

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

Artigos anteriores da série:

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

Continuando o projeto para dar ao blog uma imagem de cabeçalho. Antes de seguir com as explicações, queria esclarecer algumas pontos citados pelo nosso amigo Fillipe Silva:

1°) Essa projeto não é para um banner, pelo menos não no sentido convencional, não daqueles banners para divulgação em sites parceiros; é uma imagem decorativa para o cabeçalho do blog (quando o projeto estiver concluído, ele será inserido no blog, então todos poderão ver bem do que se trata). Achei interessante criar essa série de artigos explicando o processo, pois há vários macetes que eu uso aqui que podem ser úteis para outros designers também;

2°) As imagens escolhidas para o projeto são imagens relacionadas às várias áreas de abrangência do que chamamos, como um todo, de TI (Tecnologia da Computação), como, por exemplo, redes, programação, CG (Computação Gráfica), hardware, etc. Cada imagem tem por objetivo fazer com que o visitante faça uma associação visual com os vários temas abordados no blog;

3°)As divisórias brancas não terão como objetivo dar o efeito de páginas virando e sim servir mesmo de divisórias entre uma imagem e outra. No momento certo, um outro elemento visual será inserido nessas divisórias, dando uma aparência totalmente diferente da atual;

4°) As medidas usadas foram escolhidas por se encaixarem nas medidas máximas permitidas pelo lay-out usado no momento. Assim, a imagem de cabeçalho irá cobrir toda a extensão horizontal da página (nos posts estou publicando imagens com a metade do tamanho das medidas originais para que as amostras fiquem totalmente visíveis, sem cortes ou distorções).

Agora voltemos ao projeto: vou inserir as outras imagens escolhidas. Começo por uma imagem de uma placa de circuito integrado, conforme a amostra abaixo:

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

Essa imagem foi inserida na camada de nome Imagem2, esta camada ficando logo abaixo da camada Divisória1. Agora, quero aumentar um pouco o contraste dessa imagem, dar mais vida e brilho às cores da placa. Para isso, vou usar uma camada de ajuste de brilho e contraste sobre a camada da imagem. Para isso, com a camada da imagem selecionada, vou acessar o menu Layer/New adjustment layer/Brightness/Contrast (Camada/Nova camada de ajuste/Brilho/Contraste):

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

Essa camada terá o nome Imagem2 ajustes. Ao criar a camada, o painel de ajuste de brilho e contraste aparecerá na barra de ferramentas da direita, logo acima do quadro de camadas. Usarei os valores +50 para brighness (brilho) e +100 para contrast (contraste), como na imagem abaixo:

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

O resultado:

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

Notem como o “verde” da placa está mais claro e brilhante e o “preto” está mais preto. Agora, preciso fundir a camada de ajuste e a camada da Imagem2 em uma única camada; para isso, vou usar, com a camada de ajuste selecionada, o comando ctrl+e no teclado, que fará a fusão dessa camada com a camada de baixo (merge down). Antes da fusão…

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

…e depois da fusão (repare que a camada de ajuste sumiu, ficando apenas a camada Imagem2, porém os efeitos aplicados permanecem):

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

Agora, vamos aos cortes: para isso, vou reposicionar as shapes coloridas que usei para cortar a Imagem1 (como eu disse antes, essas shapes são grandes circunferências perfeitas, então é muito simples reposicioná-las para fazer os cortes das imagens). Começo com a shape curva 2 (a shape vermelha) para cortar o lado direito da imagem, usando o mesmo processo descrito no artigo anterior (https://ocaradainformatica.wordpress.com/2011/04/30/criando-uma-imagem-de-cabecalho-para-o-blog-%e2%80%93-parte-1/). Observe a nova posição da shape (veja a Imagem2 por baixo):

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

E a Imagem2 já cortada – não se esqueça de selecionar a camada correta antes de fazer o corte (ocultei a Shape curva 2 para ficar mais visível):

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

Agora, vou usar o mesmo processo para cortar o outro lado, usando a forma da Divisória1. O resultado (ocultei as outras camadas para deixar visível o resultado em Imagem2 somente):

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

É possível ver que há uma sobra da imagem original no canto esquerdo e precisamos remover essa sobra. Uma forma simples é usar a Retangular Marquee Tool (Ferramenta Letreiro Retangular) para remover a maior parte…

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

…e então a Eraser Tool (Ferramenta Borracha) para remover o resto:

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

O resultado:

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

Agora falta fazer os cortes na Shape branca para criar a Divisória2. Para isso, vamos fazer uma cópia da camada da Shape branca e dar o nome de Divisória2, como fizemos com a Divisória1 no artigo anterior. Em seguida, vamos usar a Shape curva 1, reposicionando-a da seguinte forma…

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

…e cortando a Divisória2 usando o método descrito no artigo anterior, com o seguinte resultado:

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

Ainda falta cortar a forma de Imagem2 e Divisória1 de Divisória2; faremos isso selecionando os pixels de Imagem2 e de Divisória1, cortando-os de Divisória2, com o seguinte resultado:

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

Caso sobre alguma linha como resto do corte (como sobrou na minha), use a ferramente Rectangular Marquee Tool para removê-la. A imagem agora tem esta aparência (eu já apliquei as sombras nas novas camadas na amostra abaixo):

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

No próximo artigo, as etapas seguintes. Até lá!

Artes 2D e 3D fantásticas com Marvin!

Hoje quero divulgar o excelente trabalho de um grande artista gráfico, que trabalha tanto com 2D como com 3D: Fabrício Sousa, ou Marvin, como ele costuma chamar a si mesmo. Foi inspirado nos trabalhos desse grande artista (e amigo, que sempre me ajuda a superar as dificuldades do aprendizado e me dá grandes dicas) que resolvi aprender 3D. Aprendi muito com ele. Faço essa divulgação não só pela nossa amizade, mas porque realmente o considero um grande artista (inclusive com trabalhos em destaque na mídia especializada internacional, como o seu soldado que virou destaque no fórum espanhol oficial de Cinema 4D (http://www.c4des.com/index.php):

Marvin - 3D Professional Artist

Além do soldado, mostro aqui mais umas artes 3D que são as minhas favoritas (mas não deixem de visitar o blog http://fabriciofsousa.blogspot.com/ para ver os outros trabalhos, inclusive os 2D, todos são fantásticos):

Marvin - 3D Professional Artist
Marvin - 3D Professional Artist
Marvin - 3D Professional Artist

Com a autorização de Fabrício, criei um banner usando algumas das imagens divulgadas de seus trabalhos e o mesmo ficará exibido de forma permanente em minha galeria de blogs, não deixem de conferir.

Como disse antes, comecei a aprender 3D inspirado pelos trabalhos do Fabrício. Um dos meus primeiros trabalhos foi este modelo de um míssil AIM-120C-7 AMRAAM que divulgo aqui para vocês (o modelo ainda não está finalizado):

AIM-120C-7 AMRAAM
AIM-120C-7 AMRAAM
AIM-120C-7 AMRAAM
AIM-120C-7 AMRAAM

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.

%d blogueiros gostam disto: