I have noticed a considerable demand for a tutorial like this, so I’ve decided to give it a try. It’s not easy, and the result is not perfect, but its a good attempt nonetheless.

Note: The final image is the outcome of much trial and error. But you can pick up the techniques I describe, and analyze the source file for yourself when my explanations get too complicated, which they will.

1. First, create five layers (Using the folder button in the Layers window) like so:

Text (topmost), Canvas 2, Effects 2, Canvas 1, Effects1 (bottommost)

2. Lets color the canvas first. On Canvas 1, draw the following, from top to bottom:

Rectangle: Opacity 60%, Radial Gradient FFCC33, bottom left 70%, and the rest 0%
Rectangle: Vertical Gradient 3399CC, top 0%, bottom 100%
Rectangle: Overlay, Vertical Gradient, top 33CC33, bottom 3399CC
Large circle above: 77% Overlay, Radial Gradient FFFFFF, center 100%, edges 0%

3. As for Canvas 2, draw the following:

Rectangle: 40% Overlay, Radial Gradient (positioned above center) FFFFFF, center 100%, edges 0%
Rectangle: 20% Overlay, Radial Gradient 003300, center 0%, edges 100%
Rectangle: 100% Overlay, Radial Gradient 003300, center 0%, edges 100%

Now your canvas is nicely colored. Basically, its dark on the edges and its a mesh of blue and green.

4. The image has four different kinds of objects. Lets start with Element 1. Draw a light yellow trapezoid with a Vertical Gradient with 16% opacity and 1 Feather, left 100% and right 0%. This will make a fading line, put this in Effects 2.

5. Draw two more similar trapezoids, with variable sides and opacity and color. These two here are placed in Effects 1.

6. Now for Element 2. Draw a long circle segment with 40% Overlay and color it green. Make more of this with varied color, thickness, angle, and opacity. You have to be creative in this one. Place some in Effects 1 and the rest in Effects 2.

Basically you’re making the colors fluctuate from left to right.

7. Now for Element 3. Draw thin tilted light blue triangles with 86% Opacity. Make the Vertical Gradient fade (100% to 0%) angled in such a way that one edge is more faded than the other.

The tricky part is trying to angle the gradient just right.

8. Now for Element 4. Draw a long arc with 50% opacity and 2 Tip Size of 50% Edge, and use Radial Blur on it. I find this to be a lame replacement for those lines you see in the real wallpaper, but its better than nothing.

Make two more of these. Now you have appropriately placed set of four different types of shapes with the right effects. Its all up to your creativity.

9. Now type your text in white, with Inner Glow (Thickness 2, Opacity 12, Softness 1), and Glow (Thickness 0, Opacity 39, Softness 9).

There, this is the best I can do. At least it looks okay when you see it from far.

Draw a realistic enough picture of a planet in space completely from scratch with Fireworks. You don’t even need any images, its all there in your textures. This tutorial is inspired by this one.

1. First, draw a rectangle the size of the canvas. Now use filters in this order; add noise with amount 27, add Brightness -46 and Contrast 98, then add Gaussian Blur 0.8. Now you have stars. This shall be the lowest layer, nothing goes beneath this.

2. Draw a circle and fill it with the Paint Dark pattern. Change Brightness to -56. Add a white Inner Shadow with distance of 9, opacity 65%, softness 10 and angle 45. Set its texture to Metal 31%. This shall be the Planet layer.

3. Draw two circles the exact size and shape of the Planet, place them directly above it. Fill the first one with radial gradient with white edges opacity 22 and black center opacity 0. In other words, its an alternative to a white Inner Shadow. As for the second circle above that one, resize that to 95% of its original size, and add a Gaussian Blur 4.8 and 75% opacity.

4. Draw two black circles on top of the previous two circles, the size of the Planet. Resize the first one to 110% original size and set its edge to feather 72 and opacity 78. The second one, which is above the first, set to feather 49 and opacity 74. Position them slightly over to the top right.

5. Draw a white circle on top of all layers, the size of the Planet. Resize that to 55% and position it on the bottom left. Set its edge to Feather 55 and the shape to Overlay.

6. Draw another white circle the size of the Planet. This time, delete the top and right vector points, leaving an oval on the bottom left. Set its edge to Feather 24 and opacity to 38. Arrange it underneath the Planet.

7. Now draw two smaller circles 60% size of the Planet and place them beneath everything. Set both to the Flames pattern, edge feather 97, and opacity 60%. Color fill the bottom one to red with overlay. Then change the saturation of the top one to -100 and Brightness -15 and Contrast 64. Now you have a little bit of space texture.

8. Draw a white oval and set opacity to 70 and Overlay. Place it beneath all the layers, making the stars on the left of the Planet brighter.

9. Draw one last circle and set its pattern to Smudge Red, edge Feather 100, opacity 10, Saturation -100, Brightness -15, Contrast 64, and put it on top of all layers, towards the bottom left. This makes more space texture.

There you have it, a convincing planet. Do some tweaking and you can make a new solar system!

A tutorial which will give you step-by-step instructions to create a peeling effect. Great for placing in a corner of a website to reveal news or offers.

1. Create a rounded rectangle having the same color as the background. Apply to it an outline of any other color. This will be our sticker.

2. Duplicate the sticker and change the color of the copy to anything you want. This will be the surface underneath the stiker, in other words, place its layer below the sticker’s layer.

3. Duplicate the sticker one more time. We will change its color later on. This will be the back of the sticker. Place its layer between the Sticker and Surface layer.
NOTE: No change of position should be done during this tutorial.

4. Now that we have what we need, it’s time to modify the paths. Select the sticker and ungroup it to make it a changable path, taking away it’s custom shape properties (yellow adjustbale dots). Good! Now using the Subselection tool (White arrow) sub-select the sticker so it has a blue outline and white dots at intersections. With the sticker sub-selected, switch to the pen tool. Add two extra points as shown bellow (.a). Change the position of the dots and anchors to create something similar to the illustration below.

5. Now let’s modify the back of the sticker. For an easier approach, make the Sticker layer invisible by clicking on the eye next to it. As done in the previous step, ungroup the rectangle representing the back of the sticker and select it using the Subselection tool. Add two more points at the same location as those added to the Sticker (.a). Delete the the two points that create the rounded corner and insert one instead as shown below.

6. We are now done with modifying paths. Let’s add color. Select the sticker and change it’s fill type from Solid to Gradient. One of the sides of the gradient should be the color of the background, while the other should be a darker shade to simulate shadow. This is shown below:

7. Change the color of the back of the sticker to white. Add a Inner Shadow effect with the following values: distance-4, opacity-30%, softness-30, angle-315 degrees.

8. Select the rectangle representing the Surface and add an Inner Shadow with the following values: distance-1, opacity-30%, softness-2, angle-315 degrees.

9. Change colors and add text however your heart wants.

Our first guest post is written by Lucian. Enjoy!

This tutorial will show how a realistic 3d shape, such as text, could be created in Fireworks 8, a 2d software.

1. Create a new file and have a rectangle with a gradient fill be the background.

2. Add some text. Be sure the font is thick/bold so the 3d effect will look better.

3. Give the text a perspective using the Distort tool or other method of choice. In this tutorial I will give the text an isometric perspective by first rotating it 45 degrees either way (holding Shift while rotating it), and subtracting 50% of its new height.

4. Now that we gave it a perspective, you can either choose to add an outline or not. I added a 2px white outline.

5. For better results and individual effects, we will convert the text to paths (Right-click > Convert To Paths) and ungroup the new group created.

6. Now we are ready to add some extrusion to the text. With all paths selected (step 5), add a Solid Shadow effect found under Shadow and Glow option in the Live Filters menu in the Propeties panel (bottom of window). The effect should have a value of 270 degrees angle (depending on the perspective), and the distance is up to you. Make sure you check the Solid Color box and change the color to a slightly darker gray than the white of our outlines, such as #EFEFEF.

NOTE: Rearrange the order of the letters after adding the Solid Shadow effect (in Layers panel or Ctrl+Up/Down) such as the closest letter to you is on the top layer and the farthest is on the bottom one.

7. This step is optional but it gives a touch of lightning to the scene and reinforces the 3d perspective. Having all letters selected, add a Inner Shadow effect to all of them (found under Shadow and Glow menu). Give this effect the following values: distance-10, opacity – 20%, softness-20, and angle-90 degrees (adjustments may be necesary depending on size, perspective, and Solid Shadow distance of the text).

The text should look like this:

Now that we have the 3d text created, we can group its letters for easier handling.

8. It is time to add a reflection into the floor. Duplicate the text, send it below the actual extruded text (in Layers panel or Ctrl+Up/Down) and move it down wherever you want the reflection. Reflecting the bottom face of the original 3d text, I recommend making the reflection darker by changing its brightness using the Brightness/Contrast filter found under Adjust Color in the Live Filters menu ( I reduced the brightness to -50 ). Take the opacity of the reflection down to about 10%.

Here is the outcome:

9. The final touch towards the 3d effect is adding a shadow casted by the extruded text onto the floor. Once again we will duplicate the text, ungroup the copy and remove both the Solid Shadow and Inner Shadow effects from the letters. Now we can regroup it and using the Color Fill option found under the Adjust Color menu, we give the group a black fill.

10. Place the shadow’s layer between the extruded text layer the and reflection layer. Its position on the canvas should be half way between the reflection and the extruded text (where all shadows should be) as shown in the below image . Now give the shadow a Gaussian Blur with a radius of 5, and reduce the opacity to 50%.

There you have it.

For more examples of 3d simulation in Fireworks, please visit http://dFever.deviantart.com .

Lucian Dragomir

This tutorial is inspired by this one, which was inspired by what the author found here. Basically you can take pretty much any good logo and add a nice glowy lens flare effect on it. Here the WordPress logo will be used. I’m a WordPress fan anyway. I’m going to show you how to do just that with Fireworks.

1. Grab the logo and put it on a black canvas.

2. Make a rectangle and set its fill to radial gradient with blue (#0066CC) on both ends. Set its outer edge to 0% opacity. Put it underneath the logo and you will get a blue glow.

3. Now draw a white shape with the exact size and shape to the logo, this one is a perfect circle. Using the subselection tool, select the top vector point and delete it.

Set the edge to Feather, value 70. Put it between the logo and the glow. Now you have a more interesting glow.

4. Now draw another exact shape on top of the logo and set its fill to radial gradient, white on both ends and outer edge 0 opacity. You will get a white glow in the center, then move the gradient position to the bottom left. This is where we want the ‘light’ to leak out, but you can position it anywhere you want.

5. This step is a little long. Draw a line and shape it with the free transform tool into a semicircular line outlining the bottom side of the logo. Configure it to the following:

Color: #CCCCCC
Edge: 20
Texture: Chiffon 30%
Brush: Oil>>Splatter
Edit Stroke>>Advanced: Spacing: 60%, Size: 48

6. Draw a small white circle with Feather edge 100%. Move it to the ‘leak’ point. In this case its the bottom left.

7. Draw a bigger circle with invisible fill, and white outline. Set the outline to size 15 and 100% edge, and its opacity to 5%. Position that on the ‘leak’ point.

And there you have it. A decent lens flare effect.

Tweak all you want and you can do wonders. The power lies in your creativity!

Welcome to the very first tutorial of firetuts.com. I will show you how you can easily make one of those sleek abstract wallpapers you’ve probably seen before, with Adobe (or Macromedia) Fireworks. I shall give credit to Collis for the original tutorial for Photoshop. This tutorial, however, will also teach you a trick to color it in a different way.

1. Create a canvas in any screen size you want, (800×600, 1024×768, etc.) and set the canvas color to #CCCCCC. I use 1200×900 because I’m a widescreen fan.

2. Next, draw an oval and shape it like so; I assume you know would know how to do that. Set the fill to linear gradient and adjust the colors to #CCCCCC on one side and #FFFFFF on the other. Adjust the gradient positioning like so.

3. On top of that, create another oval and shape it like so. Set the linear gradient to #CCCCCC and #999999. Set its opacity to 50%.

4. And on top of that, create an oval but this time with an inverse curve like so. Set the fill to radial gradient with #FFFFFF on both ends, and adjust the outer edge to an opacity of 0%. Position the gradient at the top of the canvas like so. This will make the top side of the oval glow white.

5. Draw one more oval with linear gradient of #CCCCCC and #FFFFFF, like so.

Now select all the ovals and set it their Feather value to 2. This will make its edges blend better.

6. Now, draw a rectangle the size of the canvas, set it to ellipse gradient with white on both ends. Change the opacity of the edges to 0%. This will make a nice white glow in the center of the image like so. Set its opacity to 50%

7. Also, set that rectangle to overlay, something that I found to be really sweet feature.

8. Create another canvas-sized rectangle on top of that, and set it to radial gradient with #000000 on both ends and opacity of edges to 0%. Set that to overlay. This will complement the white glow in the center better, by making the edges darker.

9. Now here’s the coloring trick. Draw another rectangle the size of the canvas and fill it with any solid color you want, I shall use green. Set that to overlay. With that you will get a nice array of green shades future-style.

BONUS TIP

To make the colors even MORE interesting, first draw another canvas-size rectangle on top of everything and set a black-and-white vertical gradient like so.

Set that to overlay and watch the magic happen.

It’s little brighter but you can adjust its opacity in any way you want.

The basic idea of this this type of ‘digital abstract art’ is to play around with vectors, gradients, and opacities. And my coloring techniques are basically gradient overlays. You can adjust anything to your liking and you will most likely make a better wallpaper than this one here.

If you have anything to add, you are most welcome to leave a comment. In fact I even accept criticisms.

See also: Create Vista-like wallpapers with Fireworks