Como criar um ícone de Nuvem Vibrante no Photoshop

Neste tutorial iremos criar um ícone de nuvem colorida e vibrante. Para isto vamos usar a abundância de gradientes e efeitos de luz para produzir um ícone muito legal perfeito para um design de site moderno ou app móvel.

Neste tutorial iremos criar um ícone de nuvem colorida e vibrante. Para isto vamos usar a abundância de gradientes e efeitos de luz para produzir um ícone muito legal perfeito para um design de site moderno ou app móvel.

Este ícone terá como principal característica a abundância de cores vibrantes para criar uma aparência tridimensional. Uma transição de roxo para azul proporciona a base colorida, enquanto os destaques irão ajudar a iluminar o ícone.

Passo 1. Abra um novo documento no Photoshop e comece desenhando um círculo preto com a ferramenta Elliptical Marquee em uma nova camada. Preencha com a cor preta e segurando a tecla [Shift] mova a seleção para o outro lado e preencha uma cópia novamente com a cor preta, então use a ferramenta rectangular marquee para preencher o espaço entre os dois círculos, alinhando a borda inferior perfeitamente.

Passo 1. Abra um novo documento no Photoshop e comece desenhando um círculo preto com a ferramenta Elliptical Marquee em uma nova camada. Preencha com a cor preta e segurando a tecla [Shift] mova a seleção para o outro lado e preencha uma cópia novamente com a cor preta, então use a ferramenta rectangular marquee para preencher o espaço entre os dois círculos, alinhando a borda inferior perfeitamente.

Passo 2. De volta com a ferramenta Elliptical Marquee, desenhe um círculo um pouco maior e outro um pouco menor em cada sobreposição dos círculos originais, esquerda e direita, como mostra a imagem abaixo.

Passo 2. De volta com a ferramenta Elliptical Marquee, desenhe um círculo um pouco maior e outro um pouco menor em cada sobreposição dos círculos originais, esquerda e direita, como mostra a imagem abaixo.

Passo 3. Preencher eventuais lacunas no centro para deixar o gráfico com uma forma de nuvem reconhecível.

Passo 3. Preencher eventuais lacunas no centro para deixar o gráfico com uma forma de nuvem reconhecível.

Passo 4. Clique duas vezes na camada para abrir a janela Layer Stiles e adicione um Gradiente Overlay. Adicione uma amostra de cor no meio do gradiente, em seguida, mude as cores para #300a85, #2555dd, #c8ecff da direita para a esquerda respectivamente. Ao escolher as cores, evite selecionar tons de mesma matiz. Em vez disso, mova a roda de cores para criar mudanças mais intensas na cor, assim os tons se tornam mais quentes ou mais frios.

Passo 4. Clique duas vezes na camada para abrir a janela Layer Stiles e adicione um Gradiente Overlay. Adicione uma amostra de cor no meio do gradiente, em seguida, mude as cores para #300a85, #2555dd, #c8ecff da direita para a esquerda respectivamente. Ao escolher as cores, evite selecionar tons de mesma matiz. Em vez disso, mova a roda de cores para criar mudanças mais intensas na cor, assim os tons se tornam mais quentes ou mais frios.

Passo 5. Ainda na janela Layer Styles aplique à nuvem um efeito Inner Glow para adicionar a aparência tridimensional. Altere a cor para branco, o modo blend para Soft Light e deixe a opacidade em 100%, você pode brincar a vontade com o controle deslizante de tamanho.

Passo 5. Ainda na janela Layer Styles aplique à nuvem um efeito Inner Glow para adicionar a aparência tridimensional. Altere a cor para branco, o modo blend para Soft Light e deixe a opacidade em 100%, você pode brincar a vontade com o controle deslizante de tamanho.

Passo 6. Adicionando o efeito Inner Shadow pode-se criar um destaque legal na parte superior. Altere o padrão de preenchimento de preto ao branco, em seguida, alterar o modo de blend para Overlay para permitir que as cores possam interagir. Ajuste a Distância, Choke e Size para um equilíbrio melhor do destaque.

Passo 6. Adicionando o efeito Inner Shadow pode-se criar um destaque legal na parte superior. Altere o padrão de preenchimento de preto ao branco, em seguida, alterar o modo de blend para Overlay para permitir que as cores possam interagir. Ajuste a Distância, Choke e Size para um equilíbrio melhor do destaque.

Passo 7. Clique no OK para confirmar os estilos de camada, então mantenha a tecla [CTRL] pressionada e dê um clique na miniatura da camada de nuvens para carregar uma seleção. Acesse Select> Modify> Expand e digite 5px. Isso fará com que a seleção aumente para a parte externa da nuvem.

Passo 7. Clique no OK para confirmar os estilos de camada, então mantenha a tecla [CTRL] pressionada e dê um clique na miniatura da camada de nuvens para carregar uma seleção. Acesse Select> Modify> Expand e digite 5px. Isso fará com que a seleção aumente para a parte externa da nuvem.

Passo 8. Preencha esta nova seleção com a cor preta em uma nova camada abaixo da nuvem principal para criar um efeito de contorno.

Passo 8. Preencha esta nova seleção com a cor preta em uma nova camada abaixo da nuvem principal para criar um efeito de contorno.

Passo 9. Com a camada do contorno selecionada, abra os estilos de camada novamente, adicione um Gradiente Overlay. Escolha púrpuras e azuis semelhantes aos da nuvem, mas com tons um pouco diferentes para dar contraste contra a camada de nuvens. Eu estou usando #571a9b, #4c54e5, #c0e8ff respectivamente.

Passo 9. Com a camada do contorno selecionada, abra os estilos de camada novamente, adicione um Gradiente Overlay. Escolha púrpuras e azuis semelhantes aos da nuvem, mas com tons um pouco diferentes para dar contraste contra a camada de nuvens. Eu estou usando #571a9b, #4c54e5, #c0e8ff respectivamente.

Passo 10. Carregue a seleção da camada de nuvens de novo ([CTRL] + Clique na miniatura), crie uma nova camada, então clique com o botão direito sobre a seleção e escolha a opção Stroke.

Passo 10. Carregue a seleção da camada de nuvens de novo ([CTRL] + Clique na miniatura), crie uma nova camada, então clique com o botão direito sobre a seleção e escolha a opção Stroke.

Passo 11. Altere a largura de traçado para 2px usando branco como cor, então verifique se o local está definido para Dentro (Inside).

Passo 11. Altere a largura de traçado para 2px usando branco como cor, então verifique se o local está definido para Dentro (Inside).

Passo 12. Use a borracha com configuração grande e suave para excluir a parte inferior do contorno, deixando uma transição gradual de cima para baixo. Este pequeno toque sutil acrescenta outro destaque para o ícone.

Passo 12. Use a borracha com configuração grande e suave para excluir a parte inferior do contorno, deixando uma transição gradual de cima para baixo. Este pequeno toque sutil acrescenta outro destaque para o ícone.

Passo 13. Crie uma nova camada e posicione abaixo de todas as outras, em seguida pinte uma mancha preta com a ferramenta pincel, dimensione de maneira que fique esmagada abaixo da nuvem, criando uma espécie de sombra.

Passo 13. Crie uma nova camada e posicione abaixo de todas as outras, em seguida pinte uma mancha preta com a ferramenta pincel, dimensione de maneira que fique esmagada abaixo da nuvem, criando uma espécie de sombra.

Passo 14. Divida a sombra ao meio usando ferramentas de seleção e movendo para o lado. Segure [Shift] para certificar-se de que o movimento aconteça em linha reta. Posicione como na imagem abaixo.

Passo 14. Divida a sombra ao meio usando ferramentas de seleção e movendo para o lado. Segure [Shift] para certificar-se de que o movimento aconteça em linha reta. Posicione como na imagem abaixo.

Passo 15. Use a ferramenta Single Column marquee para fazer uma seleção, em seguida, transforme e estique esta seleção para preencher a área central da sombra com um segmento de reta. Pinte novamente de preto. Se necessário, adicione suavidade pressionando as teclas [SHIFT+F6] antes de pintar.

Passo 15. Use a ferramenta Single Column marquee para fazer uma seleção, em seguida, transforme e estique esta seleção para preencher a área central da sombra com um segmento de reta. Pinte novamente de preto. Se necessário, adicione suavidade pressionando as teclas [SGIFT+F6] antes de pintar.

Passo 16. Mova a sombra e posicione bem abaixo da nuvem, em seguida, adicione outro Overlay Gradient na janela de estilos de camada. Use tons mais escuros de azul e roxo para as cores da sombra. Uma sombra na realidade não é completamente preta, é composta de todas as cores e os reflexos que estão ao seu redor.

Passo 16. Mova a sombra e posicione bem abaixo da nuvem, em seguida, adicione outro Overlay Gradient na janela de estilos de camada. Use tons mais escuros de azul e roxo para as cores da sombra. Uma sombra na realidade não é completamente preta, é composta de todas as cores e os reflexos que estão ao seu redor.

Conclusão: Nosso ícone de nuvem vibrante está completo. Os gradientes e destaques realmente ajudam a criar uma aparência tridimensional, enquanto as variações de cor sutilmente dão uma sensação mais realista ao sombreamento.

Conclusão: Nosso ícone de nuvem vibrante está completo. Os gradientes e destaques realmente ajudam a criar uma aparência tridimensional, enquanto as variações de cor sutilmente dão uma sensação mais realista ao sombreamento.

 

Site original: Line 25

Compartilhe este artigo:

Guia de Estudos para Aprender Design por Conta Própria

Baixe o nosso guia e receba dicas e as novidades do Clube do Design no seu email:

Deixe uma resposta

Mais artigos pra você ler:
Affinity Photo #7 - Inserindo imagens stock

Affinity Photo #7 - Inserindo imagens stock

Você pode adicionar fotos e imagens rasterizadas adicionais à sua página como uma nova camada. As fotos e imagens inseridas…
Affinity Photo #6 - Incorporar documentos

Affinity Photo #6 - Incorporar documentos

A incorporação de documentos permite que você coloque qualquer documento do Affinity (Designer, Photo, etc.), Photoshop, Illustrator, Freehand, SVG, EPS…
Affinity Photo #5 - Criando novos documentos

Affinity Photo #5 - Criando novos documentos

Quando você cria seu novo documento, você especifica uma variedade de configurações de cores e dimensões de página em função…
Affinity Photo #4 - Abrindo imagens RAW

Affinity Photo #4 - Abrindo imagens RAW

Você pode abrir imagens raw de sua câmera digital diretamente no Affinity Photo. Ao fazer isso, você será capaz de…
Fechar Menu