Mascotes estão se tornando cada vez mais populares em web design. Neste tutorial intermediário de illustrator vamos aprender como criar um mascote de personagem em vetor a partir de um esboço usando o Adobe Illustrator CS4. As técnicas mostradas neste tutorial podem ser facilmente aplicadas a outras ilustrações, ícones e elementos de design, assim como versões legadas do Illustrator.
Este artigo é fonte de tradução e adaptação de um site externo. Por favor, visite o artigo original para prestigiar este fantástico trabalho. O link para o artigo original também será divulgado no final deste post. Você também pode fazer o download do arquivo criado com este tutorial no link original.
Imagem final
Abaixo está a ilustração final que estaremos trabalhando.
Detalhes do Tutorial
Programa: Adobe Illustrator
Versão: CS4
Dificuldade: Intermediário
Tempo de Conclusão estimado: 2 horas
Passo 1
Para começar, crie um esboço de seu personagem. Eu gosto de usar a minha mesa Wacom e o Photoshop para criar o esboço, mas você pode usar qualquer meio que escolher. Depois de criar o esboço, digitalize-o (se você está usando a mídia tradicional) e salve-o em seu computador em um local de fácil acesso.
Passo 2
Crie um novo documento e coloque o esboço nele indo no menu File> Edit>Place (Arquivo> Editar> Importar). Encontre o seu esboço então centralize a imagem no seu documento.
Passo 3
Uma vez que seu desenho foi inserido, selecione o modo Model (Modelo) no menu pop-up (canto superior direito) do painel Layers (Camadas), tornando mais fácil traçar a imagem nas etapas seguintes.
Passo 4
Agora que temos o esboço em uma camada de modelo, podemos criar uma nova camada para traçar o esboço. Para criar uma nova layer, pressione o botão de nova camada na parte inferior direita do painel Layers. Criar várias camadas contribui com a organização e fluxo de trabalho. Também é uma boa idéia nomear cada camada clicando duas vezes sobre ela e na caixa de diálogo Layer Options (Opções de camada) lhe dar um nome. Nomeie a primeira camada como Face (Rosto).
Passo 5
Com a ferramenta Pen (P), comece a traçar as formas do rosto, certificando-se de fechar os caminhos para facilitar o preenchimento, como a pele do rosto e o cabelo. Para alguns dos outros elementos do rosto como o contorno do nariz e da boca, você pode mantê-los como caminhos abertos. Nas próximas etapas vamos criar um pincel que tornará mais fácil editar estes caminhos.
Passo 6
Agora que traçamos as formas e linhas do rosto, podemos criar a íris dos olhos com a ferramenta Ellipse (L). Crie três elipses, um grande, o segundo menor no centro, dentro do maior, e o terceiro fora ao lado da elipse do centro.
Passo 7
Use a ferramenta Ellipse (L) em outra parte do documento para criar uma elipse oblonga (comprida). Arraste a elipse para o painel Brush (Pincel) e escolha a opção New Art Brush na caixa de diálogo New Brush. Uma vez na caixa de diálogo Art Brush Options, altere o Colorization Metod para Tint, tornando mais fácil mudar a cor do pincel.
Passo 8
Selecione os caminhos abertos a partir do seu traço, e selecione a nova forma de pincel no painel Brush.Você pode ter que mudar a espessura do traço em alguns dos caminhos no painel Stroke, dependendo se o contorno precisa ser mais grosso ou mais fino.
Passo 9
Preencha as formas fechadas com cor apropriada e altere a cor do contorno para os caminhos em que usamos o nosso novo pincel.
Passo 10
Usando gradientes crie a sensação de uma fonte de luz. Para este tutorial, vamos imaginar a fonte de luz vindo do lado esquerdo do personagem. Comece com o formato do rosto, e crie um gradiente linear no painel Gradient. Use a cor da pele para o Color Stop da esquerda e uma cor de pele mais escura para o Color Stop da direita no gradiente. Por padrão, seu gradiente provavelmente já esteja na direção correta, mas se não, use a ferramenta Gradient (G) e ajuste o gradiente da esquerda para a direita, fazendo com que a parte mais clara do gradiente fique do lado esquerdo do rosto.
Passo 11
Faça o mesmo com todas as demais formas fechadas, tendo em mente sempre o ponto de luz. Também tenha em mente que você precisa de uma transição suave de uma forma para outra. Um bom exemplo é a forma da orelha direita. Se você ajustar a inclinação para a parte mais clara do gradiente no lado esquerdo, o ouvido vai ficar engraçado. Uma solução simples é reverter o gradiente para que as cores fiquem do outro lado. Para o olho use um gradiente vertical de modo que a parte mais escura do gradiente fique na parte superior da forma da íris.
Passo 12
O rosto está começando a parecer muito bom, mas vamos adicionar mais algumas formas e gradientes para dar um pouco mais de profundidade ao personagem. Comece por criar uma elipse com a ferramenta Elipse (L). Faça a elipse do tamanho de um olho logo abaixo do olho direito. Preencha a elipse com um gradiente radial a partir do painel de gradientes. Mude a primeira cor para uma cor de pele rosada. Em seguida, mude a opacidade no painel Gradient da segunda cor Parar a 0. Copie (Ctrl+ C) e cole (Ctrl+V) a elipse e posicione sob o outro olho.
Para a próxima forma, use a ferramenta Pen (P) e crie uma forma que distingue o contorno da boca, nariz e olhos. Em seguida, selecione o formato principal do rosto, Copie (Ctrl + C) e Cole na Frente (Ctrl + F). Selecione a cópia e o novo formato do rosto e pressione o botão Intersect no painel Pathfinder. Preencha a forma com o mesmo gradiente que usamos nas elipses do paso anterior, a exceção é fazer o gradiente linear. Ajuste o gradiente com a Gradient Tool (G) e acesse o menu Object> Arrange> Send backward (Objeto> Organizar> Enviar para trás) (Ctrl + [ ) até que a esteja organizada logo após o formato do rosto.
Passo 14
Crie uma nova camada no painel Layers e nomeie como Body (Corpo). No painel Layers arraste a camada para baixo da camada do rosto.
Passo 15
Na nova camada do corpo, trace o corpo do seu personagem, como você fez na cabeça. Também desenhe o teclado do computador, mas não a tela.
Passo 16
Preencha as formas com uma cor básica, como fizemos com o rosto.
Passo 17
Além disso, assim como no rosto, preencha as formas com gradientes e desenhe formas extras para criar mais profundidade. Ótimos lugares para se fazer isso são a roupa e a pele.
Passo 18
Crie uma nova camada e nomeie como Computer (Computador).
Passo 19
Trace a tela do laptop com a ferramenta Pen (P), como você fez anteriormente.
Passo 20
Novamente, preencha com uma cor básica, adicione alguns gradientes para criar alguma profundidade, e termine com algumas formas desenhadas com a ferramenta Pen. Use a técnica no Passo 13 até intersectar as novas formas de modo que se alinhem com o objeto abaixo.
Passo 21
Crie uma nova camada e nomeie como Background (Fundo). Organize esta camada no painel Layers para que ele fique por trás de todas as camadas, exceto a camada de modelo.
Passo 22
Para criar as formas de fundo, primeiro crie uma elipse oblonga com a ferramenta Ellipse (L). Com a ferramenta Selection (V) gire a elipse ligeiramente para a direita. Copie (Ctrl + C) e cole a elipse atrás (Ctrl + B). Com a cópia selecionada, escale-a um pouco com a ferramenta Selection (V). Para dimensioná-lo de forma proporcional a partir do centro, mantenha pressionadas as teclas Ctrl + Alt + Shift. Enquanto escala.
Passo 23
Mantenha pressionada a tecla Alt e arraste uma cópia da elipse original para o lado inferior direito das outras duas elipses. Copie (Ctrl + C) a elipse original e Cole na frente (Ctrl + F). Selecione a cópia da elipse e a outra cópia que foi deslocada e pressione o botão Intersect no painel Pathfinder.
Passo 24
Preencha as duas primeiras elipses com um verde azulado. Para compensar a elipse, preencha-a com um gradiente radial com a cor escolhida de um tom mais claro para o mais escuro.
Passo 25
O trabalho já está ficando bom, mas podemos personalizá-lo mais adicionando um logotipo para na camiseta e na tela de computador. Para este tutorial, Grant teve a gentileza de me deixar usar o logotipo Colorburned. Não importa o logotipo que você está usando, coloque uma cópia na camada do corpo e na camada do computador.
Passo 26
Depois de colocar os logotipos, queremos ter certeza de que eles têm a perspectiva correta. Para ambos os logos podemos atingir o objetivo apenas girando-os ligeiramente para a esquerda. Em alguns casos, você pode precisar editar um pouco mais. Eu sugiro usar a ferramenta Transform. Com a ferramenta Transform (E), clique e segure um ponto de ancoragem, em seguida, pressione a tecla Ctrl, e ajuste em conformidade. Certifique-se de clicar e segurar a âncora antes de pressionar a tecla Ctrl, ou então não vai funcionar.
Passo 27
Para o logotipo na camiseta, vamos manter a cor da marca original, mas para o logotipo no computador, vamos fazer com que pareça que está gravado no laptop. Preencha o logotipo do computador com um gradiente semelhante ao gradiente você aplicou no notebook, mas com um tom mais leve. Ajuste o gradiente de forma que a cor mais escura fique na parte inferior do logotipo. Com o logotipo ainda selecionado, acesse o menu Object> Path> Offset (Objeto> Caminho> Deslocamento). Na caixa de diálogo de deslocamento, mude o deslocamento para 3 px (isso pode mudar dependendo das dimensões da sua imagem) e selecione a opção Reound no menu drop-down. Preencha a forma deslocada com um gradiente linear de branco par um cinza escuro. Ajuste o gradiente de modo que a parte mais escura do gradiente fique na parte superior.
Passo 28
Agora tudo o que resta a fazer é clicar no ícone de visibilidade no painel de camadas para ocultar a camada de modelo e está pronto!
Imagem final
Mais uma vez é a ilustração final do personagem.
Você pode fazer o download do arquivo original criado com este tutorial no link do artigo original abaixo. O conteúdo do download, porém, é apenas para fins educacionais e não pode ser utilizado para uso pessoal ou comercial, vendido ou redistribuído sem o consentimento expresso da Colorburned criativa.
Este artigo é fonte de tradução e adaptação de um site externo. Por favor, visite o artigo original para prestigiar este fantástico trabalho. Você também pode fazer o download do arquivo criado com este tutorial no link original.