Below you can see  end result and as usual resource file is available at the bottom of this page.

You can find a lot of totally free vector resources around but for this tutorial grab this great vector texture pack from spoongraphics.co.uk, download it and unpack it. Now launch Fireworks and open Vector Textures.ai file that you unpacked (File > Open). It will take a while for Fireworks to open it but be patient . You will see something like shown at the image below.

Now create a new canvas, 600x400px will do just fine. I have used some green background but feel free to use whatever color you like. Use Text tool and type some text, I used Copper Black font with size of 62. Color of the text is pure black but any darker color will do.

Now we have 2 document tabs opened. One with vector texture and other containing the text. Go to textures document and select the texture that you like. I used the first one. Select it with Pointer tool and copy it (CTRL+C).

Now go to our text tab and paste the texture (CTRL+P) and position it at the left side of text. Now working with vectors  that have a lot of shapes and layers combined can really slow down Fireworks (Illustrator too) so we can now flatten the texture (rasterize it). Don’t worry it will still do our job pretty well. Select the texture and go to Modify > Flatten Selection and Fireworks will work much faster now. You can also close the vector texture tab since it has done its purpose.

After flattening it, copy and paste texture 2 more times, and position all 3 texture copies one to another and group (CTRL+G) them.

Now click on the text and copy it (CTRL+C), and now click on grouped textures (which are now one) and go to Edit > Paste as Mask and you should get grunged text.

Nice way to finish it would be to reduce the opacity of the layer with mask to about 40%-50% or try some other blending modes, but that is up to you.

For the final image I have added some grunge background and it is included in the resource file below. Resource file is Adobe Fireworks PNG file and you will need at least CS3 version in order to use it properly.

Download Source File

Feel free to use this resource file as you wish. I hope you will find this useful.

In the end we will end up with icon like shown below.

Start by creating new 400x400px canvas with any background and open up reference image. It is included in the resource file. So later you can download it and try it yourself.

Now using a reference image, which you can hide or lock as needed, draw ellipse 220x200px and set it color to solid #BDC1C4 as shown below.

It may appear that it would be easier to go with radial gradient fill, sure you can do it like that, but I decided to use different approach. Copy and paste the ellipse and reduce the one on the top to 158x158px give it white fill and set edge to feather. I set feather to 40px.

Now check the reference image again, we need that part at the top to get that pseudo 3d look. I made that part by copying and pasting the larger ellipse and creating one more ellipse little higher and by punching these two shapes. Select both ellipses (I have used some strong colors to make it more visible and i have hidden other layers) and press punch paths. It may take a few tries to get it right but just use the undo(CTRL +Z) until you are satisfied with the result.

Now again by using reference image set gradients to that new shape. Use linear gradient fill at the angle of 324. Set few more color stops for a better precision. I did it in a hurry, it can get even better.

We need that edge at the left so copy and paste the first ellipse (220x220px) twice. One at the top make a bit larger (230x230px). Again I have used strong colors to make the operation more visible. Position them like shown below and punch paths.

Fill the new shape with white and set edge to feather 2px. Copy again the the first ellipse that we made. Just copy it (CTRL+C) and while this small new shape is selected go to Edit > Paste as Mask. This way there will be no spills of white going over the edge.

For that middle part take the Rectangle tool and make a rectangle that is 180x8px set its roundness to 100%, fill it with solid fill #BABABA and give it inner shadow effect as shown below. Now copy and paste this rectangle and the one below nudge by 2 pixels by using down arrow. Fill it with white with no effects (remove inner shadow) and set its opacity to about 70%.

You can group this two rounded rectangles by pressing CTRL+G and give it a bit of tilt by selecting them and go Modify > Transform > Numeric Transform and select rotate and set to 5 degrees. But that is optional although its looking better I guess.
And for the ending you can give it a nice shadow. In this case for the shadow I have used plain ellipse with feather edge (22px) and opacity set to 40%. Of course I have moved it all the way behind all other objects. And that is it.

As I have promised below is the download link of Adobe fireworks PNG resource file so if you get stuck at some step you can check it out. Feel free to use it as you wish. If you link back I will be very happy.

Download Source File

This time I made a small video. Pen tool isn’t easy at first but don’t loose your nerves too fast . Once you get the grasp you will use it all the time.

The Tutorial

Start your Fireworks and create a new white canvas (I started with 540px x 400px). Draw a rectangle (438px x 184px), set its roundness to 88px, radial gradient fill (lighter at the center) and set a stroke to 3px (soft rounded color:#FEE4A9)

Draw an ellipse behind the rounded rectangle, position it precisely and cut it in half by using Knife tool. Delete the bottom part and keep the top part. Fill it with solid color (#FCC953)

Now draw a smaller white rounded rectangle (338px x 88px), position it in the middle of the first rectangle and set feather by using slider to 40px and transparency to about 45%. This way I tried to add a bit of complexity to the basic fill since Fireworks don’t have the Mesh tool like the Illustrator.

Now to add a bit of 3d perception draw two white narrow rectangles and place each on the side of that half ellipse. Rectangles are 56px x 175px each and I set feather value at 25px and transparency was set to 53%.

Now select the half ellipse in the back and go Edit> Copy/ (or just ctrl+C), select left narrow rectangle, and go Edit > Paste as mask, do the same for the right narrow rectangle to trim that excess whiteness

Cheese would not be cool without the holes. Someone might thing that I could have used plain circles but nah, better to make them with pen tool not to have a perfect circles. Draw holes with Pen tool and adjust them by using Subselection tool. Draw them and place them at your will, some bigger some smaller. Fill them with radial gradient as shown below and add the a bit of inner shadow. Go Filters> Shadow and Glow > Inner Shadow and use the settings from the image below.

After placing the holes finish up the image with nice overall shadow. I didn’t use shadow effect I used rounded black rectangle (440px x 57px) which I positioned at the bottom behind all other layers. Just set the transparency to 58% and feather to 15px. And that is it.

If I have omitted something you can always check the source file below.

Download Source File

Feel free to use this Adobe Fireworks source file as you wish, linking back if you think you should.

Original Image

I opened the image in Photoshop and started by going to New adjustment layer > Threshold as shown below.

But before proceeding with threshold adjustment select the Color Sampler Tool from the tool palette and set sample size to 3 by 3 average.

Now move the threshold slider all the way to the left and start moving it to the right bit by bit. First parts of the image that appears while sliding are the most darker ones. Pick a nice spot and mark it with the Color Sampler Tool. You will see number 1 marker. Now move the slider all the way to the left and start moving the slider to the right bit by bit. The most brightest parts begin to emerge. Pick again nice spot and mark it with the Color Sampler Tool.

Threshold did their purpose and we can now delete that layer since we have marked the darkest and brightest parts of the image. Using threshold is a neat trick to figure out the brightest and the darkest areas. Like I have said you can now delete the threshold adjustment layer or hide it if you prefer it more that way.

Now make new adjustment layer and select Curves, now you will see 3 ink dropper icons, one is for black, second is fro gray and third one is for white point.

Click on the first ink dropper and than pick that marker 1 in the image, than click the second dropper and now look on the image for the part that has some gray color in it. It is sometimes hard to spot the gray area but I clicked on the rock since I thought it has the most gray component. And at the and third eyedropper and pick that area marked with number 2 that we made using the threshold.

Of course you can experiment with different points but basically there is not much more to it. Have a look at the difference below.

This routine can be used as starting point for a more serious image manipulation in making wallpapers or compositions.

I am currently working on a project that uses gold gradients extensively so for that task I have created several really nice gold gradients. Feel free to use them as you wish, below is the download link.

Download Gold Gradients Style

In order to use this styles unzip it after download, open up your Fireworks and click on styles palette menu and choose Load Style… or Import Style Library… and browse for the extracted stl file.

Anyway If you need more information about working with Adobe Fireworks styles check this article that covers that topic more thoroughly.

Similar suggestions can be heard from many other sources. I mean I got used to applying IE6 hacks and all that but really why bother, it is time to look ahead and leave IE6 behind. There 2 big reasons.

• It is stupid.

There is no point in supporting a decade old browser that is vanishing from the web.

• It is so time consuming.

It takes so much time to apply all the hacks and tricks and still it won’t look like it should. I don’t charge extra for IE6 support but those who do I really understand them.

And if it is not enough for you to cut off IE6 support I suggest you read this article from smashingmagazine.

This is the end result

The Tutorial

Start with new canvas 400px x 400px, transparent background and draw rectangle 222px x 161px and set roundness ff edges to 16px. Fill it with gold linear gradient from left to right. I made gold gradient using 5 color stops and they are from left to right:#E6BB62, #E7BF6D, #FEE794, #EED299 and #E0AD42.

Select the rectangle and go Filters > Shadow and Glow > Drop Shadow and use the settings form the image below.

Draw new rectangle 220px x 159px give it no fill just rounded line with white stroke and 16px roundness. That will be credit card outline. Now continue with adding details. Draw small rectangle (201px x 2px), give it gradient fill from left to right. Set both color stops to white just change the opacity of the one to the right to 0% to create a nice fading effect. Copy and paste small rectangle and position the other one to the bottom.

Draw 2 circles using the Ellipse tool, one red and one yellow and position them like in the image below. I tried to mimic popular credit card logo here.

Draw 3 rectangles and position them one below other. Use the same fill as for the red circle. Rectangles are 19px x 6px. Group them together by selecting them and pressing CTRL+G

Now in order to make those 3 grouped rectangle to follow the circle form of the logo copy the red circle, select the grouped 3 rectangles and go Edit > Paste as Mask and the logo is complete. Type name of the bank to the right. I haven’t used any fancy effect just plain text.

For the silver area draw rectangle (52px x 36px), set roundness to 10px and set stroke to 1px soft rounded line (color #b4b4b4). Main thing here is the gradient fill. Use liner fill and position it at 45 degree angle as displayed in the image below. Color stops from left to right are: #CCCCCC, #DBDBDB, #F2F2F2, #D6D6D6 and #BABABA.

Now for the numbers use the text tool and type 12 digits (font is Arial regular 17 px) and add a simple glow effect by going to Add Effect > Shadow and Glow > Glow and use the settings form the image below.

You can go wild and keep adding details and maybe some textures but for the most part that would be it. I won’t go trough creating the back side of the credit card here but it is included in the source file and the download link is below.

Download Source File

Feel free to use this Adobe Fireworks source file as you wish, linking back would make me happy of course.

Image Extraction

One of the common tasks every designer faces with is removing background and extracting specific part of the image. Two most common approaches is either by using knife tool or using image channels. Fireworks does not have channels so Photoshop comes pretty handy.

In addition content-aware option which came with CS5 is really great.

Image Enhancements

Although Fireworks comes with image levels and curves it seems that in Photoshop it just works much better. Curves and levels are essential in making specific part of the image stand out or emphasize it.

Brush Tool

Brush tool in Fireworks is really stupid. I have been waiting for Fireworks developers to make brush tool better for years but that is just not happening. So if you want the brush use Photoshop. Photoshop brush is just great (btw Adobe Illustrator brush is just as good).

Great Filters

There are many filters in Photoshop that are really awesome and useful, I am talking about built-in (out-of-the box) filters, of course there are many so called third party filters. So sometimes I do one part of the task in Photoshop and other in Fireworks. Like making cool page background in Photoshop and finishing up the page look in Fireworks for example.

Of course Photoshop possibilities are endless these are just few things I like using it for. I don’t tell you now to go and buy Photoshop just if you already have it as a part of a Creative Suite or have access to it (company that you work for has a license for it) go ahead and use it. It can do miracles and after all it is like many designers like to say “industry standard”.

The only solution is to make your own. It is much easier that one could expect.
I show you how I made this texture above (Which btw you can use if you like it for free as you wish).
And below is the link to see this texture in action.
Check it out

The tutorial

Start by creating 200px x 200px new png document and draw a rectangle that is covering entire canvas (200px x 200px also) and give it a gray color (#8A8A8A).

Than populate the canvas with shapes of your choice. I have used simple doughnuts and circles. Color should be a little lighter than the background rectangle (color used is #939393). make sure the objects you use are not going across canvas border and use a nice uniform density while populating the area with objects.

Now comes the main part. Select all objects including the rectangle in the back (CTRL+A) and group them (CTRL+G or Modify > Group). Than make canvas larger 400px 400px by going to Modify>Canvas>Canvas Size and enter 400 as a height and width.

Now position the grouped objects to top left of the new enlarged canvas and copy it (CTRL+C) and paste them (CTRL+V) 3 times and position all of them one to another.

Make sure you position them exactly one to another, it is very important, use axis coordinates for help during positioning.

Now draw another rectangle 200px x 200px (color not important) and position it exactly in the middle. Set X an Y axis to 100 or use smart guides for help.

Right-click over it and select Convert Path to Markuee…

Right click again and select Crop Document

And there you go. Save it as jpg or png and it is ready for use. Nice seamless background that repeats. Perfect for web pages and other backgrounds in graphic design.