Introduction
There are many tutorials out there for
Adobe Fireworks, but many of them are only the basics and/or don't prove to be very useful in application to real world situations.
For the first of my tutorials on Fireworks, I'd like to start off with something relatively complex looking yet simple to make. That would be an RSS feed icon.
There is the
standard RSS feed icon, but what happens if you want your own design? What happens if you can't do anything with the original files because they are all flat PNG?
Notes:- Basic knowledge of Fireworks is required - example how to apply strokes (colour, styles) and fill (styles) and how to use the basic drawing tools (Circle, Rectangle and Doughnut).
End Result:
By the end of this tutorial, you will hopefully be able to produce:
RSS Feed Icon
Step 1 - Setting Up
First and foremost, we require a canvas on which to put our graphic. Create a new file and choose a width/height/resolution/background. I've gone for 240x240 at 72 px/inch on transparent background because then my graphic can be 200x200 px in the center and have a clear space around it. 72 px/inch is really the highest you need for web graphics.
Step 2 - Foundations
Now that we have our canvas, we need something on it. Every great monument has it's foundations, and so our RSS feed icon should have one as well. Using the
Rectangle Tool produce a square (rectangle with equal length width and height). I've gone for 200x200 px and placed it in the center of the canvas.
As RSS feed icons have rounded corners, we'll set the
Rectangle Roundness (found in the properties panel) to 20.
I have given my icon the orange background (#ff9e00) which appears on most RSS icons. You can have whatever colour you wish, but just bear in mind your audience.
By this point, you should be looking at something similar (or exactly) to the one below.
RSS Feed Icon - Foundations
Step 3 - Building Blocks
Copy and paste the rectangle from the previous step and resize it by -4px both width and height. Move it 2 pixels right and 2 pixels down. It should be centered to the original rectangle.
To save time, we're going to apply a stroke to this object. This stroke should be a close colour to the rectangle's background, but should still contrast. I have used #ffc600. It is between yellow and orange. Make the stroke appear
Inside Path by changing the property within the colour palette. Make it 2 pixels thick. We can leave the
1 Pixel Soft style as it provides an anti-aliased edge (smooth).
Once that is done, we're ready to give it a fill. Using the linear gradient, start with a lighter colour than the original rectangle's background, but slightly darker than the stroke. I started with #ffbf00, then ended with #f28b00. Position the gradient so that goes diagonal (not 45 degrees though) and stops at about 3/8 of the way in like the image below.
RSS Feed Icon - Complex Part
Step 4 - Making It Smooth
I would argue that this part will introduce a great feature. The
Paste Inside (Ctrl + Shift + V) function. I use it in every aspect of design in Fireworks. It's a very good thing to have.
Using the
Circle Tool create an oval that extends across the whole canvas and covers just over half of the height of the feed icon. Set it's background colour to the darker end of the gradient of the rectangle behind (the major area which is darker). Just be sure to remove the stroke and make sure it is a solid fill.
Then cut the oval. Select the rectangle with the gradient and use the
Paste Inside function found in
Edit >
Paste Inside.
Hopefully, you'll get the below.
RSS Feed Icon - Paste Inside
Step 5 - The Accents
Our background for the icon is complete. Here comes the fiddly bit, creating that radar effect.
There are two tools we'll be using; the
Circle Tool and the
Doughnut Tool.
Firstly, create a highly contrasting circle in the bottom left corner (with some space to the bottom and left sides). I have chosen white. Apply a stroke which is lighter than the background it is on, but not too light. I've gone for #f8a300.
Now comes the tricky part, getting the doughnuts to be the right size. Just experiment with the sizes and positions until they look good. Remember, the should be relative in size to each other.
When you have the two doughnuts properly sized and aligned, simply group them and then
Flatten Selection. This will make it much easier removing the 3/4 of the object you don't need.
Use the marquee tool to select the parts which you don't want and simply delete.
At the end of it, you should get something like the below.
RSS Feed Icon
END OF TUTORIAL
I hope the above helps Fireworks (or even non-fireworks users) see how an RSS icon can be constructed easily with very simple steps and work-arounds. (Not bad to say it was 00:32hr (12:32 am)).
If you wish to have the source PNG (layered) you can get it here:
Source file for Tutorial.
