Doing it in Adobe Fireworks is very easy. Here’s how (I’m using Fireworks CS3 by the way):

1. First choose your font. A wide font or a bold one would be suitable. I’m going to use the ever-dependable “Impact”.

2. Type your text. Feel free to add an outline stroke if you want to.

3. Now go look for your image and place it on top of your text. I dimmed the image for you so you can see that it is covering my text.

4. Now cut your image. Edit > Cut or Ctrl-X.

5. Select your text. And go to Edit > Paste Inside or Ctrl-Shift-V.

6. You should see your image inside your text. It’s that easy!

Additional notes:

You can still adjust the position of the image by clicking the center and dragging it around.

If you wish to edit your text or change the image, you can detach it from the text by ungrouping it. Modify > Ungroup or Ctrl-Shift-G.

You can add more styles like a drop shadow for a much better effect. You can use the Paste Inside on vector shapes as well.

There you go. Easy way to put image inside a text using Fireworks. Check out my other Firew

Related posts:

1. Creating a Web 2.0 Shiny Text in Fireworks
2. Creating a Web 2.0 Glossy Text Effect in Fireworks
3. Creating the “reflection” effect in Fireworks

The problem with Fireworks is the built-in Arrow vector. It’s tricky to play around those different points to adjust an arrow’s properties to make it look like an arrow suitable for diagrams.

Good thing there’s also an easier way to create those simple arrow lines needed for your flowchart. Here’s a different method that you can try.

1. First let’s create a couple of boxes with some text. Fireworks has all sorts of boxes available (Rounded, Ellipse, Polygons).

Better group (Ctrl + G) a box and its text so you can move them around easily.

2. Create a line in-between your boxes using the Line Tool (N).

Hold shift so that your line will be straight. Also leave space for the arrowhead.

3. To create the arrowhead, select your line and go to Commands > Creative > Add Arrowhead.

4. Select the side you want the arrowhead to appear. In our case, it will only be at the end. There are 17 types of arrowhead available, I will be using #2 which is smaller. Click Ok when you’re satisfied with your arrowhead.

5. And there you go! Feel free to move the position of the arrow. If you want to color the arrow, you need to ungroup the arrow (Ctrl + Shift + G) before change its color fill.

It’s a crude way to do flowchart but if you’re stuck without Visio then this will do.

Holy crap! After doing this guide and capturing all these screenshots, I just found out that it’s easier to do a flowchart diagram in MS Powerpoint! Aarrrgghh! Why am I so ignorant with the most basic of things?

Hahaha. Oh well. Fireworks decided to put those arrowheads out there for a reason.

Related posts:

1. How to create the sticker peel effect in Fireworks
2. How to Create Sunbursts Using Fireworks
3. How to create speech bubbles with Fireworks

Here’s an easy way on how to create sunbursts on Fireworks. I will be using Fireworks CS3 here to take advantage of the Shapes feature.

Before learning this easy way, I used to do this with the Star vector and just adjust the points till I get my result. But that’s too complicated to explain so we won’t be doing that.

Ok enough babbling. Let’s do this.

1. First install Fireworks guru Aaron Beall’s Sunburst AutoShape. Click the link to download the .mxp file and open it.

2. Adobe Extension Manager will launch and catch the .mxp file you just downloaded and will install it for you.

3. Open Fireworks and create a new document. I’m going to try a 340 by 200 one.

4. Go to your Assets panel and into the Shapes tab. Select the Sunburst AutoShape that you just installed.

5. Drag the AutoShape to your canvas. Feel free to adjust the yellow points and the size of your sunburst. Go ahead, rescale, skew or distort it to get a better result.

That’s it! That’s how you create sunbursts in Fireworks.

Additional Styling

Here are a couple of things you can do to style your sunburst background.

1. Add a background with radial gradient. I will use the same color scheme of my sunburst as my radial gradient fill.

2. You can also apply the same radial gradient fill on your sunburst but this time, set the gradient halfway to the left.

3. (Optional) You can also set the opacity of the sunburst to 50 to make the effect more subtle.

Now let’s add our dancing silhouettes to make use of our new sunburst.

There you have it. Your sunburst-powered vector image created using Fireworks.

Thanks to Fireworks guru Aaron Beall for making this effect very easy.

Related posts:

1. How to create the sticker peel effect in Fireworks
2. How to create flowchart arrows in Fireworks
3. How to create speech bubbles with Fireworks

I’m going to show you how to create this simple yet cool effect using Fireworks. I will be using Adobe Fireworks CS3 but other versions will work. Here we go:

1. For my example, I’m going to use a rounded rectangle vector which is a special vector.

2. Since this one’s a special vector, we need to convert it to a simple one. Select your object and go to Modify > Combine Paths > Join (Ctrl+Shift+J).

For simple shapes such as rectangle, ellipse and polygon, you can skip this step.

3. Select your Knife tool (Y) and slice a piece of your shape from one corner. Any corner will do but I’m going to slice on the lower right.

4. Change the color of the cut part to see it properly. I’m going to change it to white.

5.  Now what you want to do is flip the cut portion and position it properly. This procedure varies with different shapes but for this rectangle, all I need to do is select the cut part and  flip it horizontally then vertically. Modify > Transform > Flip Horizontal then Flip Vertical.

That’s basically it. But it looks dull right? You can style it in many different ways but here’s one way.

Styling

6. Let’s add a drop shadow first. Add Filters > select Drop Shadow. Change the distance to 3 and the angle to 200. The angle will differ depending on what corner you’re peeling it from.

Adding this drop shadow will highlight the cut portion of your object.

7. Next thing you could do is add a linear gradient on the cut portion. You would want a white to gray gradient with the darkest color on the outer part of your cut portion.

8. Just like stickers, you may also want to put a white outline on your object. Select the blue area and convert it into a simple shape same as in Step 2(Ctrl-Shift-J).

9. Then add your outline. I’m going to put a white 4 pt stroke.

10. It is important that the stroke should be set inside the path.

11. You can also add a Drop Shadow on your object. It should have the same settings as that of your cut portion (Step 6).

12. Bring the blue area back behind the cut portion and you’re all set! Modify > Arrange > Send Backward (Ctrl+Down).

That’s it. The rest is up to you. I’m going to put some gradient and text to complete my sticker. Now go ahead and try it with other shapes!

Hope you enjoyed this simple tutorial. Let me know if something’s not clear. Click here for my other tutorials using Fireworks.

Related posts:

1. Creating the “reflection” effect in Fireworks
2. How to Create Sunbursts Using Fireworks
3. How to create speech bubbles with Fireworks

This works best on close up portraits especially if you want to make the skin look smooth.

I’m going to do this in Fireworks but you can also do this in Photoshop or any graphic editing software that supports layers. Just follow these few simple steps:

I’m going to use a photo of the lovely Paula Taylor who I want to meet someday.

1. First, create a copy of your photo on a new layer.

2. On the new layer, apply a Gaussian Blur filter with a value of 2.0.

3. Finally, toggle the layer’s opacity to about 60. You can play around with the value to suit your taste.

See the effect? That’s how easy it is to retouch a photo to soften it up. Now consider how much people are paying for wedding albums. Hehehe.

Related posts:

1. How to properly sharpen photos in Photoshop
2. How to fix grainy photos in Photoshop
3. Use Adobe Lightroom to jazz up your photos

Fireworks has what they call Auto Shapes (started with MX 2004) that features control points for you to tweak to change various parameters of the shape.

To better visualize what Auto Shapes is all about, read on this guide on how to create speech bubbles. I’m using Adobe Fireworks CS3 by the way.

1. First, let’s get our image in the canvas. I’m using a shot of Hulk by a friend of mine, Troy Samia.

2. Go to Window and make sure that Auto Shapes is visible.

3. Look for the Assets pane on your right, select Shapes and find the “Talking” shape. There’s also a “Thinking” shape if you want that instead.

4. Drag that “Talking” shape into your canvas.

5. You will see yellow points which you can drag to adjust the look of your shape. Play around with those points until you get the desired output. Go ahead and adjust the size as well by using the Scale Tool (Q).

6. When you’re satisfied, type in your text using your favorite font. I used a free font called Laffayette Comic Pro that I got from DaFont.

OPTIONAL: You will notice that your speech bubble has a drop shadow. To remove it, simply click your speech bubble and go to Modify > Ungroup (Ctrl-Shift-G). Then delete the Drop Shadow effect from the Filters.

That’s it. That’s how easy it is to create speech bubbles using Adobe Fireworks.

Related posts:

1. How to Create Sunbursts Using Fireworks
2. How to create the sticker peel effect in Fireworks
3. How to create flowchart arrows in Fireworks

To give you an idea on what effect we would be doing, here’s a sample:

I got this from a Photoshop tutorial posted in Photoshop Candy so it would be a tutorial translation to Fireworks which I think is easier for such effects.

I’ll be doing this in Macromedia Fireworks MX 2004 but any version will do.

1. First let’s choose a bold font. The thicker the better. Here I used Slugfest from SimplytheBest Fonts.

Slugfest font with a color of #5EBB00

It is important that this would be the final size, spacing, kerning of your text or else you’ll need to start all over again.

2. Ok for the gloss effect, first we need to create a copy of our text. Ctrl-C Ctrl-V.

3. With the copy selected, go to Text > Convert to Paths.

4. Then Modify > Ungroup.

5. Finally, Modify > Combine Paths > Union.

6. Then create an ellipse over the upper half of your text that would serve as your glossy area.

Make sure the ellipse is in front of the text

7. Select both Ellipse and the Composite Path then go to Modify > Combine Paths > Intersect.

8. Now fill the glossy area with a Vertical Linear Gradient from a light version of your color to the original color.

Gradient color used is from #E2FFC6 to #5EBB00

9. (Optional) For the outline, select your original text then use a 3 pixel basic soft-rounded stroke with a lighter version of our color. If you can’t find where to set the pixel of your stroke, it’s in the Stroke Options.

Color used for the outline is #E2FFC6

There you have it! It may looked kinda boring but slap it on a background with an Ellipse Gradient then apply the “reflection” effect and you’ll have something like this:

Sweet. Thank you for reading and be sure to check my other Fireworks Tutorials.

Related posts:

1. Creating a Web 2.0 Shiny Text in Fireworks
2. Creating the “Aqua Sphere” effect in Fireworks
3. Creating the “reflection” effect in Fireworks

Here’s a quick tutorial on how to create such icons in Fireworks. Just a couple of design guidelines to help you out first:

• Choose vivid colors for your background. Linear or radial gradients is fine but don’t mix a lot of contrasting colors.
• For the icon design, use vector shapes or something from the Wingdings or Webdings font. Simple illustration is good while photos do not fit well.

Ok now that’s out of the way, let’s do this. I’m using Fireworks MX 2004 here but the instructions are pretty basic so any version will do.

1. First create your rounded square. You can either choose the Rectangle tool and just adjust the Rectangle roundness or you could use the Rounded Rectangle tool.

2. Now use a gradient fill. I’ll be using a linear gradient from #000066 down to #3366CC.

3. Let’s now do the “shine” effect for the icon. It’s practically the same as what we did on the web 2.0 badge tutorial. Create a copy of your box and then create an ellipse overlapping the top part.

I made the ellipse semi-transparent so you could see the box behind it.

4. Select both box and the ellipse then Modify > Combine Paths > Intersect. That should leave you with the top part of the box.

5. With the top part selected, change its gradient fill to white. Then change the bottom opacity of the gradient to 50.

6. Now that effect is done, it’s time to put in your icon. To make things interesting, I will use an icon that is bigger than the box and will put it in without resizing the image.

All I have to do is position Mario over my box…

7. Then cut it (Ctrl-X). Select my box and Edit > Paste Inside.

8. Now Mario’s inside the box! Let’s just add some finishing touches. Select the top part of your box (shine effect) and change its opacity to 50.

9. If you want to add a bevel effect, go ahead. Select your box, go to Effects > Bevel and Emboss > Inner Bevel. Change the bevel width to 2.

There you go! Your sparkling iPhone App icon. If you want to add more style if you’re going to use it on your site, I recommend the reflection effect.

Related posts:

1. Creating a Web 2.0 style badge in Fireworks
2. Creating shiny web 2.0 buttons with Fireworks
3. Creating the “Aqua Sphere” effect in Fireworks

Web 2.0 designs are characterized by bright colors using gradients, shiny surfaces  and shadows and we’ll do the same on our badge. This Fireworks tutorial will also teach you how to use the punch and intersect command.

Alright let’s get started. Let’s try to recreate this badge on the right. As usual, I’m using Fireworks MX 2004 but any version with the Star Autoshape will do.

1. First create your canvas and your star using the Star tool in the Vector shapes menu. For this tutorial, I’ll be using this #0066FF as my main color.

Hold shift when creating your star to make the sides of equal length so your badge won’t look elongated.

2. Adjust the yellow points (click the yellow point and drag up or down) in your star so that it will form a badge. I increased the number of sides (leftmost point) to 25 and the depth of each point close to the edge.

Feel free to adjust the other yellow points to fully customize your badge. You can create the flower-like badge by adjusting the point that controls the roundness of each tip.

3. Let’s apply the gradient on our badge. I’m gonna be using a diagonal linear gradient from #9AC2FF to #0066FF. Feel free to use other color combinations and gradient styles such as radial or ellipse.

4. It’s now time to create the shiny surface effect. Create a copy of your badge (Ctrl-C, Ctrl-V). Then create an ellipse shape that will cut out the top part of your badge and place it in the desired position. Like this:

5. When done, select both badge copy and the ellipse and go to Modify > Combine Path > Punch. This will cut out the portion of the ellipse from the badge copy leaving the top part of your badge. If you use Intersect instead of Punch, the bottom part of the badge will remain.

6. Let us then apply the shine effect. Select the top half of the badge and change its fill to solid white.

7. Change the opacity of the white portion of the badge to 30 to complete the “shine” effect of your badge.

8. Almost done, let’s add the finishing touches. First, add an outline to our badge. Select the original badge and apply a 1-pixel soft stroke with the color #003399.

9. I want to add another outline but this time, a thick color white before I add my shadow. Select the original badge again then on the Effects, choose Shadow and Glow > Glow. Use the following settings:

• Color: white
• Width: 2
• Opacity: 100%
• Softness: 0

10. Then the drop shadow. Add another Effect, choose Shadow and Glow > Drop Shadow and change the distance to 3.

11. Finally add your text, shape, image or whatever to finish your badge.

Hope you learned how to create different styles of web 2.0 badges with the techniques I showed you.

Related posts:

1. Creating an iPhone App style icon in Fireworks
2. Creating a Web 2.0 Glossy Text Effect in Fireworks
3. Creating the “Aqua Sphere” effect in Fireworks

In this tutorial, you will learn how to create something like the image on the right. I got it from G3 Fusion and the author calls the effect “Soft Floating Font” for who knows why. Anyway, check out his site if you want to know how he did the effect in Photoshop.

Ok let’s do this in Fireworks. I’m using Fireworks MX 2004 by the way but you don’t need advanced features for this tutorial.

1. Go ahead and create your canvas and type in your text. Wide fonts works well for this effect. I’m using Franklin Gothic Heavy, size 75, bold with a color of #0099CC.

2. Let’s do the easy parts first, the white and gray outline. To create the white outline, put a 2 pixel white soft stroke on your text. You won’t see the effect yet since your background is white.

3. Then we’ll add a glow effect to the text. In the Effects menu, choose Shadow and Glow > Glow. Use the following settings:

• Width = 1
• Softness = 0
• Color = #CCCCCC

Here’s how it looks like now:

4. Now let’s create the “shine” effect inside our text. Change the Fill Option into Linear Gradient.

5. Change the orientation of the gradient to vertical by rotating the line. Also adjust the gradient line to match the height of your text.

6. Now here comes the cool part. Create 6 gradient points on your gradient line with positions as that of the image below and with the following colors:

• 1st point = #8A9EB6
• 2nd point = #6E97B3
• 3rd point = #4790B1
• 4th point = #197AA5
• 5th point = #1A8FBA
• 6th point = #1BAAD4

To add gradient points, simply click on the area beside between the start and end points. Take note of the 3rd and 4th gradient point; they should be real close to each other.

Feel free to adjust the position of those points. To remove a gradient point, click and drag it off the area.

7. If you did it correctly, your text should look like the one in G3 Fusion.

If you want to use different colors, just change the colors on your gradient points. Or, you could simply play around with the Filters > Adjust Color > Hue Saturation. (It will convert your vector to bitmap so better save a copy first in case you want to change your text).

There you have it. Your very own shiny text that you could use for your logo.

Related posts:

1. Creating shiny web 2.0 buttons with Fireworks
2. Creating a Web 2.0 Glossy Text Effect in Fireworks
3. Creating a Web 2.0 style badge in Fireworks