Tutorial Vetor Arranjado - Novidades, Tutoriais - 07/07/2013

Tutorial Vetor Arranjado

Olá caro internauta,
Fizemos um super TutorialVetor Arranjado para você que navega no Plugge Tutoriais

A Plugge Tutoriais preparou neste tutorial Vetor Arranjado que você aprenderá a criar excelentes efeitos “semelhante a uma ilustração vetorial”, será usado em 90% do procedimento a ferramenta de Brush Tool que é a ferramenta de Pincel do Photoshop por isso esse Tutorial é básico e chama-se (Vetor Super Arranjado), ou seja será criado uma arte em pixeis (não em vetor) e não será usado somente a Pen Tool que é a principal ferramenta para esse tipo de trabalho (Desenho Vetorial), no entanto o resultado do trabalho será semelhante ao de traços vetoriais.

Ferramentas Utilizadas:

Photoshop, Pincel (Brush Tool), Conta Gotas (Eyedropper Tool) e Caneta (Pen Tool).

Dica: Com essas técnicas você poderá criar artes para familiares, amigos ou clientes. (Divirta-se fazendo cartoons e não se limite a somente o desenho de pessoas).

Resultado Final (O que você fará após concluir o tutorial):

Passo 1:

Primeiro de tudo usaremos o Photoshop, e com o programa aberto importamos uma imagem de nossa preferência. Você podera importar a imagem usando o Open (Abrir) File > Open Atalho no PC: CTRL + O Atalho no MAC: CMD + O. Você pode usar também o Place do Photoshop para importar a imagem clicando no menu File > Place (Se já tiver criado um documento previamente).

Eu escolhi uma imagem qualquer que achei no Google da Katie Holmies Link da Imagem

Dica: Procure sempre utilizar imagens com boa iluminação, qualidade de resolução e nitidez para que as técnicas funcionem perfeitamente.

Passo 2:

Com a imagem aberta no programa iremos aplicar um efeito chamado Cutout ou Espátula (Tradução). Com esse efeito aplicado estaremos com meio caminho andado.

Para manter um backup da imagem original, sempre duplique as camadas (Ctrl+j no PC ou CMD+J no Mac) ou arraste a camada com a imagem para o botão Create New Layer:

O Recurso pode ser encontrado no menu Filter > Artistic > Cutout

Se está usando o Photoshop CS6 como eu e não consegue visualizar o Submenu Artistic acesse o menu File > Preferences > Plug-Ins no PC ou Photoshop > Preferences > Plug-Ins no MAC, dentro desta janela de diálogo ative o recurso Show all Gallery Filter Groups and Name (Por alguma razão a Adobe não deixou esses recursos aparecerem por padrão no Photoshop CS6).

Agora dentro da Janela de Diálogo do Efeito Cutout, você irá definir as opções do efeito. Eu apliquei os seguintes:

Dica: Se está usando uma imagem diferente da que estou usando, procure fazer com que os detalhes da imagem não desapareçam como a linha do nariz, sobras do rosto, cabelo e boca, porque precisaremos seguir esse detalhes para continuar.

“O Efeito ficou horrível” Pode pensar o caro Internauta. Calma! Estamos na Metade do Caminho. Vamos para o passo seguinte…

Passo 3:

Nesta altura notamos que algumas coisas sairam do eixo. Apareceram alguns serrilhados e algumas coisas parecem que deixaram de existir.
(Isso é comum, quando aplicarmos o cutout fazendo com que ele preserve ao máximo os detalhes mas mantenha a característica “vetor falso”).

Agora que a mágica acontece!

Com a ferramenta Pencil Tool (Pincel), que você pode ativar apenas pressionando (B) do seu teclado ou clicando no menu de ferramentas do lado esquerdo do Photoshop, você irá corrigir os defeitos que o cutout criou, que são os serrilhados, partes que sumiram ou sairam do eixo.

Truque Especial: Após selecionar a ferramenta Pincel, selecione a ferramenta de Conta Gotas (Eyedropper Tool) atalho: (I) e depois de selecionar essa ferramenta selecione novamente a ferramenta Pincel.

Porque fazer isso? Fazemos isso para usar a tecla de modificação Alt no PC ou Opt no Mac, para nos movermos entre essas duas ferramentas eficientemente sem precisar ficarmos clicando sobre elas toda a vez que precisarmos.

Com a ferramenta de Pincel acionada e com um tamanho de Brush de 13 e Hardness 100% (Bordas nitidas) você irá corrigir os defeitos, pintando com a cor próxima do defeito (use a ferramenta Conta Gotas para selecionar essa referência de cor).

Veja como fiz:

Com o pincel Pinte os cantos de cada parte do rosto para tirar o serrilhado e dar uma aparência mais agradável. (Obs: Você pode mudar o tamanho do Pincel para pintar porções menores da imagem).

Repita o processo em todo o rosto, o resultado será este:

Agora vamos fazer a boca e os olhos que são partes que precisam um pouco de precisão com as pinceladas!

Passo 4:

Ainda com o pincel diminua sua espessura e desenhe os cílios, menina dos olhos, íris e pupila. No final do desenho aplique um reflexo para dar o ar de realísmo. (Obs: Mesmo que esse detalhes não apareçam você pode pegar a referência da imagem original para seguir com o desenho). Não é uma regra que você trace exatamente como a imagem original, mas apenas mantenha consistência com o original para não tirar a característica da imagem que você está trabalhando.

Perceba que eu criei as cores dos olhos e não usei o Conta Gotas para pegar referência da cor original do olho com o efeito Cutout. (Fiz isso para improvisar e melhorar a cor dos olhos já que o Cutout estragou as cores também).

Sempre desenhe 3 bases de cores para pincelar. No caso do rosto Pinte três referências de cores desde a mas escura à mais clara, no olhos e boca realize os mesmos métodos, para ser mais eficiente.

Boca

Na boca precisei ser preciso como fui com os olhos. Apliquei leves pinceladas e preservei as cores da referência acima acompanhando sempre o que o efeito cutout criou.

Ok, ainda dá para melhorar! Agora iremos para um passo que aplicaremos na boca, nariz e no cabelo. Precisaremos praticar um pouco porque usaremos a Pen Tool.

Passo 4:

Precisaremos criar linhas para definir divisão na boca, nariz e cabelo (fios).Como faremos primeiro a boca, defina a expessura do Pincel para 3px (Expessura para a imagem do Tutorial). Porque usaremos a ferramenta de Pincel em conjundo com a ferramenta Pen Tool.

Crie uma nova camada escolha uma cor escura da boca com o Conta Gotas e selecione a ferramenta Pen Tool (Caneta) na barra de ferramentas ou pressione (P) do teclado.

Com a ferramenta Pen Tool selecionada ative a função (Path) na barra de contexto desta ferramenta, como no exemplo abaixo:

Com a ferramenta configurada, vamos praticar! Crie uma reta! Apenas clique duas vezes (crie dois pontos âncoras) sobre o Canvas e depois clique com o botão direito do mouse e selecione Stroke Path:

Na janela de diálogo Stroke Path selecione o Tool Brush ative a opção Simulate Pressure como no exemplo abaixo:

Após clicar OK. O resultado será este:

Uma simples linha afinalada nas pontas. Como se você tivesse criado um traço apertando pouco no começo e reforçado na metade (Técnica usada por quem usa Tablet, “mesa digitalizadora”), se você já usa uma tablet não precisa usar este método.

Caso o efeito não tenha funcionado, você precisa configurar o seu Pincel. Acesse o Painel de Brush pressionando (F5) DO Teclado ou clique no icone do lado direito. (Workspace Essential) Após acessar a janela de diálgo de Brush ative o recurso Shape Dynamics e configure conforme o exemplo:

Ainda praticando agora vamos criar uma linha curva. Então crie o primeiro Ponto e no Segundo clique segure e arraste para criar a curva como no exemplo abaixo:

Clique com o botão direito novamente e defina o Stroke Path como no passo anterior, o resultado será este:

Dica: Quanto mais você praticar, mais afiado você ficará! Crie mais pontos além de dois, crie várias curvas e retas etc.

Agora que sabemos o básico que precisamos para continuar, na nova camada, acompanhe a linha da boca, e use os mesmos métodos do Stroke Path, o resultado será este:

Dica: Para criar mais linhas separadas, apenas segure o CTRL do Teclado ou CMD (Mac) em um local da área do desenho. (Não sobre a linha).

No nariz segui a mesma lógica, e criei Paths separados o resultado foi este:

Estamos quase no fim! Eu repeti o processo acima na linha do queixo, para ir para o cabelo…

Passo 5:

Nos cabelos podemos usar tanto o Pincel quanto a Pen Tool para traçar. No entanto precisamos de uma base para seguir. Precisamos definir os reflexos do cabelo, e para isso usamos a base apresentada acima para referências de cores, veja o exemplo:

Na imagem abaixo eu apontei em laranja as opções importantes para esse processo. Com a Pen Tool, selecione a opção Shape na barra de contexto, começe o traçado do cabelo e pressione (6) do teclado para definir a opacidade de 60% para a camada com a forma. Traçe todo o cabelo até encontrar o último ponto com o primeiro como no exemplo abaixo:

Clique na imagem para Ampliar.

Ufa agora é só desenhar os fios (Reflexo Escuro e Reflexo mais Claro). Para isso eu fui traçando linhas curvas (com a opção Shape ativada no menu de contexto porque usaremos o Stroke Path) acompanhando a referência da foto, um truque que uso para criar linhas separadas é o CTRL + Clique em algum local da imagem, “ao fazer isso você pode criar linhas separadas como no exemplo abaixo:”

Após clicar com o Botão Direito do mouse e definir o Stroke Path o resultado do primeiro reflexo foi este:

Notou diferença nos Fios do cabelo acima? Eu apenas defini o desenho do cabelo com a Pen Tool na primeira etapa de 60% para 100% e escureci um pouco mais a cor.

Para finalizarmos o cabelo precisamos fazer mais um reflexo que é o mais claro, para isso eu usei a referência dos traços anteriores, mas traçei apenas pegando a metade deles como no exemplo abaixo:

Após clicar com o Botão Direito do mouse e definir o Stroke Path o resultado do primeiro reflexo foi este:

Dica: Quanto mais traços e reflexo você fizer, melhor ficará! Experimente trabalhar mais do que eu, com um toque mais reforçado o resultado será mais surpreendente.

Passo 6:

Vamos finalizar? Agora vou apenas dar retoque, eu removi o fundo, removi um pouco mais dos serrilhados, adicioneis mais reflexos no rosto, desenhei as sobrancelhas, mudei a cor da camisa, o resultado foi este:

Agora criei uma camada e joguei essa camada abaixo de todas e adicionei um fundo usando a ferramenta Gradient Tool:

Clique na imagem para Ampliar.

Para finalizar vamos aplicar um HUE Saturation apenas para melhorar as cores, no meu caso eu deixei a imagem apenas mais saturada.

Clique na imagem para Ampliar.

Fim:

Resultado Final:

Gostou? Compartilhe e comente! Envie-nos seu resultado, e fique ligado em nosso blog. Postaremos mais dicas, vídeos e tutoriais como este. Quer aprender Photoshop? Conheça nosso treinamento online em vídeo completo: Photoshop – Poder do Pixeis

Referência: Este tutorial, foi escrito por mim mesmo em 2007, mas foi aprimorado. Como naquele ano esse tutorial ganhou 500 mil visualizações, esperamos que esse ajude muita gente da mesma forma.

Sucesso!
Equipe Plugge!

Não é permitido a cópia deste Tutorial – Vetor Arranjado sem nossa autorização ou o uso das imagens elaboradas.

Webtutoriais:3835B07E

Envie um Comentário

“…Estou muito feliz com o prêmio! Vcs são demais! Se eu pudesse, participaria da nova promoçao…”

Luis H P S Menezes

Vencedor da Promoção Plugge! 50% Desconto e Sorteio de 1 Ipad Mini.

A Plugge é mais que um portal de cursos, é uma bússola para a construção de uma carreira. O investimento feito é válido, pois o conhecimento adquirido nos cursos compensa.

Juliana dos Santos Nascimento

Graças a introdução que pude aprender com vocês consegui diversos trabalhos na área, e hoje estou trabalhando na B2W. Mais uma vez Obrigado!

Walker de Paula

“Sempre quis aprender sem sair de casa, na Plugge além de encontrar isso a plataforma de estudo é simples e agradável…”

Thiago Augusto

“A ideia de fazer um curso sem precisar sair de casa, é genial! Isso nos dá mais qualidade de vida e segurança. Parabéns ao portal e pelo ambiente excelente de estudos.”

Lucas Henrique

“A primeira impressão que a plugge me passou foi segurança, com um site muito bem elaborado e com cursos de alta qualidade, coisa que poucas oferecem atualmente. Recomendo a Plugge para quem quer um conteúdo de qualidade!”

Cezar Luis