This time, I am going to show you how to create a grungy-looking RSS feed icon, especially for websites with dark background. As the title says, this is a Adobe Fireworks tutorial. Yes, you can do the same thing Photoshop but don’t ask me.
First of all, find yourself a good looking RSS feed icon. Maybe you can start here. Then you are going to need few textures. You can use anything you like, but for this tutorial, I am going to use two files from loveicon007 texture collection; downloaded here.
Ok, to start off, draw a rounded rectangle with the exact size of you RSS feed icon, also the exact degree of roundness on each corners
Then, from the texture pack downloaded earlier, open loveicon-12.png into the same file, to be use as the background texture of the icon. Place it underneath the rounded rectangle. Select the rounded rectangle > right click > convert path to marquee.
Make sure the layer of the texture is active, then hit Ctrl+X (or Cut). Then paste it back onto the canvas and delete the other portion of the texture
Next, bring the RSS feed icon onto the rounded rectangle (play with the layers). While still selecting the feed icon, choose Multiply as the blend mode from the properties pane at the bottom
Now, open loveicon-8.png from the texture pack downloaded earlier. Using the magic wand tool, select certain area of the texture and cut it out (ctrl+x). You can either choose the one you cut or the one that was left out. Your choice.
To change the color of the remaining texture, click the + button next to filter > adjust color > color fill. Change the color to black.
Put it onto the RSS feed icon we finished earlier. Move the texture or the icon around to get the best position you like.
Now change the canvas color to black. You’re done!
Notes
- No download available.
- Say you have a white background for your website. You can change the color of the texture to white. But it will not look as good as black.
- You can also apply this to fonts, but to apply texture as the background require more steps. But to achieve something like my Fakerdemit logo is just the same like this tutorial.
I hope no more comments comparing Fireworks and Photoshop like in my previous Fireworks tutorials, because both are two different software with capabilities of their own. Peace!
7 comments — Post a comment ↓
Raimi —
15 Feb 08 / #Another way of doing it :-
1) Go to http://www.flisterz.com/2008/02/15/adobe-fireworks-grunge-rss-feed-icon/#more-434
2) Rightclick at the image and click “save as”
3) Say Thank you in Flisterz.com blog
lol.. just kidding..
ikram_zidane —
16 Feb 08 / #check out http://feedicons.com for more rss feeds icons.
the roughness is too blurr and too intense for my liking, maybe lowering the opacity would help reduce this a lil..
nevertheless, very good tutorial for fw.
Raimi —
16 Feb 08 / #I agree with Ikram.
either lower the opacity or play around with the layer properties to blend them together.
Danny Foo —
18 Feb 08 / #I’ve an even better idea. Simpler too.
Just make the RSS whites stand out a little more. And you’ll have a nice contrasting grunge style RSS icon without losing its identity.
Raimi —
18 Feb 08 / #Yeah!Thanks Danny! people remember the symbol than the background.
Aisyah —
20 Feb 08 / #cool tut. I like the effect.
however, I prefer to edit the remaining texture and save it as a brush. That way, I can have the grunge effects in different opacity for each stroke. (is that what you call it?)
med —
29 Feb 08 / #thank…..aku mmg cari design tutorial yg ni..nsib baik ko cover kat blog ko.