Fireworks


Black on Black reflection - Fireworks CS4

Reflections tutorial provided here thanks to: sjdvda
read first!

Allright, heres a little trick on how to make black-on-black reflections work in Fireworks CS4

Group your objects, copy-paste them, flip them vertically and position them where you want them to be.
Also Arrange the object "To back"
Complete the Commands - Creative - Auto Vector mask ( as described: Commands > Creative > Fade Image ) command and adjust the reflection until youre happy with it.

Now select Photoshop Live effects.
The effect you're looking for is "Outer Glow"

Set the color to White ( #FFFFFF )
Oppacity to 20 - 40% ( I set it at 25 - 30% )
Technique to softer
Size to 0 ( allthough we're using "outer glow" we dont want it to be visible outside the object )
Spread is also 0
Range to 100 ( this will make the glow soft )
Jitter to 0

Heres an example of what it looks like

With the effect: ( set to 50% so the change becomes noticable right away )

Without the effect:

Its a subtle difference which will make a huge change when put on the fast-dial page

Creating iPhone App Style Logos - Fireworks

Here’s how to make your very own iPhone App style logo::

This tutorial is primarily for canvases 300x225.
Dimensions for 400x300 canvases are in italics

Open Fireworks, then open a new document with the following properties:

(Or 400x300px)

Draw a standard rounded rectangle, with the following properties:



(W:161 H:16 X:118 Y:55)

Select Gradient > Linear.

And select the following settings for the gradient:


I've used blue as an example, but you can use any colour, but keep it the same along the gradient.
(Same colour throughout / Top opacity 100% Bottom 80%)


Here's how to make the gloss:

Duplicate the layer, by selecting the rectangle, then Ctrl+C then Ctrl+V

Now an ellipse with the following properties (Don't worry about colour at the moment):


(W:235 H:120 X:80 Y:9)

Select both the duplicated rectangle and the ellipse:

Now select Modify > Combine Paths > Intersect

You should end up with something looking like this:

Give the gloss path the following properties – Fill > Solid > White and Opacity 30%

You should now have something that looks like this:


Next, paste the transparent logo you are wanting to make onto the canvas:

Select both the rounded rectangle and your icon for the logo, then hit Ctrl+Alt+2 then Ctrl+Alt+5 to centre it. You should get this:

Then simply add reflection and you’re done!


IPhone style logo with a bitmap fill (from template) - Fireworks

Here is how to make iPhone app style logos from the template using a bitmap as the logo "fill".

Example logo:


First thing, save macleod.mac's template to your hard drive and open it in Fireworks

Right-click onto the template and choose "Ungroup".

This will produce two new objects in the "Layers" pane


- a rounded rectangle (this is the overall shape of the logo)
- a path (this is the "gloss" covering the upper 1/3rd of the logo)

Select the rounded rectangle and Cut or Copy it (Ctrl+C or Ctrl+X on the keyboard or Edit -> Copy / Edit -> Cut)
Import a bitmap onto the Canvas (or drag and drop one if it's easier for you), select it, go to the edit menu and select "Paste as mask"

The result should look like this:

To achieve 100% opacity on the top and 80% opacity on the bottom do the following:
Use the pointer tool and choose the mask in the "Layers" pane.


The green rectangle around the mask should appear if you made the right selection

In the Properties pane switch from "Path Outline" to "Grayscale Appearance".
This should create a "Vector Mask" like the one used when making reflections.

Click on the Gradient Fill, set both colors to White (#FFFFFF) but set the top right slider's opacity to 80%

Now just add the image you want to use in the logo, make sure you put the "gloss" path on top and there you have it:
a iPhone style logo based on macleod.mac's template with a bitmap as a background.


One tip:
There is a chain linking the mask and the bitmap together. Clicking on the chain will make it disappear:


When the chain is not active you can freely move the bitmap or mask around (a blue rectangle around the bitmap should indicate that the bitmap is selected, a green rectangle around the mask should indicate that the mask is selected), in case you want to make adjustments (choose another spot on the bitmap, resize it, etc.)


Reflections Tutorial - Fireworks

Here's my first tutorial on UserLogos: Adding reflections in Adobe Fireworks.

Note: All RED items on the screenshots are not part of the actual picture, they indicate the steps to follow

(all images can be clicked to show larger versions)

This is the image I'll use for the tutorial, an non-centered sample logo with a transparent background (canvas size (400x300):
Photobucket

Steps to take:

1. Select the logo using the Pointer Tool(Keyboard Shortcut:V) by clicking on it:
Photobucket

2. With the image still selected go to the "Optimize and Align" section in the Fireworks window(By default it's on the top right). Select "To Canvas"(1), "Align Horizontal Center"(2) then "Align Vertical Center"(3):
Photobucket

3. The image should look like this:
Photobucket

4. Move the image about 10-15 pixels upwards using the "up" arrow key on your keyboard: (You should move it 7-9 pixels if you're using a 300x225 canvas)
Photobucket

5. Copy the image and paste it. You can either do this by selecting edit>copy and edit>paste or by pressing (Ctrl+C) then (Ctrl+V) on your keyboard. After doing this, lock the bottom(original) layer:
Photobucket

6. Right click the image and select Transfom>Flip Vertical:
Photobucket

7. The image should now look like this:
Photobucket

8. Move the flipped image to the bottom of the original layer using the down arrow key on your keyboard:
Photobucket

9. With the image selected, go to Commands>Creative>Fade Image:
Photobucket

10. Select this type of fade and click "OK":
Photobucket

11. You now have a logo with reflection, you can adjust the slider to experiment with different amounts of reflection:
Photobucket

(At this point, some people add a Gaussian blur to the reflection but I don't usually)

12. The finished image should look like this:
Photobucket

The Transparent PNG Version:

I've taken a lot of time and effort to make this tutorial so that everyone can add reflections to a logo. The best way to thank me for writing this is to make beautiful logos and post them on UserLogos! =]

sjdvda
Follow me on Twitter!
Facebook Addict

Apple Fanboy
Google Fan
WordPress User

Web 2.0 style fills in Fireworks CS4

First of all I have to say whay I love working with fireworks.
The main reason is because it is able to work with vector graphics (or paths as they're called in Fireworks)
Here I will explain how to create web 2.0 style fills manually (you can download style libraries from various sites and I have used them in the past, but they are uneditable) and fairly easy.

Let us start. First of all you have to trace out your logo from a bitmap or write down some text. right click on it and select "Convert to paths"

Here is my starting image

Of course each one of the letters is essentially a path

Next up select each path individually and in the live effects section select and add a "Photoshop Live Effect".
Select stroke, set the color to the fill color of each path and the following settings:

This adds an outline to the objects.

Then select all paths, duplicate them, remove the photoshop live effect from the newly created ones and draw a rechtangle in front of them.

You can use other shapes as well.

With all paths and the rechtangle selected, open up the path panel and select "punch paths"

Select each of the newly created objects individually and create a gradient fill. The top color being white, and the bottom being the fill color of the original path.
You should get this:

Next select each of the original paths, set the fill to gradient.
First match the two colors

Then open up the system color picker on the first (upper) color (outlined in red)

In the system color picker use the slider to select a lighter shade of the same color

The result should look like this:

You can try out different shades until you are happy with the result.

Now select the top objects, set their oppacity to around 40-50% (or play around until you are happy with the result)

Next up select ALL the objects on the canvas, duplicate them, group them, right click and select "Flatten selection" (this is a good practice when using Photoshop Live Effects, of any of the Live effects because when flipping Fireworks tends to keep effects settings as they are so shadows, glows, etc may not be flipped), flip the image and proceed to creating a reflection.

I also like to set the oppacity of the image to 80-90% before adding "Auto Vector Mask"

One trick for easy export to transparent PNG:
In the optimize panel set the image type to "PNG32", set the canvas color to transparent and press "CTRL+SHIFT+R" to bring up the "export" dialog.

And here is the finished product:

Have fun!