Escola Aberta: Tutorial Photoshop: Como criar ícones iguais aos do iPhone

Veja o tutorial em vídeo abaixo ou se preferir, siga os passos com as imagens logo abaixo do vídeo!

Atenção! Se você já tem um conhecimento, no mínimo, básico de Photoshop, poderá ir modificando os passos da criação do ícone de acordo com a sua preferência, mas se não souber NADA, aconselho que faça exatamente como será mostrado, somente depois de criar o primeiro ícone você estará pronto para refazer este tutorial personalizando à sua maneira cada passo.

Vamos começar?

Parte 1 – Criando a base

01. Crie um novo arquivo no Photoshop, através do menu Arquivo > Novo ou no atalho Ctrl + N. Defina altura e largura em 1000px cada uma.

02. Crie uma nova camada. Para isso use o atalho Ctrl + Shift + N, ou, na paleta de camadas, clique no ícone indicado abaixo.

03. Clique duas vezes no nome da camada para renomeá-la, coloque o nome “Base” e aperte Enter para aplicar.

04. Selecione a ferramenta Retângulo Arredondado (tecla U). Caso outra esteja selecionada, clique com o botão direito do mouse e selecione-a.

05. Nas definições de forma, mude o Radial para 100px.

06. Clique no centro da imagem, aparecerá a janela de criação do retângulo. Mude a altura e a largura para 1000px (o tamanho do seu documento atual.

Nota: Você deve estar se perguntando o por quê de a imagem ter um tamanho tão grande se o ícone é tão pequeno, não é? Com uma imagem grande o nível de detalhes que podemos colocar é maior, assim, criamos uma imagem de ótima qualidade e quando ela virar ícone, não ficará desconfigurada.

07. Selecione a ferramenta Mover (tecla V) e arraste o retângulo (agora quadrado) para o centro da imagem.

08. Clique no desenho de olho que fica ao lado da camada, dessa forma você oculta a camada de plano de fundo, deixando o fundo transparente.

Parte 2 - Personalizando

09. Abra no Photoshop a imagem que você quer transformar em ícone.

10. Aperte Ctrl + A para selecionar toda a imagem, em seguida, Ctrl + C para copiá-la. Vá para o arquivo do ícone através das abas acima e aperte Ctrl + V para colar a imagem no arquvio, criando automaticamente uma nova camada para ela.

11. Caso a imagem seja muito grande, diminua-a, se for muito pequena, aumente-a, ambos podem ser feitos com o atalho Ctrl + T. Segure Shift e clique e arraste no canto da imagem até que ela fique um pouco maior que a base, o suficiente para cobrir toda a área da imagem. Caso seja necessário, diminua a opacidade da imagem, tornando-a mais transparente para que você possa ver os limites da base do ícone.

12. Aperte Enter para aplicar a transformação da imagem e volte a opacidade para 100%. Agora deixe apenas a camada da imagem selecionada e clique na imagem da camada base, isso irá criar uma seleção no formato do ícone na imagem.

13. Sua imagem deverá estar assim:

14. Aperte Ctrl + Shift + I para inverter a seleção. Em seguida, aperte Delete. Agora sua imagem está assim:

Parte 3 – Colocando o brilho

15. Crie uma nova camada (Ctrl + Shift + N). Dê o nome de Brilho.

16. Selecione a ferramenta Pincel (Tecla B) e defina o tamanho para 2200px, dureza em 100% e mude a cor primeiro plano para branco.

17. Clique com metade do pincel para fora da imagem, de modo que fique como na imagem a seguir.

18. Siga novamente os passos 12 e 14 para recortar os pedaços da imagem da camada Brilho que estão passando para fora da base.

19. Defina a opacidade da camada Brilho em 31%. Sua imagem estará como abaixo:

Parte 4 – Salvando e transformando em ícone

20. Você deverá salvar no formato .png, para isso, vá no menu Arquivo > Salvar como e na janela que aparecer, escolha o local onde ela será salva, o nome e o formato. Caso apareça outra janela, confirme tudo.

21. Abra o seu navegador de internet e acesse o endereço http://iconverticons.com/ na página que se abrir, selecione a opção Use iConvert Icons Online.

22. Clique em Browser para selecionar sua imagem, no local onde você a salvou. Em seguida clique em Convert.

23. Assim que a página carregar, você escolhe o ícone para salvar de acordo sua plataforma (Windows, Mac ou Linux). Clique emDownload .ico (isso se você estiver usando Windows). Salve o ícone onde preferir.