Ícones com textura no Fireworks

Tela – Abra o arquivo canvas.png. Ele foi dimensionado e texturizado. Não é parte do ícone e pode ser removido no fim do tutorial, mas por enquanto o deixaremos travado para que não seja selecionado acidentalmente.

icone-textura1

Textura – Desenhe um círculo com diâmetro de 750px. Defina a cor para #000000 e centralize-o na tela. No painel Properties, aplique uma textura Mesh com 100% de opacidade. No menu filters, escolha Blur> Radial Blur e defina amount:45; quality:100.

icone-textura2

icone-textura3

icone-textura4

Clique com o botão direito do mouse no círculo e escolha Group.

icone-textura5

Faça um quadrado de cantos arredondados com 512px de lado e cor #FFFFFF. Com os pontos amarelos, puxe o raio para as guias.

icone-textura6

Para finalizar a máscara, selecione o círculo e o retângulo e escolha Modify> Mask> Group As Mask. Para que o app se destaque, aplique uma sombra com os atributos colours:#000000, distance: 0, opacity: 100%, softness:22. Agora temos a base de textura.

icone-textura7

icone-textura8

Desenhe um novo quadrado com as mesmas propriedades do anterior. No painel Properties clique no menu suspenso Fill e escolha Gradiente> Cone.

icone-textura9

icone-textura10

Selecione a cor e no painel Properties e – na janela pop-up – defina as cores dos cantos para #FFFFFF. Leve o cursor para o centro da linha de cores e clique para inserir um marcador. Defina essa cor como #666666.

icone-textura11

Abra novamente e defina mais 2 marcadores com a cor #B3B3B3 nas posições como abaixo:

icone-textura12

Mude o ângulo do gradiente, movendo a barra direcional para o canto inferior direito do quadrado. No painel Properties, defina a opacidade para 65%.

icone-textura13

Ainda no painel Properties, clique no menu Filters e escolha Shadow and Glow> Inner Glow. Defina os atributos colours: #000000, width:5, opacity: 65%, softness: 3. No menu Shapes, escolha Doughnut; desenhe uma forma na tela com 430px de largura e altura.

icone-textura14

icone-textura15

Com o ponto amarelo à direita, faça a forma ter cerca de 45px de espessura. No menu Fill, escolha Gradiente> Linear. Clique na cor e, na janela pop-up, defina a cor inicial para #000000 e a cor final para #FFFFFF. Reduza a opacidade para cerca de 40%.

icone-textura16

icone-textura17

icone-textura18

Duplique a forma que acabou de criar, defina sua altura e largura para 294px e centralize-a. Clique e puxe o ponto do lado direito até o centro para que não haja mais uma barreira.

icone-textura19

Desenhe uma última forma no centro da tela com largura e altura de 400px. Torne sua expessura em torno de 30px com a cor sólida #000000.

icone-textura20

Com a ferramenta Shape crie um círculo com 274px de diâmetro. Aplique um gradiente Radial, cor interna #EC884C e externa #B8501B. Em Filters, selecione Shadow and Glow> Inner Shadow. Defina distance: 7, colours: #000000, opacity: 100%, softness: 30, angle: 35°

icone-textura21

Selecione Shadow and Glow> Drop Shadow com distance: 0, colour: #000000, opacity: 90%, softness: 20. Duplique o círculo criado, removendo os filtros. Em Colour, defina outer opacity para 10%, no menu Texture escolha waffle, e mude opacity para 65%.

icone-textura22

icone-textura23

Com a ferramenta Pen, crie uma série de curvas com 6px de expessura para criar as divisões da bola. Para ajustar sua aparência, no menu Stroke Category, confirme que estão definidas para Basic> Soft Line. Não se preocupe com as extremidades da bola, pois criaremos uma máscara.

icone-textura24

Agrupe as linhas criadas, duplique o grupo e mude a cor para #FFFFFF. No painel Layers leve o novo grupo para baixo das linhas pretas e mova a camada verticalmente para baixo em cerca de 2px.

icone-textura25

Para fazer o corte preciso das linhas, comece por agrupar todas as linhas. Desenhe um círculo branco de 274px de diâmetro, centralizado sobre as linhas. Selecione os itens e escolha Modify> Mask> Group as Mask.

icone-textura26

Desenhe um círculo de 145px de diâmetro e posicione-o próximo ao topo da bola. Defina um gradiente radial com as cores interna e externa igual a #FFFFFF. Defina a opacidade da cor externa para 0% e depois defina a opacidade geral da forma para 70%.

icone-textura27

Desenhe um novo círculo com 60px de diâmetro e posicione-o a 30px da guia do topo e da esquerda. Defina um gradiente radial com a cor interna #FFFFFF e externa #333333. Defina a opacidade da cor externa como 18px, e a opacidade geral da forma para 60%.

icone-textura28

No pop-up Properties mova a cor interna em torno de um oitavo na barra de cores. A tampa do parafuso agora está completa, e você só precisa duplica-la três vezes e posicionar as cópias próximo às outras extremidades. Pronto: seu ícone está pronto para ser redimensionado e exportado.

icone-textura29

Artigo publicado na Revista W nº 144 pag. 58,59 e 60, de autoria de James Parker (http://www.j-parker.co.uk)

Clique AQUI para baixar a textura utilizada no fundo da imagem.

O Treinamento Webmaster é um pacote de cursos da UpInside. Nele você terá todos os cursos necessários para se formar um webmaster e atuar no mercado de desenvolvimento, programação e marketing para web. Clique na imagem abaixo e saiba mais:

treinamento-webmaster.fw

 

 

Receba o e-book com dois efeitos de texto em PHOTOSHOP

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.