Criando Flores

Por: Rafael Vaz
Tuesday, 07 de July de 2009 às 13:16

FloresUm dos tutoriais que tive a oportunidade de criar e que teve uma ótima repercussão foi esse aqui, o Criando Flores.

Há três anos ninguém tinha idéia de como criá-las, não havia nenhum tutorial que pudesse explicar por onde começar, que ferramenta utilizar, enfim…

Hoje vejo que existem muitos tutoriais explicando como criar flores no Fireworks, onde os usuários baseiam-se na idéia explicada por mim, que agora você poderá ver aqui, no Tutorial Fireworks.


Tutorial: Criando Flores com Fireworks

1º – Crie um novo documento de 300px height por 300px width fundo branco.

Criando flores com Adobe Fireworks

2º – No painel de ferramentas vector selecione a opção Star e clique no palco. Automaticamente surgirá uma estrela com o tamanho definido em 190px height por 181px width.

Criando flores com Adobe Fireworks

Criando flores com Adobe Fireworks

Esta estrela contém pontos de controle (amarelo) em posições específicas, trata-se de um auto-shape (forma automática) do Fireworks. Veja em detalhe:

Criando flores com Adobe Fireworks

3º – Crie um mais um lado nesta estrela, de cinco vamos para seis.

Criando flores com Adobe Fireworks

Para dar a forma desejada, é preciso arrastar o ponto de controle arredondamento exterior.

Criando flores com Adobe Fireworks

A forma vai diminuir e ficar mais ou menos com este aspecto:

Criando flores com Adobe Fireworks

4º – Aumente a forma com a ferramenta Scale tool (atalho = q).

Criando flores com Adobe Fireworks

No próximo passo vamos começar a colorir a flor.

5º – Selecione a forma e no painel de propriedades clique em preenchimento, escolhendo a opção gradient > radial.

Criando flores com Adobe Fireworks

Resultado:

Criando flores com Adobe Fireworks

6º – Duplique a forma (ctrl + c e ctrl + v ou ctrl + shift + d) e em seguida diminua com Scale tool (atalho = q) para posicioná-la ao centro:

Criando flores com Adobe Fireworks

Em detalhe a copia posicionada ao centro:
Criando flores com Adobe Fireworks

No próximo passo vamos começar o uso de filtros, indo painel de propriedades > live filters.

7º – Com a copia selecionada vamos usar quatro filtros em seqüência.

Shadow and Glow > inner glow
Criando flores com Adobe Fireworks

Noise > add noise:
Criando flores com Adobe Fireworks

Blur > zoom blur:
Criando flores com Adobe Fireworks

E Sharpen > sharpen more:
Criando flores com Adobe Fireworks

Perceba como já vai tomando forma:
Criando flores com Adobe Fireworks

8º – Duplique a forma do centro e diminua um pouco:
Criando flores com Adobe Fireworks

Em seguida posicione também ao centro:
Criando flores com Adobe Fireworks

9º – Através do ponto de controle de adição de lados, vamos criar até o número 18:
Criando flores com Adobe Fireworks

Criando flores com Adobe Fireworks

Hum… quase lá…
Criando flores com Adobe Fireworks

Veja que a flor já está com aspecto bem bacana, mesmo assim vou adicionar mais um detalhe:

10º – Selecione está última forma duplicada e altere para preto a seguinte cor de seu preenchimento radial:
Criando flores com Adobe Fireworks

Criando flores com Adobe Fireworks

Pronto! Basta selecionar todos os objetos, agrupá-los (ctrl + g) e em seguida adicionar sombra em live filters > shadow and glow > drop shadow:
Criando flores com Adobe Fireworks

E aqui vai uma ilustração com flores, tendo naturalmente esse tutorial como base.
Criando flores com Adobe Fireworks

Comentários (15)

  1. 1 - IDUX » Two really good tutorials for Adobe Fireworks escreveu:

    [...] a great tutorial on drawing flowers using the Star autoshape, and here’s another for creating flames using the wave gradient and [...]

  2. 2 - Tutorials and Resources for Adobe Fireworks | Tutorials | Smashing Magazine escreveu:

    [...] Vector-like Flowers [...]

  3. 3 - Tutorials and Resources for Adobe Fireworks | Tutorials | Smashing Magazine escreveu:

    [...] Vector-like Flowers [...]

  4. 4 - The Ultimate Round-Up of Fireworks Tutorials and Resources « Tech7.Net escreveu:

    [...] Vector-like Flowers [...]

  5. 5 - Wordpress Blog Services - The Ultimate Round-Up of Fireworks Tutorials and Resources escreveu:

    [...] Vector-like Flowers [...]

  6. 6 - Alexandre escreveu:

    Excelente dica ! Parabéns ! um abraço, Alexandre

  7. 7 - The Ultimate Round-Up of Fireworks Tutorials and Resources - Programming Blog escreveu:

    [...] Vector-like Flowers [...]

  8. 8 - Michel escreveu:

    Fantástico cara… você crio flores do nada,nota 10

  9. 9 - optimiced | en » Daily Design (2010-008) escreveu:

    [...] flowers, entirely made in Adobe Fireworks, were inspired by this nice tutorial. And they are a present, indeed, for a special friend of me and Ani (hint: her name starts with a [...]

  10. 10 - optimiced | bg » Daily Design (2010-008) escreveu:

    [...] създадени във Fireworks, бяха вдъхновени от един много приятен tutorial. И са подарък за един наш много добър приятел (на мен и [...]

  11. 11 - daniele escreveu:

    olaa
    td bem?
    akii
    nao consegui fazer isso nao
    pq qdo insiro a estrela ela nao da opções pra modificar ela n
    aqueles quadradinhos amarelos nao aparecem..

  12. 12 - daniele escreveu:

    agora conseguiii
    o/

  13. 13 - débora escreveu:

    Maravilhoso, fiz e o resultado ficou otimo ! Parabens e obrigada .

  14. 14 - kelly escreveu:

    Nossa gostei consegui fazer mais não igual ao seu que temanho de flor vc colocou e como vc puxou a folha da flor…

  15. 15 - Sr.Lima escreveu:

    Só vejo tutoriais bobos na web de Fireworks. Esse foi o primeiro que gostei, pelo menos usou com criatividade os recursos do FW. Abraços e parabéns!

Deixe seu comentário