We all love icons and if someone says otherwise, you’re more than welcome to laugh at their lie. Icons help us differentiate sections of a web elements that are purely text based and often replaces the purpose of the text itself. In example, a magnifying glass in a search input bar tells the visitor its a search bar without having to say that with texts. It helps clean up your site and provide your visitors with that level of elegance and simplicity.
Today we are going to learn how to make some of those basic and popular icons by taking advantage of Adobe Fireworks. We are going to create icons that are 128px by 128px. Since these are going to be created as vectors, you can easily resize them to any size you want. We are going to try an image tutorial. So instead of writing all out in text, we are going to show you a step by step image capture with brief info.
Note that we will be adding more icon tutorials later on. Instead of creating a new post for each, we are going this re-use this post to make it a master icons post. The tutorial images can be downloaded and opened/edited using Adobe Fireworks.
For the first icon we are going to be creating the magnifying glass that most people see on websites. It is always best to sketch out your icons in a notebook, but since this is basic icons, we can just work off the software.
Smiley Face Icon
Let’s show some emotions with this smiley face icon.
This is a user submitted tutorial by Hui of Mana Media. In this tutorial Hui teaches us how to create a beautiful iPhone icon in 10 simple steps.
Help Us Out!
Want to share how to make an icon? Great! You can download our framework here and email it to support[at]fwpolice[dot]com or tweet us a link to the zip/rar file (with png source) on Twitter (@FWPolice)
More Coming Soon