Assim será o nosso ícone de aplicativo no final. Mas agora chega de conversa. Vamos começar diretamente no Adobe Illustrator...
Passo 1: Criar a base
No Illustrator, o primeiro passo é criar uma nova área de trabalho em Arquivo>Novo. Na janela que surgir, selecione um formato de 70x70mm. Confirme a janela com OK.
Pegue a Ferramenta Retângulo na Barra de Ferramentas e clique uma vez em qualquer lugar da sua área de trabalho. Em seguida, aparecerá uma caixa de diálogo onde poderá inserir o tamanho do seu retângulo. Escolha o tamanho de 35x35mm e confirme com OK. Esta é a base do nosso ícone de aplicativo.
Já que os ícones de aplicativos da Apple nunca são quadrados, agora precisamos arredondar os cantos. Selecione o retângulo e vá para a barra de menu superior em Efeito>Filtro Estilizar>Cantos arredondados ...
Na janela que aparecer, insira um raio de canto de 7mm. Confirme com OK.
Após confirmar este efeito, os cantos serão arredondados no visual, porém o caminho ainda é angular. Para corrigir isso, vá para Objeto>Expandir Aparência. Agora o efeito foi convertido em um objeto (o caminho segue diretamente ao longo dos cantos arredondados).
No próximo passo, você precisará da Paleta de Gradiente. Se ainda não a abriu, pode encontrá-la em Janela>Gradiente.
Clique agora na caixa de gradiente na Paleta de Gradiente, para preencher seu retângulo arredondado com um gradiente padrão preto/branco. (Se o seu retângulo ainda tiver um Contorno, é hora de removê-lo agora).
Na configuração do ângulo do gradiente, insira um valor de 90° para que ele se mova de cima para baixo de forma suave.
Como nosso ícone terá um gradiente azul, (você também pode escolher suas próprias cores) preparei dois valores RGB para você.
• Azul escuro - 28/57/145
• Azul claro - 84/244/255
Para atribuir esses valores de cor ao gradiente, basta clicar duas vezes nos campos de cor na Paleta de Gradiente. Em seguida, você terá a opção de inserir os valores RGB.
(Se houver outro modo de cor configurado, clique na pequena seta no canto superior direito da Paleta de Gradiente, para selecionar o modo de cor adequado).
Depois de fazer isso, sua aparência deve se assemelhar a algo como na imagem. (Figura 11).
Para refinar um pouco mais o gradiente, vá em Efeito>Filtro Estilizar>Brilho Interno ... No modo de método de preenchimento, selecione Mesclar. Para a Opacidade, escolha um valor de 75% e para Suavização, defina 8,8mm. Como queremos aplicar esse efeito apenas na área externa, marque a opção Borda. Confirme a janela com OK.
Em seguida, adicione uma Sombra ao conjunto. Isso também é feito em Efeito>Filtro Estilizar>Sombra ... Escolha as configurações para este filtro aproximadamente como na Figura 13. Mas você pode variar um pouco aqui.
No próximo passo, copiamos o retângulo com Command+C e colamos na mesma posição com Command+F. (No PC, isso pode ser feito com Ctrl+C e Ctrl+F).
Como os efeitos aplicados anteriormente no retângulo copiado não são mais necessários, vocês devem excluí-los. Como alguns de vocês já devem saber, todos os efeitos e filtros aplicados no Illustrator são listados na Paleta de Aparência. Se essa paleta não estiver visível para vocês, é possível acessá-la novamente em Janela>Aparência.
Agora exclua a sombra projetada. Isso pode ser feito facilmente arrastando a sombra projetada na Paleta de Aparência enquanto mantém o botão do mouse pressionado até a lixeira no canto inferior direito dessa paleta.
Vocês não precisam excluir o brilho interno, apenas ajustá-lo um pouco. Antes disso, altere a cor de preenchimento do seu retângulo copiado para branco.
Em seguida, na Paleta de Aparência, clique no brilho interno, defina o modo como Normal e escolha um preto profundo para a cor. A opacidade deve ser definida para 100% e para o desfoque, você pode utilizar um valor de 10 mm (Figura 17).
Para mesclar essa cópia com o original abaixo com o degradê azul, basta reduzir a opacidade para 50% e definir o modo de preenchimento como Luz suave. Isso pode ser feito através da Paleta de Transparência. (Essa paleta pode ser encontrada em Janela>Transparência).
Isso aumentará ligeiramente o contraste e nosso ícone de aplicativo ganhará profundidade.
Passo 2: Criando uma coroa de raios
Neste passo, vamos ver como criar a coroa de raios para o ícone do aplicativo. Para isso, é melhor ocultar os dois retângulos criados no Passo 1, para ter espaço de trabalho novamente.
Pegue a Ferramenta de Linhas na Barra de Ferramentas e defina a cor de contorno como preto e a espessura do contorno como 0,5pt.
Agora desenhe uma linha para cima aproximadamente a partir do centro e mantenha o botão do mouse pressionado. Quando a linha estiver desenhada (mantendo o botão do mouse pressionado), pressione a Tecla Ctrl + a Tecla com esses Dois Símbolos < >.
Agora, mova em círculo mantendo o botão do mouse pressionado. Dependendo da velocidade do movimento do cursor do mouse, diferentes números de linhas serão criados.
Ao completar o círculo, a imagem deve parecer aproximadamente como na Figura 19 para vocês. (Tentem algumas vezes, pois aqui também vale o ditado "A prática leva à perfeição").
Selecione todas as linhas e agrupe-as com Command+G (no PC: Ctrl+G). Copie tudo com Command+C e Command+F (no PC: Ctrl+C e Ctrl+F) e cole na mesma posição novamente. Nessa cópia, mude a cor do contorno para branco e gire levemente para a direita ou esquerda, para que parte das linhas pretas fique visível novamente.
A imagem deve se parecer aproximadamente com isso. (Figura 20):
Agora, selecione todas as linhas novamente e agrupe-as novamente com Command+G (no PC: Ctrl+G).
Agora você pode mostrar os retângulos do Passo 1 novamente. Certifique-se de que o centro da sua coroa de raios esteja aproximadamente no centro do seu retângulo.
Agora copiem o retângulo cinza arredondado, o qual vocês calcularam no passo 1 com o degradê azul. (Command+C ou no PC - Ctrl+C).
Agora cliquem no grupo com o círculo de raios e olhem a Paleta de Transparência. Aqui vocês terão a opção (semelhante ao Photoshop) de criar uma máscara. Para isso, cliquem duas vezes na área mostrada na Figura 23. Com esse duplo clique, será criada uma máscara de opacidade.
Após terem criado isso, vocês notarão que a sua Paleta de Camadas mudou, enquanto estiverem dentro da máscara. Com Command+F (no PC: Ctrl+F), agora insiram o retângulo copiado anteriormente na máscara. Agora só precisam reduzir a opacidade de 50% para 10%.
Agora saiam da máscara para voltar à visualização normal. Façam isso clicando uma vez no campo branco ao lado do símbolo de máscara. (Figura 25).
Passo 3: Criar a Base do Pictograma
Agora que quase terminamos a parte mais complexa, estamos prontos para inserir um pictograma ou símbolo no nosso ícone de aplicativo. No entanto, antes disso, devemos rapidamente criar uma base ou plataforma para que tudo pareça melhor depois.
Peguem a ferramenta Elipse e desenhem uma elipse aproximadamente no meio. (Ver Figura 26).
Preencham essa elipse com um azul escuro. Para isso, utilizei os seguintes valores de cor. RGB - 0/0/255.
Reduzam a opacidade para cerca de 70% e depois vão em Efeito>Filtro de Desfoque>Desfoque Gaussiano...
Para o desfoque, escolhi um raio de 28 pixels. No entanto, vocês podem livremente alterar esse valor. Confirmem com OK.
Passo 4: Inserir Pictograma
Agora que a base está pronta, finalmente é hora. Na verdade, só precisamos inserir um pictograma no nosso ícone de aplicativo. Como um pequeno extra, coloquei alguns pictogramas diferentes nos arquivos de trabalho. No entanto, também podem utilizar os seus próprios com prazer.
No menu superior, cliquem em Arquivo>Colocar e escolham um pictograma de sua preferência. No meu caso, é o computador dos dados de trabalho.
... pronto! ... poderiam pensar ...
No entanto, ainda há um ou dois pequenos detalhes a serem feitos. Em primeiro lugar, o pictograma receberá uma sombra. Para isso, vão em Efeito>Filtro de Estilização>Sombra. Baseiem-se nos valores para essa sombra da Figura 32.
Passo 5: Adicionar Brilho
No último passo, adicionaremos um brilho para finalizar. Peguem a ferramenta Elipse e desenhem uma elipse branca como na Figura 33.
Por fim, só precisam configurar o método de preenchimento da elipse para Luz Suave. E o seu ícone de aplicativo está pronto.
Palavras Finais:
Espero que tenham se divertido com o tutorial e agora consigam criar alguns ícones de aplicativos bonitos. Nos arquivos anexos também encontrarão meu arquivo de trabalho original, para que possam dar uma olhada lá, caso tenham dificuldades em algum momento.
Se tiverem mais alguma dúvida sobre este assunto, por favor escrevam nos comentários. Farei o possível para responder o mais breve possível.
Cumprimentos
Seu Julian
