Como Desenhar um Monitor no Photoshop (Com Referência)

O desenho de produtos de tecnologia usando o Photoshop, como tablets, smartphones, computadores e monitores, se popularizou, especialmente voltado à criação de ícones.  Em quase todos os sites relacionados ao design web e gráfico, é possível encontrar tutoriais e/ou matérias sobre o tema. Aqui mesmo no Tutoriart já publicamos alguns artigos, como essa galeria de arquivos em psd.

Além de ícones, também podem ser usados como projetos de modelos, objetos para decoração de cenário ou composição com outras peças, para ilustrar propagandas, sites de venda, etc.  A utilidade da peça pronta é variada, e durante o processo de criação, o que realmente importa para nós aqui, são praticadas e absorvidas diversas técnicas.

Neste tutorial, vamos desenhar um monitor de computador, usando uma fotografia como referência, mas sem copiar qualquer de suas medidas. Ela servirá apenas como base para nossa própria recriação de formas, luzes e reflexos, obtendo como resultado um modelo próprio. Para acompanhar o tutorial, você deve estar familiarizado com os nomes das ferramentas do Photoshop e saber onde localizá-las.

Esta será a imagem usada como referência. Clique sobre ela para abri-la em uma nova guia, para consulta rápida enquanto trabalha no Photoshop, ou baixe-a e abra-a em um arquivo do Photoshop (separado do arquivo em que vai trabalhar).

Abra um novo documento no Photoshop, tamanho de 1200 x 800. Preencha a camada única de branco.

Como disse, não faremos uma cópia idêntica do monitor, então usaremos dimensões próprias, aproximadas. Com a Rectangle Marquee, crie um retângulo de aproximadamente 720 x 470 pixels (para ver o tamanho do marquee enquanto o cria, abra a guia de Info, em Window > Info, ou pressione F8). Esta área será a tela do monitor.

Crie uma nova camada, e preencha a área de seleção com preto. Exclua a seleção (Ctrl + D) e agora você pode movimentar a "tela", até colocá-la em um ponto mais centralizado no papel.

Conforme for criando camadas, procure nomeá-las, facilitando assim a identificação de cada uma mais tarde.

Observe a foto do monitor e repare que há um chanfrado na parte interna da tela. Use um estilo de camada (Layer Style) do tipo Inner Bevel, com as configurações vistas na imagem, para criar seu chanfro.

Clique sobre a miniatura da camada "tela" com a tecla Ctrl pressionada para criar uma seleção ao seu redor. Siga ao menu Select > Modify > Border, de 1 pixel.

Crie uma nova camada e nela, preencha a seleção com qualquer cor (usei preto). Sobre este objeto aplique uma sobreposição de degradê (Layer > Layer Style > Gradient Overlay), como visto a seguir. Edite o degradê (clicando sobre a janela com as cores), colocando três pontos de cor, sendo branco nas extremidades e preto no meio. Note o ângulo do degradê (0°).

Criando agora a parte externa. Com a ferramenta Rounded Rectangle, ajustada no modo path, crie um demarcador ao redor da tela, com tamanho aproximado de 770 x 580 pixels (outra vez, a janela Info vai ajudar. Note que o meu ficou 1 pixel maior que isso).

Crie uma nova camada (nomeie como "monitor"), coloque-a ABAIXO da camada "tela". Clique Ctrl + Enter para converter o demarcador em uma seleção, e Alt + Del para preencher a seleção com a cor de primeiro plano. Não importa a cor, já que usaremos um Layer Style tipo Gradient Overlay para colorir o monitor no próximo passo. Exclua a seleção com Ctrl + D.

Com o monitor preenchido, ajuste seu alinhamento em relação à tela. Para ter um alinhamento horizontal perfeito entre a tela e o monitor, selecione as camadas "tela", "monitor" e "borda interna" (segure Ctrl e vá clicando sobre o nome de cada camada, na janela de camadas, elas ficarão marcadas em azul). Então, na barra superior do Photoshop, clique no botão Align Horizontal centers.

O Gradient Overlay usado na camada do monitor foi de preto para cinza #191919, com ângulo de -90°.

Com a Pen Tool, crie a forma que define a área de reflexo sobre o monitor. Depois, converta-o em seleção e preencha de branco, em uma camada logo acima do "monitor" (nomeie-a como "reflexo monitor").

Crie uma seleção em torno da camada "monitor", inverta a seleção (Ctrl + Shift + I) e pressione Del, com a camada do "reflexo monitor" selecionada, para excluir o excesso (partes que ficaram fora do monitor).  Duplique a camada do reflexo. Baixe a opacidade da camada original para cerca de 10%.

Na camada duplicada, use um pincel redondo macio (rounded soft), em baixa opacidade e com a borracha (Eraser Tool), vá apagando o excesso de branco perto das bordas do monitor, deixando parecido com o reflexo visto na imagem original. É um trabalho similar à pintura, que apesar de simples, exige um pouco de paciência para um resultado bom.

Esse foi o melhor método para mim. Talvez você fique mais confortável se utilizar apenas uma camada de reflexo, usando a borracha para apagar o excesso. Faça conforme seu gosto.

Luminosidade na tela: crie uma nova camada acima da "tela". Clique sobre ela com o botão direito e selecione Create Clipping Mask para garantir que seu conteúdo apareça apenas sobre a tela.

Pinte-a com um degradê de três pontos (usando a Gradient Tool), sendo preto nas extremidades e preto no centro. Tente deixá-lo parecido com o visto abaixo, arrastando a linha do degradê na diagonal.

Se não acertar a posição do degradê, modifique-o depois de desenhado através de transformação (Ctrl + T) e reposicionamento.

Aplique uma máscara sobre o degradê (botão na barra da janela de camadas, Add Vector Mask). Na máscara, crie um degradê radial, com branco no centro, preto na extremidade, para revelar uma parte arredondada do degradê original.  Complete a máscara usando um pincel macio redondo, grande, com branco, revelando mais um pouco da parte superior esquerda da tela. A opacidade da camada deve ficar em torno de 50%.

Novamente, esse foi meu jeito de fazer. Você pode fazer diferente: crie apenas um degradê radial, e achate-o depois através de transformação (Ctrl + T).

Aparência da máscara:

Para a parte inferior do monitor: nova camada abaixo de todas as outras, nomeie-a "painel". Com a Pen Tool no modo Path, crie a forma básica.

Converta o path em seleção, e preencha-a com um degradê linear horizontal, de 3 pontos, sendo usado cinza #313131 nas extremidades e preto no centro.  Exclua a seleção após preencher.

Pedestal (parte que serve de base ao monitor): com a Ellipse Tool, desenhe o disco principal do pedestal, converta-o em seleção e preencha de preto.

Em seguida duplique sua camada, inverta as cores (Ctrl + I) e aplique um filtro Gaussian Blur com força média (menu Filter > Blur > Gaussian Blur). Redimensione o reflexo para que uma parte preta fique aparente, e aplique Clipping Mask (ainda lembra como faz isso? Foi usado agora a pouco)

Etapas da criação do pedestal: disco preto (1), duplicado e invertido (2), e já com filtro Blur (3)

Para dar volume à base, crie uma nova camada logo acima do "fundo" (nomeie-a "volume". Segure Ctrl e clique sobre a camada "pedestal" (que contém o disco preto), para criar uma seleção em seu conteúdo. Então transforme a seleção, movendo-a ligeiramente para baixo - a distância determinará a largura do disco.

Preencha a seleção com preto. Para preencher os cantos que faltaram, aproxime bem a imagem e use a Pen Tool ou a Lasso Tool para selecionar os cantos, preenchendo de preto (na mesma camada "volume").

Na segunda parte, você vai completar o volume do pedestal e adicionar muitos outros detalhes (link para página 2 mais abaixo, depois de Posts Relacionados).

Leia também...

• 

  Criando Efeito de Foto em Infravermelho no Photoshop

  Fotografia em infravermelho gera resultados surpreendentes e muito bonitos, em cenas que poderiam ser comuns. Captando comprimentos de onda que nossos olhos não conseguem, as imagens ganham tons surreais, com atmosferas que lembram ficção científica. É como ver o mundo com novos olhos.

  Confira um método simples para simular o efeito usando o Photoshop. A base consiste em desfoque no canal verde, e mais alguns ajustes de camada e mesclagem. A cor fica por conta de uma duplicata da imagem principal, mas você é mais que recomendado a tentar outros ajustes.

• 

  Tutorial: Efeito “Tocha Humana” no Photoshop

  Nesse tutorial você vai aprender com o método de Neville D'Souza como manipular a foto de uma modelo e transformá-la numa "tocha humana", com belos efeitos de fogo.

  As ferramentas usadas são simples como a Borrar (Smudge), Subexposição e Superexposição (Dodge e Burn Tool), que combinadas a algumas camadas de ajuste de níveis e modos de mesclagem, resultam nesse trabalho surpreendente.

  Requer conhecimentos intermediários como aplicação de camadas de ajuste, níveis, saturação e mesclagens. O resultado será único a cada tentativa, já que grande parte é baseado em pinceladas.

• 

  Tutorial Photoshop: Manipulação com Iluminação e Formas Geométricas

  Nesse tutorial você vai desenvolver uma bela peça com visual moderno, futurista, manipulando fotografias que serão combinadas com formas geométricas, efeitos de iluminação e grafismos. Indicado a quem já tem conhecimento intermediário de Photoshop e quer colocá-los em prática.

  Especialmente indicado para entender o uso de demarcadores (paths) e criação de padrões personalizados, e como mesclá-los com imagens em bitmap em composições. Camadas de ajuste também são parte importante do processo.