Fireworks Flower Power

Fireworks Flower Power

Three free vector flower design samples created in Adobe Fireworks.

Once downloaded unzip and open the .png file in Adobe Fireworks. Each ‘flower’ (group) graphic is isolated onto its own Layer for easy selection. Use as you please.

[divider]

How was it Made?

I will not go into every fine detail but the following captures should provide some assistance.

Create two shapes using the Star Auto-Shape Tool from the main toolbar. As captured the first one has a Solid Fill and a Stroke; the second with no-fill and a Stroke. To match the Star Auto-Shape properties, select it then go to the Window > Auto Shape Properties menu command and configure the shape propeties. Repeat for the second Star Auto-Shape.

Once the two auto-shapes are configured Align them one above the other, with the no-fill/stroke version as the top-most Layer.

Select both Shapes with the Pointer Tool, then go to the Modify > Combine Paths > Join menu command. The two auto-shapes will merge to form a compound shape.

All that remains is to clone (Edit > Clone) the original, so now there are two compound shapes, and scale it inward as captured below, middle. Clone the second compound shape and scale inward as captured right.

A total of three compound shapes: the original Normal Blend Mode with an Inner Glow filter effect; Clone 1 (of original) is set to Normal Blend Mode and a Zoom Blur; Clone 2 (of clone 1) is set to Erase with a Zoom Blur.

Have fun!

Vector Flower

Three variations of a vector flower created in Adobe Fireworks.

Fireworks Vector Price Tag Graphics

Fireworks Vector Price Tag Graphics

Eight free ‘price tag’ vector graphics, including some additional base element shapes to work with for user inspired additions.

Download [download id=”15″].

Once downloaded unzip and open the .png file in Adobe Fireworks. Each ‘price tag’ graphic is isolated onto its own Layer for easy selection. Use as you please.

Also included within this page is a basic walkthrough of the element shapes used – it is shocking simple!

Download at the bottom of this page.

[divider]

How was it Made?

As captured below the base elements comprise nothing more than a ‘Shape’ Layer and/or a Stroked path.

For the shape I used the Rounded Rectangle Tool and configured the individual node handlers for a varying corner radius options.

The simulated rope on the left, the Pen Tool was used to create two open paths (No Fill) with a simple stroke.

The simulated rope on the right I used the Wave auto shape located in the Window > Auto Shapes Panel. In this case I did not need to draw anything except configure a few nodes.

Once the base elements are created (shape and rope) I moved on to creating a ‘knockout’/hole to wrap the rope around. To create the hole I used the new CS5 Compound Shape options. But because the base is an auto shape, it needs to be converted to path outlines in order to perform the path compound.

Select the auto shape, Right/Control Click and from the context menu options choose Ungroup. You will loose the dynamic auto shape capability but at least you can now apply the compound operations.

[divider_top]

Now to complete the knockout! With the base shape selected; activate the Ellipse Tool from the Toolbar; then select the Subtract/Punch from shape compound option in the Property Inspector (PI). Now draw an ellipse directly over the base shape to ‘puch’ a hole right through it.

All that remains is to position the rope graphic in the area of the hole. If the rope element does not line up resort to ‘masking’ to hide areas that should not be visible in the foreground.

For the varying color and textures resort to any Fill or Stroke options from the Property Inspector Panel.

Shockingly simple – Have fun!

Pricetag UI Kit

A collection of vector price tag UI elements created in Adobe Fireworks.

Fireworks Auto-Shape Tip: Multi-tiered Filters

Fireworks Auto-Shape Tip: Multi-tiered Filters

Here is a workflow tip when working with Auto-Shapes and applying multi-tiered filtering.

As captured below you can locate the 13 native Auto-Shape Tools directly from the Toolbar. When drawn to Canvas, the Star Auto-Shape  for example, you get special object oriented (yellow) node handlers (encirceled in red) that provide user to object dynamic alterations. Click and drag any one of them to tweak.

You also get the traditional Property Inspector object properties of Fill, Stroke and Filter.

[message type=”info”]Additional Auto-Shapes can be found in the Window > Auto Shapes Panel.[/message]

Ok, now here’s the rub – select the the Auto-Shape object with the Pointer Tool and add your choice of Fill, Stroke and Filter.

For the sake of brevity I only applied an Inner Glow filter.

Now toggle to the Subselection Tool on the Toolbar and select the same object.

Notice what happens!

  • The Subselection Tool selects the objects’ Path outline and shows the individual path nodes that define it, even though this is still an Auto-Shape.
  • The Fill and Stroke is preserved but now we have another opportunity to apply additonal filters.

In summary, toggle the Pointer Tool and Subselection Tool on Auto-Shapes will allow room for multi-tiered filtering.

[message type=”warning”]
Words of Caution:

  • It’s not easy determining which Auto-Shape has this multi-tiered filtering applied, if your document uses a lot of them.
  • Ungrouping an Auto-Shape, only the Subselect filter remains.

[/message]

Have Fun.

Adobe Fireworks: Video Toolkit Themes

Adobe Fireworks: Video Toolkit Themes

A video toolkit collection of commonly used icons; 9 sample themed video players; 6 thumbnail previews;  9 themed play buttons (rectanglular or circle); and 11 themed playback control bars.

The download (at the bottom of this page) consists of two pages:

  • Page 1 has the 9 themed players.
  • Page 2 has the associated player elements.

Unzip, open the .png file and use a player theme to compliment your prototype or adjust any of the elements to create your custom one.

All players and elements consist of vector and text objects. Not a single bitmap is used. The majority of the elements employ ‘groups’ for easy Layer management so be sure to use the Subselect Tool to select an individual element from a group.

Have fun.

Video Player UI Toolkit

A collection of Video Player UI Toolkit items created in Adobe Fireworks.

 

Facebook Panel/ UI Iconset

Facebook Panel/ UI Iconset

Fireworks CS5 to Flash Catalyst CS5 Facebook Panel/Iconset

Free Fireworks CS5 Facebook sample datalist & iconset for use in prototypes, but optimized for FXG export to Flash Catalyst CS5.

The following download (bottom of this page) contains: Sample Facebook interactive design and 24 bitmap/vector icon set.

Navigate the Pages panel in Fireworks to toggle the samples.

What is it?

Three page sample containing example Data List component designs for general use in Fireworks prototypes, but they are optimized for use in the FXG export process for Flash Catalyst CS5 projects.

Page 1 contains a sample data list panel design and assets to populate the data list.

Page 2/3 contains 24 bitmap/vector icons to populate the data list.

Each Layer (object) is properly named so that it will be easy to target when converting it to respective wireframe component in Flash Catalyst CS5.

How I assembled the Interactive? Simplified!

  • Fireworks Data List design exported to Fxg (File > Export > Fxg and Images);
  • Icon Assets is exported as image assets (File > Export > Layers to Files);
  • Fxg is opened in Flash Catalyst CS5 and the design elements is converted to Data List component;
  • Import assets to populate the data list;
  • Additional ‘States’ and interaction is applied to Logout graphic and the Profile data list item;
Facebook UI Toolkit

A 3 page data list component UI Toolkit created in Adobe Fireworks.

Fireworks CS5 to Flash Catalyst CS5 Data List Toolkit

Fireworks CS5 to Flash Catalyst CS5 Data List Toolkit

Free Fireworks CS5 Data List Toolkit for use in prototypes, but optimized for FXG export to Flash Catalyst CS5.

The following download (bottom of this page) contains: 12 sample Data List designs.

Navigate the Pages panel in Fireworks to toggle the samples.

What is it?

Three page sample containing example Data List component designs for general use in Fireworks prototypes, but they are optimized for use in the FXG export process for Flash Catalyst projects.

Page 1 contains vertical, horizontal and tiled data lists with the necessary Flash Catalyst CS5 corresponding scrollbar and repeater item.

Page 2 contains a sample Carousal Viewer and Film Strip design with the necessary core elements. Scroll Bars, Repeater Items and optional background items.

Page 3 contains samples of Combo Box designs that utilize the data list, scroll bars, repeated items all wrapped up into a ‘Custom Component’ design.

Each Layer (object) is properly named so that it will be easy to target when converting it to respective wireframe component in Flash Catalyst CS5.

Fireworks to Flash Catalyst Data List Toolkit

Fireworks CS5 to Flash Catalyst CS5 Data List UI Toolkit