19:58 | Postado por Mr.

Froids

Tutorial - Efeito Visualizao Robotica ( Iron Man )

Neste tutorial vou mostrar como criar a interface de tela de Iron Man, (eu nem sei se posso cham-lo assim). Vamos usar o Illustrator para criar alguns vetores eo Photoshop para colocar tudo junto.

Passo 1
Crie um novo documento e preencha a camada de fundo com o preto. Eu usei 1920x1200 pixels para o tamanho.

Passo 2

Agora vamos usar uma foto. Eu estou usando uma foto do Paulo, um dos nossos escritores aqui no Abduzeedo, ele um f do IronMan e me pediu para usar a sua imagem.

Passo 3 - Maquiagem Digital

Crie uma nova pasta na paleta Layer e renomeie-a Face. Em seguida, mova a camada da foto para essa nova pasta. Depois disso, selecione a pasta novamente e v em Layer> Layer Mask> Reveal All. Agora, com a Brush Tool (B) pinte de preto para ocultar as reas que no precisamos.

Etapa 4
Duplique a camada e v em Filter> Blur> Gaussian Blur. Use 6 pixels para Radius. Mas como voc pode ver que eu adicionei mais coisas para ele, existem algumas reas queimadas, por exemplo. Para isso, selecione a Burn Tool (O) e pinte algumas reas que ns queremos que seja mais escuro. Use a imagem abaixo para referncia. Tambm use a Dodge Tool (O) para fazer algumas reas mais claras.

Etapa 5
Com a Eraser Tool (E) delete as reas que ns queremos mant-las ntidas e precisas, como os olhos, barba, cabelo. Basicamente basta deixar as reas da pele.

Passo 6
Duplique a foto original, aquela que no esta embaada e v em Filter> Other> High Pass. Altere o modo de blend da layer para Hard Light. Novamente, voc pode usar a ferramenta Eraser para apagar algumas reas como na imagem abaixo.

Passo 7

Selecione a primeira camada, aquela com a foto original e depois com a Dodge Tool (O) pinte os olhos para torn-los muito mais brilhante. Tambm com a Burn Tool (0) tornar as outras reas ainda mais escuras. Voc pode usar essas duas ferramentas em outras camadas tambm.

Passo 8
Go to Image>Adjustment>Hue/Saturation . V em Image>Adjustment>Hue/Saturation. Deixe a imagem mais escura e menos saturada. Eu usei -3 for the Hue, -32 for the Saturation, and -38 for the Lightness.

Passo 9 (Illustrator)
Eu usei o Illustrator para criar os elementos da interface, mas voc pode utilizar qualquer ferramenta ou at mesmo o Photoshop. Mas, para mim Illustrator era mais fcil e gil para todo o processo. Enfim, para criar as elipses com a Ellipse Tool (L). Em seguida, use a Blend Tool (W) para criar mais cpias dos crculos.

Etapa 10
Agora clique em Object> Expand para expandir o Blend. Ento v ao Object>Ungroup. Voc ser capaz de editar cada crculo agora. Com a Direct Selection Tool (A), selecione alguns segmentos do crculo e os delete-os. Use a Pen Tool (P) para adicionar mais pontos de ancoragem. Use a imagem abaixo para referncia.

Etapa 11
Crie mais elementos, usando a Line Segment Tool (\) e o Polar Grid Tool para adicionar mais elementos.

Etapa 12
Continue adicionando elementos, como flechas usando o Polygon Tool e Estrela. Tambm crie formas diferentes, voc pode at adicionar textos ou nmeros, basta usar sua criatividade.

Etapa 13
Create more circles too, this time however rescale them to give the idea that they are coming from a different angle, then just repeat the previous steps to create more elements and delete some segments. Crie mais alguns crculos, mas desta vez redimensione-os para dar a idia de que eles esto vindo de um ngulo diferente, ento basta repetir os passos anteriores para criar mais elementos e eliminar alguns segmentos. Use a imagem abaixo para referncia.

Etapa 14
Volte para o Photoshop, o que voc tem a fazer copiar e colar os elementos do Illustrator para o Photoshop. Mas voc vai ter que fazer isso para cada objeto, em vez de copiar e colar tudo de uma vez. So copy the first circle segment and paste it as Smart Object . Ento, copie o primeiro crculo e cole-o como Smart Object. Ento, vamos aplicar alguns estilos de camada. Reduce the Layer Opacity to 30% and select Color Overlay . Reduza a Layer Opacity para 30% e selecione Color Overlay. Use uma cor cyan agradvel, a cor que usei foi a # 00eaff.

Etapa 14
Para cada elemento aplicar um Gaussian Blur. Go to Filter>Blur>Gaussian Blur . V em Filter>Blur>Gaussian Blur. Use valores diferentes para cada elemento. But try to add more blur to the bigger ones. Mas adicione mais desfoque para as maiores.

Etapa 15

Para alguns elementos alter e o Color Overlay para o verde como o da imagem abaixo. Isso vai criar um efeito mais agradvel do que apenas uma cor.

Etapa 16
Pegue o grupo de elementos que voc colou no Photoshop e o renomeie o grupo de Olho Esquerdo. Duplique esse grupo e v para Layer> Merge Group. Voc ter uma camada com

todos os objetos. Esta camada tem que estar acima do grupo "olho esquerdo" . Ento esse grupo com as camadas elemento, ele estar dentro de uma pasta. Altere a pasta de Blend Mode para Color Dodge e aplique um estilo de camada a camada. Mude a opacidade para 70% e selecione Color Overlay . Use white for the color. Use a cor branca. Isso vai criar um belo efeito de luz e manter as cores.

Etapa 17
Aqui eu adicionei mais elementos a partir do Illustrator, desta vez usei um vermelho. Eu s repeti as etapas anteriores, col-lo, aplicar o estilo da camada com 30% opacity and Color Overlay, ento eu adiciono o Gaussian Blur. Tambm dupliquei a camada, e agrupadas, altere o modo de blend desta pasta de Color Dodge para Color Overlay da camada duplicada para White e a opacidade para 70%. Mais uma vez que apenas para criar uma espcie de brilho aos objetos.

Step 18 Etapa 18
Here I just added the other elements I had created in Illustrator. Aqui eu adicionei os outros elementos que eu tinha criado no Illustrator. Always repeate the previous steps to create the same effect to all objects. Sempre repeate as etapas anteriores para criar o mesmo efeito para todos os objetos.

Etapa 19

Crie uma nova camada em cima das outras camadas. Em seguida, selecione a Gradient Tool (G) e clique sobre as cores do gradiente para abrir o Gradient Editor (1). Mude as cores para preto e branco e a Gradient Type to Noise (2). Ento mude a Roughness to 100% e selecione Restict Colors and Add Transparency. Depois que escolher o Angle Gradient (3) preencha o layer com o gradiente que voc criou. Inicie-o no olho esquerdo, bem no meio do olho (4). Com a camada preenchida com os raios de cor, v em Image>Adjustments>Desaturate. Em seguida, v em Filter> Blur> Gaussian Blur. Use 6 pixels para Radius. Depois s aplicar o estilo da camada que voc usou para os outros elementos, adicionando uma sobreposio de cores. . Mas, para essa camada reduzir a opacidade para 70%. Tambm com a Eraser Tool (E), apague os raios que esto perto do olho (5). Use a imagem abaixo para referncia.

Concluso
Agora s adicionar algumas barras pretas para fazer parecer um filme. um efeito muito bonito inspirado no filme Homem de Ferro e a coisa legal para mim que eu estava procurando algumas idias legais para tutoriais e em seguida assisti esse filme , foi muito bom porque tinha muitos efeitos . De qualquer maneira, espero que tenham gostado do tutorial e tenham aprendido algo com ele. apenas uma viso muito rpida e, provavelmente, h diferentes maneiras de fazer isso.

Traduzido por Mr.Froids ( Blog do Froids ).Fique a vontade em copiar esse conteudo, s peo que mantenha os creditos do autor e do blog.