Como fazer ícones estilo Web 2.0 no fireworks

    [Admin] Win32
    [Admin] Win32
    [Admin]
    [Admin]

    Masculino Mensagens : 175

    Como fazer ícones estilo Web 2.0 no fireworks Empty Como fazer ícones estilo Web 2.0 no fireworks

    Mensagem  [Admin] Win32 em Sab Jan 22, 2011 11:34 am

    Objetivo: Ícone estilo Web 2.0;
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-1

    1. Crie um novo documento no Fireworks no tamanho de sua preferência, optei por usar 400 x 400 px.

    2. Na barra de ferramentas escolha Rounded Rectangle e crie um retângulo de 140 x 140 px:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-2
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-3
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-4

    3. Agora vamos diminuir os cantos arredondados clicando em qualquer um das marcações amarelas e arrastando para o lado:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-5

    4. Duplique o retângulo e mude o ângulo pressionando Ctrl+ Shift +T. Na tela que aparecer escolha a opção Rotate e ângulo 45º:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-6
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-7
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-8

    5. Arraste o retângulo que acabamos de aplicar o Rotate para o canto inferior do retângulo original:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-9

    Muita atenção nestes passos, eles serão muito importantes para que alcancemos nosso objetivo final.

    6. Selecione os dois retângulos e duplique. Com os retângulos ainda selecionados abra o menu Modify > Combine Paths > Intersect:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-10

    Observe que só ficou o canto que estava a intercessão dos retângulos:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-11

    7. Selecione os outros dois retângulos, "só os retângulos" e abra o menu Modify > Combine Paths > Punch:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-12

    8. Selecione o canto da intercessão clique em cima com o botão direito do mouse; Transform > Rotate 180°:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-13
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-14

    9. Duplique a imagem maior. Na barra de ferramentas selecione Ellipse tool (U) crie um circulo sobre a imagem duplicada:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-15

    10. Selecione as duas imagens como na figura acima e outra vez vá ao menu Modify > Combine Paths > Intersect
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-16

    Agora vamos dar o acabamento em nosso ícone.

    11. Com a imagem seleciona como na figura acima aplique o efeito Gradiente Linear com as seguintes cores #33CCFF e #0099FF:

    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-17

    12. Mude a orientação do Gradiente e retire a borda:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-18

    13. Altere o valor da transparência para 70:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-19

    14. Selecione o retângulo e repita os passos 11 e 12 mudando a cor para #66CCFF e #1F4FCB:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-20

    15. Agora é a vez do canto. Selecione e repita os passos 11 e 12 mudando a cor para #FFFFFF e #CCCCCC:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-21

    16. Duplique a imagem que acabamos de aplicar o efeito, selecione a que ficou por baixo e arraste para o lado esquerdo como na imagem abaixo:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-22

    17. Com a Pen Tool (P) adicione mais um ponto clicando sobre a linha de seleção da imagem e mude a categoria de Gradiente para Solid com a cor #0066CC. Veja como ficou na imagem abaixo:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-23
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-24

    18. Para finalizar a nossa brincadeira selecione todas as imagens e agrupe pressionando as teclas Ctrl+G e aplique o Filtro Shadow and Glow > Drop Shadow:
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-25
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-26

    Agora usem a imaginação e divirtam-se.
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-27
    Como fazer ícones estilo Web 2.0 no fireworks Icones-estilo-web-28
    [Admin] GuiHh
    [Admin] GuiHh
    [Admin]
    [Admin]

    Masculino Mensagens : 173
    Idade : 25
    Localização : Brasil

    Como fazer ícones estilo Web 2.0 no fireworks Empty Parabens !

    Mensagem  [Admin] GuiHh em Sab Jan 22, 2011 12:37 pm

    Muiito boa goste ! ;goodcaver;





    Como fazer ícones estilo Web 2.0 no fireworks GuiHh%20Admin%20TR

    Como fazer ícones estilo Web 2.0 no fireworks Sin%20Fan%20Admin%20GUIHh

    Spoiler:
    Meus outros Singfan:
    Como fazer ícones estilo Web 2.0 no fireworks Fan_ad10



    Spoiler:
    My Fans:
    Como fazer ícones estilo Web 2.0 no fireworks Fan_es10
    Como fazer ícones estilo Web 2.0 no fireworks Userbariyxd
    [Admin] Win32
    [Admin] Win32
    [Admin]
    [Admin]

    Masculino Mensagens : 175

    Como fazer ícones estilo Web 2.0 no fireworks Empty Re: Como fazer ícones estilo Web 2.0 no fireworks

    Mensagem  [Admin] Win32 em Dom Jan 23, 2011 4:12 pm

    VLW

    Conteúdo patrocinado

    Como fazer ícones estilo Web 2.0 no fireworks Empty Re: Como fazer ícones estilo Web 2.0 no fireworks

    Mensagem  Conteúdo patrocinado


      Data/hora atual: Seg Set 16, 2019 4:51 pm