|
|
 |
|
 |
The Basic Interface
The fundamental methods of interface creation in Fireworks
|
 |
While Adobe Photoshop has
an advantage of being the most diverse raster editor, it lacks the
flexibility of a real vector base. Interface creation in Photoshop is
usually done either by fill manipulations, or by importing vector files
created in Illustrator or Freehand.
Fireworks, on the other hand, is based on vector rendering, and so in many
cases much more suitable for creating GUIs.
Remember, however, that Fireworks and Photoshop are not mutually
exclusive, and knowing how to use them both, and take advantage of each
program's strengths, can achieve wonderful results.
This tutorial will cover the basic methods of interface creation within
Fireworks, by creating the interface you see to the left. It assumes that
you have a basic understanding of 2D editing in one program or another
(Photoshop, PaintShopPro, etc.).
This tutorial will also act as a basis for other Fireworks tutorials, so
it's a good idea to browse through it before moving on to other Fireworks
documents on GUIStuff, even if you already have some experience with
Fireworks.
Note: This article is delivered within 1 page so that you have the
ability to check back previous steps. It may take longer to load, but it's
better than clicking back-and-forth through several pages in order to
reference previous actions.
|
|
Step 1
First, we'll prepare the working area. Create a new
document, set the width and height to 500 by 400, and the background to white.
Now select View > Grid > Edit Grid... and set the width and height
of the grid to 10 pixels. Select a light grey color, and then activate the grid and the
snap.
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.
|
|
Step 2
From the Tools bar, click and hold the Shape tool, and select the Rounded Rectangle option.
|
|
Step 3
Draw the rectangle on an area of about 100 by 140 pixels. You can
change that at a later point, which is one of the advantages of working with vectors.
|
|
Step 4
While the rectangle is selected, select the Object tag ( Window
> Object ), and set the Roundness to 25.
|
|
Step 5
You can choose different roundness setting. A value of 25
should look like this on a 100 by 140 area.
Next, while the rectangle is still selected, choose Ungroup from the Modify
toolbar. This isn't mandatory, but it will help smooth graphic effects later.
|
|
|
Step 6
Select the Fill tag (again, while the rectangle is
still selected), and click the color selector.
|
|
Step 7
Double click the hex code area, and enter #688093.
|
|
|
Step 8
Now we need to make an exact copy of the rectangle. Select
it, and then select Edit > Copy (or click Ctrl+C), and then
select Edit > Paste (or click Crtl+V).
|
|
Step 9
From the Layers ( Window > Layers ) tag,
select the bottom rectangle. It will be classified as a Path.
|
|
Step 10
Select the Stroke tag ( Window > Stroke ).
Choose the Basic stroke category, and then the Soft Rounded option.
Choose a thickness of 3, and then move the 'edge softness' bar close to the bottom
(so that the stroke is more solid).
|
|
Step 11
Your current state should look like this. The reason for
not adding a stroke to the upper rectangle is that effects in Fireworks cover
both the stroke and the fill, so to separate the stroke from the fill, we create
2 separate elements.
|
|
|
Step 12
Now we'll start applying the bevel effects. Fireworks does
have built-in bevel effects, however I find that you have more control over the
effect if you break it up. Bevel effects can be recreated using inner shadows
and inner glows. For complex bevel effects, you can also use gradient fills and
translucent areas, but for this tutorials, we'll stick to the basics.
Select the upper rectangle.
|
|
Step 13
First, we'll apply the highlight effect.
While the upper rectangle is still selected, select the Effect tag ( Window
> Effect ). From the effects menu, select Shadow and Glow > Inner Shadow.
Enter the properties shown to the left. For the color, enter #A3BCD6. If
you're applying this effect on a different color, then choose a color that's
lighter than the fill color, and has a higher saturation value.
|
|
Step 14
For shading, we'll create another inner shadow effect.
Repeat the last step, and enter the properties to the left. The shadow's color
is set to black (#000000). Remember to set the shadow's angle to 135, so
it'll drop from the bottom-right.
|
|
Step 15
This step is optional for the bevel effect, but it will
give it a more believable edge. If you create a smaller bevel (by reducing the
height of the shadows), this step won't be needed.
From the effects menu, select Shadow and Glow > Inner Glow. This is
basically an inner shadow that effects all edges. Set the properties as shown to
the left. For the glow color, enter the fill color of the rectangle (in this
case - #688093).
|
|
Your current state should look like this.
|
|
Step 18
Now we'll add a shadow to the interface. From the Layers ( Window > Layers )
tag, select the bottom rectangle. From the effects menu, select Shadow and Glow >
Drop Shadow.
Set the properties as shown to the left, or choose your own shadow setting,
whatever looks better to you.
|
|
Step 19
To make the interface look more device-like, we'll carve an
area within it for the links. Click the Layers ( Window > Layers )
tag, and create a new layer. In order not to disturb the first layer, click the
Layers menu, and make sure that Single Layer Editing is checked. This
way, you'll only effect the layer that you're currently working on.
|
|
Step 20
Now, you'll have to repeat step 2 through 11 in order to
create a carving area. The only differences are that the area will be smaller
than the interface's outer border (keep it about 80-pixels wide), and the inner
fill should be darker (set it to #546776).
After doing this, your current state should look like this.
|
|
Step 21
In order for the carved area to look realistic, we'll add
an inner shadow -- this time the way it's supposed to be used.
Select the upper rectangle of the second layer. Apply an inner shadow effect as
shown in step 13, and set the properties as shown to the left.
|
|
The Interface should currently looks like this. By now,
you've noticed the importance of shadow effects, and seen that a shadow doesn't
always have to be used as a "shadow"... Let's see some other uses for
it while we add some simple gadgets to the interface.
|
|
Step 22
From the Tools bar, click and hold the Shape tool, and select the
Circle/Ellipse option. 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 23
Zoom in to 200% (when working with single pixels, sometimes
400% is better), and create a circle on the bottom of the interface. Set its
Fill color to the color of the inner area of the interface (#546776), and
its Stroke to Basic > Soft Rounded. Set the Stroke color to black, and its
thickness to 2.
|
|
Step 24
While the circle is still selected, click the Object
tag ( Window
> Object ), and set the stroke's position to on-path (the middle
button). Then, click the "Fill over Stroke" checkbox.
You may be wondering - "why did I set the Stroke thickness to 2, and
then fill over it, when I could've just set it to 1, and make the stroke
external instead of on-path?..."
The reason why this is done is somewhat of a nuance, but the main reason is a
mini-bug in Fireworks. When you set the stroke's position to external (so it
runs around the path), you may see that the background color "shines
through" between the fill and the stroke. This is a very slight effect, and
hard to see, but it's noticeable when the stroke runs around a curve. In a
nutshell, it happens because Fireworks treats the Stroke and the Fill as 2
different entities, and renders accordingly.
|
|
Step 25
While the circle is still selected, apply an inner shadow
effect to it (as shown in step 13). Experiment with the values until it seems
like the circle is carved into the interface.
Now, copy the circle (Edit > Copy, or click Ctrl+C), paste it
(Edit > Paste, or click Ctrl+V), and move it slightly to the
right. While moving an object, you can press Shift in order for it to
move in 90-degree angles.
|
|
Step 26
Now let's add one last element - a small light. Use the
Shape tool to create a small circle, with a slight black stroke, and a
neon-green fill (see steps 23 to 24).
|
|
|
Step 27
In order to make the light seem "sunk" into the
interface, apply 2 inner-shadow effects to it, as shown in steps 13 and 14,
however with opposite shadow angles (so that instead of a bevel, you get a
carve). Play with the shadow values until you get a reasonable sinking look -
not too much.
|
|
|
In this tutorial you've learned the basic methods for
creating simple interfaces. In the following tutorials we'll learn how to deal
with complex shapes, apply textures, and how to use Fireworks Styles
effectively.
|
|
|
