09.07.2010
<  Main  |  About+Contact  |  Donate  |  Linkback  |  Privacy  >
Opens in a new Window
Styles:
  Digital   Mechanical   Sports   Science   Corporate   Misc.  
  Professional   (External Link)

GUIs With:
  Sliced HTML   Generator
Sections:
  Tools   CSS Docs   JavaScript   CSS Ref.   Tutorials   The Guide
Help:
  Examples   FAQ   Tutorials

DeviantArt
Shaping an Interface
The vector editing in Fireworks

When describing the creation of an interface, the process is usually devided into 2 steps: shaping, and materializing. Taking a made-in-advance shape and applying effects to it is widely covered in numerous tutorials. In this tutorial, we'll take a look at the creation process of non-basic shapes, seen to the left.

Note: If you're new to Fireworks, please read the introductory to interface creation in Fireworks shown here.
Step 1
Create a new document, and set the grid to 10 by 10 pixels. For future reference, in order to show/hide the grid, click Ctrl+Alt+G, and in order to snap to grid click Crtl+Alt+Shift+G.

Using the Shape tool, create 3 circles as shown to the left. Here are a couple of tips when using the circle tool:

Clicking Shift while creating the circle confines the aspect ratio to 1:1, meaning the circle won't become an ellipse.

Clicking the Alt while creating the circle will make you drag its radius, instead of its height and width.

You may use the Shift and Alt in simultaneously.
Step 2
Select the small circle, along with the lower-right circle.
Step 3
Unite the 2 cirlces by clicking Modify > Combine > Union. The combine functions are the main tools used to create complex shapes. You'll use them extensively when editing vectors.
Step 4
Select the newly created shape along with the remaining circle, and click Modify > Combine > Punch. You should be left with those 2 arcs shown to the left. If you're not, make sure that the circle is at the 'bottom' of the object arrangement. Do that by clicking it, and selecting Send to Back from the Modify ( Window > Toolbar > Modify ) toolbar. The Punch function will already take the lower object, and subtract the upper object from it.
Step 5
Create 3 new circles as shown to the left. Snapping to grid will make it easy to align them with the arcs.
Step 6
Use the Punch function to cut the medium-sized circle from the large one. Again, make sure that the 'punching' object is at the front ( Bring to Front from the Modify toolbar).
Step 7
Create the shape shown to the left using the Pen tool. The tips should each be 30 pixels (3 grid lines) from the diameter of the circle. The Pen tool will only "close" a shape if the ending point touches the starting point.
Step 8
Select the new shape, copy it, and then paste it twice (so there are 3 of the same shape). Click one of them, and rotate it 45 degrees using the Numeric Transform tool (Modify > Transform > Numeric Transform). The Numeric Transform tool can either Scale, Resize, or Rotate, according to specific numeric values. It's very useful for when you want to be precise.
Step 9
Create a circle and a square as shown to the left.
Step 10
Unite the 2 new shapes ( Modify > Combine > Union ).
Step 11
Select the 3 'spikes', and unite them as well.
Step 12
While the 3 spikes (now 1 object) are selected, click Send to Back from the Modify toolbar.
Step 13
Select the spikes and the new shape, and click Modify > Combine > Punch. You should be left with 3 triangles as shown to the left.
Step 14
Create 2 new circles.
Step 15
Punch one into the other, and add one last circle in the middle of the small upper-left circle.
Step (!)
Using the methods learned in the Basic Interface tutorial, see if you can add the effects that would create the object to the left.
Copyright © 1999-2006 GUIStuff. All rights reserved.