Like On Facebook

.::.::Search::.::.

Tuesday, August 23, 2011

How to Create Flowers - Fireworks Tutorial


Adobe Fireworks is the perfect tool for quickly designing and editing web graphics. It also has the ability to produce high quality vector images without taking too much of your precious time.
In the following tutorial I will show you how to design a beautiful flower using Star auto shape.

Requirement

Fireworks CS3 and higher.

Tutorial

    Final Product What You'll Be Creating


  1. New document
  2. Create a new document with a canvas size of 300 pixels by 300 pixels and give it a white background. In the Tools panel select the Star auto shape. Drag a 6-side star on the canvas.
    Flowers using Adobe Fireworks
    Figure 2: Star Auto Shape
  3. Create the Shape
  4. To create the flower shape, select the "roundness 1" control point and drag it towards the centre of your star until you have a flower shape with a hexagon centre and six petals.
  5. Auto Shape Properties
  6. For better control, you can, alternatively, go into the Auto shape Properties panel and insert these values:
    Flowers using Adobe Fireworks
    Figure 3: Auto Shape Properties
  7. Radial Gradient
  8. Select the new shape. With the scale tool, increase the size of your flower to 239 pixels by 207 pixels and add a radial gradient #9A5EB0 > #71198F
    Flowers using Adobe Fireworks
    Figure 4: Radial Gradient
  9. Clone
  10. Clone the shape by pressing (Ctrl+Alt+C on Windows and Command+Option+C on a Mac) to create a second flower, select the top most flower and reduce it to 80% with the Numeric Transform (Ctrl+Shift+T on Windows and Command+Shift+T on a Mac) and modify the radial gradient on this flower to: #D3B8DC > #620082.
    Flowers using Adobe Fireworks
    Figure 5: Clone
  11. Filters
  12. With the top most flower selected again, apply 4 live filters (Live filters remain editable so you can change them in your Fireworks source PNG at a later time).
    1. Shadow and Glow > Inner glow
    2. Flowers using Adobe Fireworks
      Figure 6: Inner Glow
    3. Noise > Add noise
    4. Flowers using Adobe Fireworks
      Figure 7: Add Noise
    5. Blur > Zoom Blur.
    6. Flowers using Adobe Fireworks
      Figure 8: Zoom Blur
    7. Sharpen > Sharpen More
    8. Finally, you are going to apply Shadow and Glow > Drop shadow to the first flower you created.
  13. Filters
  14. After applying your Live filters, your flower should look like this:
    Flowers using Adobe Fireworks
    Figure 9: Live Filters
  15. Now for the final part of the flower.
    1. Duplicate the top most flower (clone or duplicate) to create a third flower ; reduce it and place it on top of the others. Increase the number of points/petals to 18 by dragging the yellow Points control handle upwards.
    2. Flowers using Adobe Fireworks
      Figure 10: Live Filters
    3. Modify the radial gradient to have yellow in the center. Et voil�!
    4. Flowers using Adobe Fireworks
      Figure 11: Yellow gradient
  16. Final Result.

  17. Flowers using Adobe Fireworks
    Figure 12: Final Result

    Copied From

1 comment:

  1. Is there any place where this tutorial still actually properly exists? I made some of these flowers long ago and come back to the actual site, (I had bookmarked) and it basically isn't the same site anymore or something and as such all the images here (many of which are required to be able to do this!) are broken :(

    ReplyDelete

Comment