The gradient text logo tutorial is a very easy tutorial in Adobe Fireworks , and helps you create a quick text based logo for your website in just a few steps. This technique is used in most popular websites today.

Before we begin with the tutorial , let’s discuss about fonts first. There are basically two types of fonts, sans-serif and serif fonts.

Sans-serif fonts are what we call modern fonts, they dont have serif or extra details at the end of the letters or symbols. Example : Arial and Verdana Font. It’s what most designers used today for their logos.

Serif fonts have those extra details at the end of the letters or symbols , and which were mainly used in the old times. Example : Old English and Times New Roman.

Choosing between what type of font , serif or sans serif , the actual font you are going to use and trying to match your font with the overall theme of the design / website is what makes a logo good or bad so you have to choose wisely.

Font Resources :

Dafont – it’s a font resource that offers a huge variety of fonts from free, shareware to demo fonts.

Paid or commercial fonts though are the best. Why ? Font designers put extra effort on designing commercial fonts and looks better than most free fonts. Exclusive – its expensive and unique , so only those who can afford these fonts can use them in their logos. There are a lot of font foundries out there , like fontshop.com or fonts.com

If you’re a designer and truly want a font that nobody else uses , I suggest you try to create your own font for your project. Even if you will only design a few letters , you must consider font kerning, height and width of each letter and so much more. Check this font I designed for my client’s logo.

Now lets , begin the tutorial.

1.) Start a new canvas in fireworks , choose a dark background color like black , dark red , etc. *Do not use white or a light color as the background since it wont blend with the stroke color of the font.

2.) Use the Text Tool (T) and choose a font , a serif or sans-serif and any font-size. In this example I chose an Arial Rounded MT Bold Font , with a font size of 52.

2.) Select the text object, and choose white #FFFFFF as the stroke color for the text. Select the stroke color again and choose Stroke Options > and change to Stroke Inside. Follow these settings below :

Stroke Category : Pencil
Stroke Name : 1 – Pixel Soft
Tip Size : 1
Edge Softness : 1

Stick to the rounded type strokes and keep the tip size to 1 , you can use other strokes types if you wish.

3.) Select the text object a change the fill color of the text and choose gradient > linear gradient. Change the color of the right side of the gradient ( the one encircled in red ) to a black or darker color.

You will notice when you select your text object, a gradient handler appears. The one in the red circle which we will call “gradient position” and the one in the orange circle will be the “gradient extender”. The “black line” that connects the gradient position and gradient extender has to be a straight line.

4.) Lastly , its a matter of moving the gradient position further down and adjusting the gradient extender.*Notice the gradient position and extender , this decides the overall look of your gradient so play around which settings you prefer the best*.

The trick here is to make it look like the stroke color blends with the top color of your linear gradient. You may also wish to extend the gradient by playing around with the gradient extender. If you change the font size ( either increase or decrease ), you would need to change the gradient position and extender again.

And there you go, a simple gradient text logo.

Click here to download the gradient text logo source file in Fireworks > gradient logo (198)

Related posts:

1. Designing An Effective Gaming Clan Logo in Adobe Fireworks
2. Fancy Rss Button Tutorial
3. Creating Grunge Text Using Adobe Fireworks

In this Adobe Fireworks tutorial , you will learn how I created those nice looking icons ( twitter , rss , mail ) icons in the top right area of my header, and the social media icon pack I submitted here

Before you view this youtube video tutorial , read some handy tips below :

When drawing using the rectangle tool , if you want an equal height + width , you must hold down the shift button.

Use the hue/saturation filter to change the color of the button.

For the graphic / letter / symbol inside the button , keep it simple, preferably a light solid color with no effects.

View the video below :

Got questions on this Adobe Fireworks Tutorial ? Feel free to comment below.

Related posts:

1. Fancy Rss Button Tutorial
2. Simple Orbs Tutorial
3. Creating Grunge Text Using Adobe Fireworks

Kerning refers to adjusting the space between two letters. In Adobe Fireworks , the default horizontal kerning or “tracking” is 0. If we use only 1 word , it can easily be kerned by using the justified alignment button or by using tracking. But what if we want more kerning for two words, a phrase or even a paragraph ?

So here’s a simple tip for kerning a word , or a few letters only. Use the justified alignment button ( blue circle ) if you want more kerning , or you can use the tracking slider ( orange circle ).

For kerning words , or paragraph. Using the justified alignment button doesn’t work or makes the text looks weird , the only solution is to manually change the value of tracking ( the orange circle ). By default the tracking value is -99 to 100 , -99 means that the letters are too close and we dont want that. The solution is to change the value to more than 100 , like 300 , 500 to 1,000 or even more. This takes a little trial and error to get the desired kerning but it is well worth it =)

Here’s an example of the text kerning method in a text on a circle path, the tracking value is around 1,200. Any questions ? Feel free to comment below.

Related posts:

1. Creating Grunge Text Using Adobe Fireworks
2. Feathering in Adobe Fireworks
3. Designing An Effective Gaming Clan Logo in Adobe Fireworks

This tutorial is for beginners using Adobe Fireworks. It’s an easy technique that can add finishing touches to your design.

1.) First we must start a new canvas, choose a dark color for your canvas color preferably black , and any size for the canvas size.

2.) Next we click the vector tools > star shape. Draw a star in the canvas.

3.) Select the star shape you have just created. You will notice that 5 yellow points will appear, namely : Radius 1, Radius 2 , Roundness 1, Roundness 2 , Points. In this tutorial we will only focus on Radius and Points , try playing with those points so you can get familiar with them.

4.) The default 5 star points is okay but if you wish to decrease the points , just click on the point and move it upward. Moving the point upward increases the star points, move it downward decreases it. The minimum number of points is 3, which is actually a rectangle. If you dont like 5 star points, i suggest you decrease it to 4.

5.) Now we click on the radius 2 point, and move it inward or closer to the center, the trick here is not make it too thin .

If you have a problem dragging the points to the center, you can always use the autoshape properties panel. Go to Window > Auto Shape Properties. Play around with the Radius 2 value, mine is around 3.9.

6.) Select the star shape, and change the fill type to Gradient > Radial. Choose white for both colors.

You will notice that there are 4 handles in the gradient, 2 on top and 2 on the bottom. The ones on top control the opacity of each color. While the ones on the bottom control the color. Click on the opacity handle with the blue circle , set the opacity to 0.

If you wish to change the color of the sparkle , you need to change the color of the left fill handle with the orange circle. The fill handle in the green circle can also be changed if you wish.

7.) The sparkle is actually finished, but if you wish to spice it up a bit, use the scale tool and rotate it to your desired angle.

8.) Add it to your design , just duplicate your sparkle shape, and reduce the sparkle using your Scale tool.

Here are some final tips :

Create more sparkle shapes , make different sizes with different star points ( stick with 4 – 5 )

Put the sparkles close to the edges or tip of your text / object.

If the sparkle is too bright, you can always adjust its opacity in the layers panel.

And thats it, if you have any questions feel free to comment below. You can download the sparkle source file here > sparkle zip (261)

Related posts:

1. Fancy Rss Button Tutorial
2. Designing An Effective Gaming Clan Logo in Adobe Fireworks
3. Creating A Fading Line Effect Using Adobe Fireworks CS4

This is my first photomanipulation tutorial in Adobe Fireworks CS4 which requires only a few steps to complete, and would be very effective to convey a meaning in your design / website header.

Before using a photograph that you find in the web, make sure to check the rules on using the photograph / stock image. Some have stock rules that you must comply before posting it in your website / blog or for commercial use. There are tons of free stock images that you can use for your personal / commercial projects, I highly suggest you get your images from deviantart.

1.)  Start with a new fireworks document with a canvas size of 473 x 374 , or you can increase/decrease the size if you want.

2.) Then we must download the chess stock image to use in this tutorial. Click on the download icon for the higher resolution image.

http://katanaz-stock.deviantart.com/art/Misc-08-100711004

Visit their profile page in deviantart , they also have other stock images you can use:     http://katanaz-stock.deviantart.com/

Read the rules on using the stock images from the owner :

If you are a member of devianart :

Please credit me in your deviation description

Let me know if you use this image (By note preferably)

Do not use my stock to create brushes or new stock without permission

You are allowed to use my stock in a print, remember to credit me!

Some of my images have been donated by colleagues from work and I have full permission to use them.

Any other queries, note me!

USING OUTSIDE OF DA:
As of 28th of July 08, you now have permission to use our stock OUTSIDE of DeviantART!! This is brilliant news, and I’m sure many of you agree as in the past we’d sadly turned down hundreds of requests.

However, when using our stock outside of DeviantART you MUST include credit and a link back to our direct profile page here on DeviantART. – Also you may not use the stock images for website templates, or for commerical and/or profitable use. – You may also NOT use our stock on the website, Model Mayhem! We have had too many people claiming our pictures as their own and any of our images found on Model Mayhem will result in a warning, or a copyright fine! – As we’re absolutely sick of seeing our images on there!!

3.) We must scale down the image size its a bit big ,  select the image, and use the scale tool + hold the shift button while scaling down.

4.) Using the pen tool , trace the outline of the horse chess piece. You have to practice on using the pen tool , especially on drawing curves. Choose a stroke color in the outline that is different from the colors in the image ( This is done so that you can easily spot mistakes in your vector points and make some changes ).

5.)  Click  swap stroke / fill colors button to remove the stroke and put a fill color on the image.

If you wish to stop on this step , just play on the layer modes and change the fill color of the chess piece , experiment on what looks best.

6.) Using the rectangle tool , draw a rectangle with the same size as the canvas 473 x 374. Select both the rectangle and the horse chess piece > Modify > Combine Paths > Punch. Use black as the fill color of the rectangle.

7.) Change the layer mode of the rectangle from Normal to Color. And that’s it =) Put some text if you like.

Thanks to http://katanaz-stock.deviantart.com/ for letting me use the stock image in this tutorial.

Related posts:

1. Photomanipulation in Adobe Fireworks CS4
2. Fancy Rss Button Tutorial
3. Creating A Fading Line Effect Using Adobe Fireworks CS4

One of the most overlooked tools in Adobe Fireworks is the Eraser Tool. It is a neat tool especially if you want to manipulate bitmaps. Vector paths with fills have options to use fill colors that are gradients , or semi transparent colors.

But what if we just want to use a stroke without a fill ? and make some parts transparent. We can do this by using the Eraser Tool.I will show you this Adobe Fireworks tutorial on how to use the Eraser Tool Effectively.

1.) Start a new fireworks document , with any size , choose a dark color for the canvas color.

2.) Using the pen tool , draw a single line with some curves ( or a straight line would do ). Make sure the stroke category is soft rounded, with a 1px stroke size. Stroke color should be white but you can use another color if you like.

3.) Click on the stroke path > Modify > Flatten Selection. This is done to convert the stroke into a bitmap.

4.) Select the bitmap image and use Eraser Tool. The most important part you have to consider is the Eraser Opacity amount ( since you will frequently change the amount ) and control of the mouse , you must have steady hands lol .

By default , the eraser opacity is at 100 percent. The key here is to start around 25 percent eraser opacity , up to 100 percent in the bottom part of the line.

5.) Use the Eraser tool from A to B with an eraser opacity amount of 25 , just follow the line till it reaches the end of B. ( Don’t repeat using the eraser tool in the same area , just give it one smooth flow )

6.) Change the eraser opacity amount to 50 percent eraser opacity, use the eraser tool again starting from C to B.

7.) Change the eraser opacity amount to 65 percent eraser opacity, start from D to B.

8.) And finally , set the opacity amount to 100 percent and start from E to B.

Create more lines using the methods above and just add a fancy radial background and it will look awesome =)

Related posts:

1. Creating Grunge Text Using Adobe Fireworks
2. Feathering in Adobe Fireworks
3. Simple Orbs Tutorial

In this Adobe Fireworks tutorial , you will learn how to create your own gaming logo for your website using Adobe Fireworks.

The logo design process is not just an hour long process, it takes time to create a good logo that can attract its target audience. Take note that this is a web logo tutorial, and we are aiming for web use.

Let’s assume we are trying to create a logo for FIREZONE , a gaming clan that plays first person shooter and RPG games.We would opt to make the logo general so that it can appeal to different types of games and if the gaming clan would take another direction.

Before we actually design the logo, we must review the logo guidelines, although some of the things here can be changed during the design process. This will serve as a guideline for the logo designer in asking the client.

a. Logoname – Firezone

b. Preferred Colors for the logo text or ” type ” – orange , white, silver

- Preferred Font Style -

c. Preferred Background color – Black

d. Preferred Graphic Symbol or ” mark ” – Circle Type with a Letter L on a flame symbol

e. Slogan or tagline to go along with the logo – ” Maximum Firepower ”

Now let’s make the logo in Adobe Fireworks CS4

1.) First, lets start a new document

Canvas Size : Length = 700 Width = 700 , Resolution = 150
Choose black for the canvas color:

2.) Now lets make the logo text. When using a font, we must make sure that it is a free font and check the font documentation before we try using them for our projects , we can find a lot of free fonts at www.dafont.com . Then install the font in your pc or mac.

In this tutorial , i used a font called turnpike but you can use a different font if you wish.

3.) Use the (T) Text Tool to type the word FIRE. For the font color, choose #FF9900 or orange

4.) Next, click the font tool again to type the word ZONE. Place it to the right of FIRE , and take note of the spaces, use the keyboard arrows to make sure they are alligned well. Choose white for the font color or #FFFFFF.

We could have typed firezone as one word , and change the colors inside but since we are going to use gradients later on, we need to separate  them.

5.) Creating the flame symbol.

This is a tricky part since it requires the use of the pen tool and we would be utilizing curves. It’s best to practice using the pen tool , using the ” Ctrl Keyboard Button ” for controlling the points.

Click the pen tool , change the stroke size to 1, and a soft rounded brush with a white color.

6.) Hold the CTRL button , and use the pen tool and draw a reverse S shape.

7.) Select the path again, and click the pen tool, hold the CTRL button again , click the topmost point and draw the curve below. Follow the image guidelines below.

8.) Dont worry  if the curves are not perfect, luckily we can edit them by point. Each curve has handle bars that we can adjust. Use the sub selection tool to delete the bottom point.

9.) Click the point to the lower right and adjust the handle bars , try to make the curves as smooth as possible. You can also check the other points and adjust them.

10.) Remove the stroke color and replace it with a fill color, lets choose white.

11.) Now we must put the letter F inside the flame, use the same turnpike font and type in the letter F , change the font size to 96 and the font color to black.

12.) Since we will be integrating the text to the symbol later on, we must convert the text to paths. Select the text, then right click > Convert to Paths.

13.) Select the text again  and right click, ungroup. We must make sure the excess parts of the letter F wont overlap on the symbol , since we might use the simple symbol on different backgrounds.

Right click on the flame symbol and click Duplicate , Select both the flame symbol and the letter and click Modify > Combine Paths > Intersect.

13.) The intersected F will look white, so change the color to black.

14.) Select both the letter F and the flame symbol , right click > Group.

15.) We must resize the grouped object, hold shift and use the Scale Tool. Scale it smaller or you can skip this part if you want =)

Now we have created a simple logo and text version that can be easily exported to ps or ai, or to be printed out. But since we want to make a fancy version , we must put some cool effects to it.

16.) We must now use the doughnut tool in the vector shapes panel to create a ring around the flame symbol. The doughnut symbol has a yellow point that can adjust the inner radius. Click on the point to adjust the ring thickness.

17.) Select the doughnut shape and right click > Ungroup. Select both the doughnut and flame symbol and click the allign horizontal center button, or you can manually center the flame symbol using the keyboard arrow buttons.

18.) Select the flame symbol and right click > Ungroup. Select the flame and change the Fill Color from white to Gradient > Radial.

19.) The secret to making an effective radial gradient is to use a lighter color on the far left side, and a darker one on the far right.

In the image, you will notice I use a #FFFFCC color or a light yellow color on the left, a #FFFF00 or yellow color on the middle, and a #FF9900 or orange color in the far right. Gradients usually require 2 or more colors but I want to add something extra in the middle to add a more dramatic effect.

20.) Select the flame symbol , adjust the direction and length of the radial gradient.

22.) Now we will make the flame glossy. Select the flame, and right click Edit > Clone. We will now have a clone radial gradient.

23.) Use the Ellipse tool to draw an oblong shape. Take note that this shape will be the glossy part of the flame , adjust it if necessary.

24.) Select both the oblong shape and clone radial gradient and click Modify > Combine Paths > Intersect.

25.) Select on the radial gradient and adjust the direction of the gradient if you wish. You will notice the letter F is hidden behind the gloss effect, simply click it and use the bring to font button or just arrange it in the layers panel.

26.) Now that the flame looks shiny, we must now focus on the doughnut ring and make it metallic. It might look like difficult but its very easy. Select the ring and change the color to Gradient > Linear.

27.) The key to creating an effective metallic look is to use the sandwich effect. Imagine a sandwich, two slices of bread, one on top , the mayonnaise in the middle, and the other slice of bread at the bottom. The same principle can be applied in using gradients.

A white color on top, dark gray on the middle, white at the bottom, and so forth repeating the process. To add colors, just simply click on the gradient on the gradient panel, take note of the red circle in the image.

28.) We must use the same technique we used on the flame symbol, select the ring and click Clone.

29.) Draw an oblong shape around the ring , you can use a circle if you like .

30.) Select the oblong shape and the clone ring and click Modify > Combine Paths > Intersect.

31.) Click on the intersected part, and try to adjust the gradient or play with the gradient handlers and see what looks best.

32.) Use the Ellipse tool to create a simple circle with a radial gradient, with a darkgray and black color, this will serves as the background for the flame symbol. Again , we use the same principle for radial gradients, light color on the left, dark color on the right.

Select the circle and click the Send to Back tool or simple put it in the bottom layer in the layer panel.

33.) Now that we are done with the logo mark or symbol. Let’s head back to the logo text again.

Click on the text fire,  and change the color to a linear gradient. If you notice on the flame, the light yellow color is on top, and the orange color is on the bottom, do thesame for the fire text. Use the gradient handlers to adjust if necessary.

34.) For the word ” zone ” , we use the same process above except we use the sandwitch technique. With a white , black white combo and so on. Adjust the gradient if you wish.

35.) Select all objects in the logo graphic and group them. Again use the scale tool, hold shift and reduce the size of the logo graphic. Arrange the logo to the left of the text.

36.) At this point, the logo looks finished, we can also add a rectangle with a radial gradient to top it off. We can apply this technique if we want the logo to shine in web headers, etc.

Click here to download the source fireworks file  source fireworks file (785)

If you guys are in need of a logo designer, just contact me =) Hope you like my tutorial.

Related posts:

1. Fancy Rss Button Tutorial
2. Creating Grunge Text Using Adobe Fireworks
3. Simple Orbs Tutorial

It can also help you in creating the color scheme for your web mockup / design.

The color blender has a slider to control the amount of colors to be displayed in the panel , the minimum is 2 and the maximum is 36. In the video example, I had 8 grouped objects, so I chose 8 on the slider ( sometimes it’s best to count too ). Anyways , heres the video.

Hope you enjoyed the adobe fireworks tutorial , if you questions , feel free to comment below.

Related posts:

1. Pixelate Effect Tutorial
2. Simple Orbs Tutorial
3. Fancy Rss Button Tutorial

Related posts:

1. Tech Orb Button – Adobe Fireworks Download
2. Creating A Night Scene in Adobe Fireworks 8
3. Simple Orbs Tutorial

Related posts:

1. Altes Wines Web Logo Tutorial
2. Creating A Night Scene in Adobe Fireworks 8
3. Creating a fancy text effect in Adobe Fireworks

If you need help , just post a comment below. More fw video tutorials coming soon =)

Related posts:

1. Creating Grunge Text Using Adobe Fireworks
2. Creating A Night Scene in Adobe Fireworks 8
3. 23 Amazing Adobe Fireworks Tutorials

Basically , feathering is changing the edge of fills , or the edge of your vector object to feather. By default the edge is set in Anti – Alias , but you can also change it to Hard or Feather. This is a very easy technique, but if done in the right way, could help  soften your images,  and add glows or highlights.

Suppose we have this setup , one rectangle with 3 circles of different sizes. How do we apply this technique properly on the background, to give it some shine, well first we must change each of the fills ( from Anti-Alias by default, to feather ).  When selecting Feather, a default amount of 10 is set, but the trick here is setting it to a higher level , lets say 74 to 100.  See the image below.

Too shiny ? Try experimenting on the amount of feather you will use in each circle, move them out a bit to the sides of the square, or even scale them bigger ,or you can also change its layer opacity as well. By default , each layer object’s layer opacity is at full, or 100 percent, changing it 90 > below , could give you an effect like this. Play with different values for each layer object.

Now lets move to making a circle orb. Lets say we have one big black circle, and one smaller gradient circle. Take note , when dealing with gradients , have two colors which are different  ex : dark orange and light orange, to achieve its fullest effect. You must also practice moving the gradient handles, to which direction looks best.

We must change the inner circle’s edge into feather , move the gradient to the top left, move the circle to the top left of the black circle, and make some adjustments to the feather amount. You can see the process below.

You can duplicate the gradient if you like ,2 or  more times, scale them down or try experimenting with different amounts on the circles , change the direction of the gradient or the layer opacity.

You can get something like the image below, if you think the feathered gradient is overlapping the circle, try moving it.

You can also use a radial gradient instead of the black circle, and following the steps above , you can get something like this.

Aside from changing the edge to feather, adding texture could also change the look of the image. When dealing withbackgrounds , pick the right texture that suits best , and also try experimenting on the texture amount.

I’m gonna use the sand texture,  and apply 61% amount of texture.

Apply feather with an amount of 83.

You can even try to duplicate the gradient feather and make it bigger, and move it downwards. You can get something like this.

The image looks good , but if you want to add some extra ohhmph factor , we use another texture. Try duplicating one of the bigger circles, change the texture to mesh , and try experimenting on which layer mode and or/ layer opacity value makes the image look even better.

Well there you go, if you have questions about this adobe fireworks tutorial , please leave a comment below .

Related posts:

1. Simple Orbs Tutorial
2. Fancy Rss Button Tutorial
3. Creating Grunge Text Using Adobe Fireworks

This is a tutorial I made for fireworksguruforums on how to create a web logo using adobe fireworks for Altes Wines, a fictional wine company. You can view the png type tutorial in this forum post

Related posts:

1. Fancy Rss Button Tutorial
2. Pixelate Effect Tutorial
3. Simple Orbs Tutorial

Now lets start the Adobe Fireworks tutorial.

1.) First, we start by creating a new document, with a black background color. I used the Bell Gothic Font in this tutorial , or you can use your favorite font if you like. Canvas size varies upon the preferrence of the user, usually when making rough designs I like 700 x 500 sizes or more.

2.)  Let’s type the word GRUNGE , with a 59 font size  or bigger . Change the color of the font to white or something lighter than black.

3.) Now we will start creating the grunge effects, which we will replicate and modify over and over again. We start by creating tiny circles using the Ellipse Tool. When creating the circles, its best to hold the SHIFT key so that we create a perfect circle with an equal width and height

4.) Now the fun part begins, see the 5 circles we created in step 3? We have to group them as one object and clone them as often as we like.

5.) I created 3 clones , we must use the subselection tool to rearrange the circles or create more clones. You can put the clones closer together if you like.

6.) If you want to create smaller circles, we create them with a width and heigh of at least 1 or 2 using the Elipse Tool. Try cloning the circles as much as you like.

7.) Now your circles looks like a galaxy of stars already , You can group all the circles together again and make another clone , rearrange if you like. Check image 2, i duplicated the clone and used the Flip Horizontal Button. Move the clone 2 or scale them down if you wish

8.) We must convert the TEXT we created as paths, so that we can modify the look of the TEXT. So Click Text > Convert To paths

9.) Bring the clones we made in step 7 and we will start placing them in the letters.

10.) You can either move the circles to the text as a group using the pointer tool or you can manually move all the circles using the sub selection tool.

11.) Try moving some of the circles and play around with it. Put the circles either inside the letters or just near them.

12.) We then need to change the colors of the grunge circles we made into black.

13.) Select all objects, the circles and text and click Modify Ungroup , repeat this process till all groups become paths, then click Combine Paths > Union

14.) The grunge circles is now a single path, we will now use the Reshape Area Tool to edit some of the parts. The technique to reshape the paths is an experimental process, you can use a bigger or smaller tip size if you like , around 10 to 30 size would be ok.

15.) For an added effect, we flip the letters R and N using the Flip Horizontal tool

16.) Select the TEXT group and click Modify > Ungroup, repeat the process until you can see all letters as Paths. Then click Modify > Combine Paths > Union. ~ A little reminder, the fireworks text engine is pretty bad, especially the kerning, you might want to move some of the letters so that they are equally spaced  .

17.) Select both objects, then click Modify > Combine Paths > Punch. Now we have one single vector path with a grunge effect =)

18.) Still not convinced ? You can even distort the edges of the letters if you like using the Reshape Area tool ,but not too much =)

19. ) Finally , just add a fancy background =).

There are other uses for the grunge text effect, you can also use them in your other vector shapes, the possibilities are endless ! I hope you enjoy reading the Adobe Fireworks tutorial, if you have questions, write a comment here or contact me thru my twitter account.

Related posts:

1. Fancy Rss Button Tutorial
2. Simple Orbs Tutorial
3. Creating A Night Scene in Adobe Fireworks 8

Most people don’t know that there are a lot of photoshop compatible plugins that can be used in adobe fireworks  and that  which I highly recommend using Richard Rosenman’s plugins. 

Before you read this tutorial , please download the Pixelate Plugin by Richard in his site. He has about 24 freeware plugins that can be downloaded in his site and some commercial ones as well.

1.) First extract the contents of the zip file , a ” pixelate.8bf ” file appears. Copy and paste this file to your plugins directory. It’s usually C:\Program Files\Adobe\Adobe Fireworks CS4\Plug-ins.

If you use different sets of plug-ins and don’t want it to load everytime you use Fireworks, I suggest you make different folders and activate these sets only  if you need to. Since using a lot of plug-ins can slow down fireworks.

2.) By default,  your plug-ins are stored in the Adobe\Fireworks CS4\Plug-ins directory, to change the directory of the plug-ins , you need to access the preferences panel.

Start a new document, right click on the canvas, and click Preferences

Click on the Folders Tab, if you have used a different directory to store your plug-ins. If you used the default directory , you can skip this part. The preferences panel can also use different textures and patterns, you may want to check the other tabs if you want to customize default settings of fireworks.

3.) Restart fireworks to activate the plugin/s.

4.) Copy this image and paste it on fireworks. Or you can use your own  image if you want to, take note that the Pixelate Plugin only works best if you use a photograph or an image with two or more colors and that it converts your images into bitmaps.

5.) Click on the image , and go to Filters > Richard Rosenman > Pixelate to open the Pixelate Panel.

It’s default settings already look good and does the job in pixelizing your images, but I’d like to further discuss the features of the plugin. Set all values to 1 or drag all the sliders the left.

Horizontal / Vertical : Controls the sizes of the squares or the pixels  The maximum amount for both is 100, which gives your image 9 square pixels. By default the Lock Horiz/Vert button is pressed , if you wish to unlock it, just press the button. You can now have different values for both the Horizontal / Vertical sliders , which gives a rectangular look for the pixels and looks like this

I suggest you press  the Lock Hozin/Vert button, and for the their values, 10 – 60 is decent, anything more would make the pixels too big, anything less would’nt make any noticeable changes to the image.

Blend controls the transparency of the pixelate effect. A value of  zero would do no changes to the image, anything around 1 – 80, the image is still visible, but a value of  100 fully pixelizes the image.

The outline gives the squares or pixels a border. Just like the blend slider, the outline slider controls the visiblity of the outline in the pixels. If you dont want them to show, just set a value of 0 , a value of 100 shows the outlines, like a grid.

Subtractive / Additive Basically Controls the colors how dark or light the outline color would be. Additive gives a white outline while Subtractive gives a black one. I suggest you leave the default settings for the R G B buttons, if you wish to change the outline color, click the black white space.

Hit the OK button once you have are done with the settings. And that’s it ! You can pixelize your images.

You can play around with the settings but for a better look, keep the Outline value to zero, and click the Lock Horizontal / Vertical Button, and everything will be fine =)

Here’s a list of other photoshop plug-ins that are compatible with fireworks. If you have questions of this Adobe Fireworks tutorial , feel free to comment below.

Related posts:

1. Fancy Rss Button Tutorial
2. Simple Orbs Tutorial
3. Tech Orb Button – Adobe Fireworks Download