Aprenda como criar do zero uma interface de jogo mobile utilizando somente o Photoshop – Parte 03

23º Passo

Com sua ferramenta retângulo (Rectangle Tool), acima da layer “textura-madeira-2”, crie um quadrado como na imagem abaixo. Renomeie ele para “inset-borda” agora duplique essa layer e leve ela para cima da layer inset-borda chame essa nova layer de “inset-base”.

Aplique os estilos seguintes respectivamente, começando com “inset-borda” e usando o Fill Opacity de 0%.

Para a layer “inset-base”, use as mesmas configurações abaixo e um Fill Opacity de 60% com a cor preta. Mude o seu modo de transparência para Multiply.

Duplique as layers “insert-borda” e “insert-base” duas vezes e posicione como abaixo.

24º Passo

Agora é o momento de criar os textos, você deverá usar os estilos abaixo para todos os textos abaixo, use a cor #ECDECB para o texto. Tamanho não é importante, só tente fazer como fiz abaixo.
Use a fonte Livingstone para o menu lateral e as datas e no título de Jogos Salvos use a Sherwood Regular.

25º Passo

Configure a cor de Foreground para #636363 e crie uma nova layer abaixo dos botões. Usando sua ferramenta brush configurada com 85% de Hardness e diâmetro máximo de 1px, pinte um desenho de um O, como na imagem abaixo. selecione uma e vá duplicando e copiando criando a corrente como estou mostrando.

26º Passo

Selecione todas as camadas de corrente que foram criadas e mescle todas clicando com o botão direito sobre elas e selecionando a opção merge layers, depois de mescladas nomeio essa layer como “corrente” e aplique o estilo abaixo.

27º Passo

Agora vamos deixar o castelo visível novamente. Usando a sua ferramenta caneta (pen tool) com o preto selecionado para a cor de Foreground, crie um shape dentro do box que está localizado nos jogos salvos, mas corte os cantos para tornar o shape mais interessante. Chame essa layer de “tablet”. Aplique os seguintes estilos de layer:

28º Passo

Usando a fonte Livingstone novamente, digite o texto que vê na pedra dentro dos jogos salvos abaixo e aplique os estilos de layers seguintes. Quando terminar, duplique o primeiro tablet e coloque no segundo box, como mostra também na imagem abaixo.

29º Passo

Coloque a cor do Foreground para #2E343A, e com a caneta (Pen Tool) crie uma pequena forma de diamante (aproximadamente 15px por 15px). Essa vai ser a base dos nossos rebites. Chame a layer de “rebite-inset”, duplique ele duas vezes. Nomeie a layer do meio de “rebite-base” e a de cima de “rebite-estilo”. Adicione os seguintes estilos respectivamente, começando com o “rebite-inset”.

Agora aplique os seguintes estilos de layer para a layer “rebite-base”.

Agora aplique os seguintes estilos de layer para a layer “rebite-estilo”.

Agrupe as layers e duplique 3 vezes o grupo e posicione cada um em cada canto da placa de Jogos salvos, justamente como a imagem abaixo.

30º Passo

Bom agora vamos mergulhar no nosso passado quando pintávamos revistas de colorir, provavelmente esse será o passo mais complexo, porém vou tentar mantê-lo básico.

Vamos lá?

• Crie um shape, usando a caneta (Pen Tool), desenhe algo que lembre uma folha. Fazer isso em um documento separado é uma boa idéia (veja a imagem 1 abaixo).
• Rasterize o shape que acabou de fazer e selecione a Burn tool.
• Varie as definições para o brush (Tamanho e exposição) e tente replicar o meu resultado (imagem 2)
• Pegue o Dodge Tool e tente replicar os resultados mostrados, novamente varie as definições do brush (imagem 3)
• Use a borracha (Eraser tool), defina como pincel duro e apague a parte de cima da folha criando um caule (imagem 4)
• Dê um zoom e adicione detalhes usando a dodge e burn (imagem 4)
• Vá em Filter > Noise > add Noise e use essa configuração: Amount de 1%, selecione Gaussian e marque a caixa Monochromatic (imagem 5).
• Redimencione a folha para o tamanho real que você precisa que ela seja e crie uma nova camada acima dela. Agora com um pincel preto de 1px e suave, faça as veias da folha, coloque a opacidade da layer em 20% (imagem 6)
• Mude a cor do Foreground para branco e a opacidade do Brush 70% e desenhe alguns traços de iluminação ao redor das veias (imagem 7)
• Adicione um simples Drop Shadow usando estilos de layer e mescle as camadas que criou em uma layer (imagem 7).

Conclusão

Você pode adicionar mais vegetação aqui e ali pra tornar a arte mais interessante. Você poderia ainda ir mais longe e adicionar algumas folhas e ramos na caixa de jogos salvos.

Agradeço a sua companhia até aqui e espero realmente ter ajudado você nessa jornada e que também tenha aprendido algo novo. Mostre-me como ficou o seu trabalho e comente abaixo suas dúvidas, críticas e agradecimentos!!!

P.S: Quer receber mais tutoriais e acompanhar quando eu fizer algo novo? É só entrar para a lista VIP, é só preencher o seu email abaixo e é gratuito!

FIQUE ATUALIZADO!

Coloque o seu email abaixo para receber gratuitamente as atualizações do blog!

Quero Acessar

Aqui embaixo está o resultado final e até a próxima!