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

11º Passo

Vamos continuar exatamente de onde paramos. Depois de ter concluído o escudo vamos para o nome do jogo, utilize a fonte Supercell-magic-webfont (está nos arquivos que disponibilizo no final do artigo) e digite a palavra “MEDIEVAL” (em Caixa Alta), depois em uma outra layer a palavra “of” (em caixa baixa) e em outra layer a palavra “CLANS” (em Caixa Alta). Todas com a cor preta e posicione e redimensione como está na imagem abaixo.

Vamos utilizar o mesmo efeito ouro que utilizamos na borda do escudo para isso selecione as 3 layers de texto e vá no menu Type > Convert To Shape, depois vá no menu Layer > Merge Shapes, duplique duas vezes essa layer e renomeie a de baixo para “Logo-texto-1” a do meio “Logo-texto-2” e a de cima para “Logo-texto-3”.

Clique com o botão direito na layer “escudo-1” e selecione “copy layer style”. Agora clique com o botão direito na layer “Logo-texto-1” e selecione “Paste layer Style”. Clique com o botão direito na layer “escudo-2” e selecione “copy layer style”. Agora clique com o botão direito na layer “Logo-texto-2” e selecione “Paste layer Style”.

Selecione a layer “Logo-texto-3” e configure o fill Opacity para 0%. Então aplique os estilos mostrados abaixo.

A imagem deverá ficar assim:

Agora você fará o mesmo que fez no escudo para dar o efeito de ouro no nome, selecione a layer “logo-texto-2”, depois pressione o Ctrl e clique na miniatura da dessa layer para criar a seleção e então vá no menu Layer > New Adjustments Layer > Color Balance e coloque a configurações abaixo:

O resultado deverá ser este:

12º Passo

Espero que ainda esteja comigo 🙂 vamos agora para a criação da sidebar.

Usando a Caneta (Pen Tool), crie um bloco como o da imagem abaixo. Seja criativo aqui, não tem a maneira certa de fazer isso, não se preocupe se não ficar exatamente com a imagem abaixo apenas faça o shape sem olhar tanto para os detalhes. Duplique essa layer e renomeie a do topo para “sidebar-base”. Nomeie a de baixo para “sidebar-perspectiva”.

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

13º Passo

Arraste a layer “sidebar-perspectiva” 6px para a esquerda, clique com o botão direito e selecione a opção Rasterize Layer.

Selecione a ferramenta Burn e use a configuração abaixo e pinte a borda da perspectiva onde deverá ser sombra, mantendo a ideia da iluminação que tínhamos feito no wireframe. Com a ferramenta Dodge, pinte as áreas opostas. Isso vai criando a ideia de volume e logo após vamos aplicar um drop shadow na layer.

14º Passo

Crie uma nova layer acima da “sidebar-base” e nomeie ela para “sidebar-textura-1”. Agora, mantenha pressionado o Ctrl e clique na miniatura da “sidebar-base” para criar uma seleção. Sem soltar o Ctrl pressione o Shift para adicionar para a seleção e clique na miniatura da layer “sidebar-perspectiva”. Agora selecione o brush que disponibilizei para download e selecione o segundo brush e aumente o seu tamanho para 1100px. Com a cor de foreground preta clique uma vez dentro da seleção e pressione Ctrl + D no seu teclado. Coloque a opacidade da layer para 50%.

15º Passo

Mude a cor de Foreground para #160A02 e crie outra layer. Nomeie essa layer para “sidebar-textura-2”. Repita o processo do 14º passo, só que dessa vez utilize o quarto brush com o tamanho 800px, ele ficará um pouco menor que a imagem, então você dará 2 cliques um em cima e outro embaixo para completar a imagem. Com a layer selecionada, vá em Filter > Blur > Gaussian Blur. Configure o radius de 3 então clique OK. Você deve ter mais ou menos a imagem abaixo.

16º Passo

Vamos adicionar algumas imperfeições na superfície da pedra. Crie uma nova layer e renomeie ela para “rachaduras”. Selecione o pincel (Brush Tool) e escolha o tamanho entre 2px e 5px, Hardness 60% a 80%, e mantenha a opacidade em 55%. Tente não se preocupar se está fazendo correto, o estilo que aplicaremos na layer deverá fazer todo o trabalho duro rsrs, quando estiver satisfeito com as rachaduras que fizer aplique o estilo abaixo na layer e fique ainda mais satisfeito!

17º Passo

Crie ainda outra layer, ela deve está acima da layer “rachaduras” renomeie ela para “bordas-pedra”. Selecione a ferramenta Pencil Tool com o diâmetro de 1px e desenhe algumas imperfeições com a cor preta ao longo da linha da pedra como mostro abaixo, coloque a opacidade em 76%, então aplique o estilo na layer que mostro abaixo. Estou sinalizando com a cor branca onde pintei.

18º Passo

Vamos criar a placa de jogos salvos de madeira. Faça um shape como fiz abaixo e selecione a cor #463118. Chame a layer de “jogos-salvos-base” e aplique os seguintes estilos nela.

Enquanto estiver com o estilo gradiente aberto clique no local do gradiente na imagem e arraste ele para direita.

19º Passo

Usando a Pen Tool, tente replicar o shape que você vê abaixo, e posicione ele abaixo da layer “jogos-salvos-base”. O importante são as linhas destacadas de vermelha. Nomeie ele para “jogos-salvos-perspectiva” e coloque a cor do shape para #14100D. Também aplique um drop shadow como estou mostrando.

20º Passo

Pegue a textura de madeira disponível nos arquivos em anexo ao artigo. Arraste ele para dentro do seu projeto e redimencione e rotacione se necessário de uma forma que fique bom no shape que criou. Posicione ele acima da layer “jogos-salvos-base” e renomeie para “textura-madeira-1”. Pressione o Ctrl na layer “jogos-salvos-base”, e mantendo o Ctrl pressione o Shift na layer “jogos-salvos-pespectiva” para adicionar a seleção. Selecione a layer “textura-madeira-1” e clique no botão add layer mask localizado na parte de baixo do painel Layers. Selecione o modo de transparência da layer como Soft Light.

Duplique essa layer uma vez e nomeie ela como “textura-madeira-2”, configure o modo de transparência como overlay e a opacidade de layer em 15%.

21º Passo

Repita os passos 18, 19 e 20 para criar os botões. Tente variar o gradiente um pouco e use o gradiente do tipo Reflected. Para manter a organização das layers você pode agrupar as camadas dos botões. Tente combinar os resultados da imagem abaixo.

22º Passo

Agora vamos clarear um pouco as coisas, selecione a camada do topo do seu documento e clique em criar New Fill or Adjustment Layer. Selecione o ajuste Levels, arraste o ponteiro central para o valor 1,29, que é um pouco para esquerda.

Faça uma seleção da layer “logo-texto-1” , “escudo-1” e “escudo-front” todos segurando o Ctrl + Shift. Com a layer de ajuste selecionada pegue o brush com a cor preta e pinte a seleção, para que a layer não seja afetada pelo ajuste de levels.

Agora vamos adicionar brilho e contraste, crie uma nova layer de ajuste e escolha Brightness/contrast, usando o mesmo método que usamos para os levels NÃO DEIXE o ajuste de brilho e contraste afetar o texto, o restante todo deverá sofrer o ajuste. Configure para Brilho 25 e contraste 35.

Espero que tenha gostado, continuaremos na última parte do artigo.

Se você gostou desse artigo e foi útil pra você, deixe um comentário pra mim aqui embaixo. Adoro ler os feedbacks dos meus leitores. E se tiver alguma dúvida durante o processo é só perguntar que terei o maior prazer em responder. 😉