Rookie’s Cookies

Did you notice that web 2.0 apps use huge, shining icons in their interfaces? Quite straightforward and intuitive, aren’t they?

I find these very useful when I was designing the UI, they are helpful on give users an instruction and making the app stylish. Choosing the right .  Today I am going to make one.

1 Blue print:
Open the illustrator. If I am making a set of icons, I will make these blue prints for every icon before I go into details for them, the purpose is to make them consistent in terms of style at the first stage.

2 Basic shape:
Open illustrator and use pen tool to draw these vectors, fill them with gradient colors.

3 Decoration:
Add the highlights (glisten) and shadows, in order to emphasize the feel, yeah, the feel…..

4 Border:
Make a copy of the portrait, fill it with dark color. Resize it to be a bit larger than the original. Send it to the back-end.
(It is not necessary to do this in the illustrator, you can just simply use “stroke” in photoshop, it works fine.)

5 (Optoinal)Make the icon file:

There are two options:
A. You can use Axialis IconWorkshop to generate the icons (*.ico)
Trial version: http://www.axialis.com/iconworkshop/

B. Use online icon generator:
http://www.genfavicon.com/

6 Use it:
You can use this new icon for different purpose:
–on the interface of your software;
–in search box in your website;
–as a favicon when people are browsing or bookmarking your website;
–as your windows desktop icon.

This aritcle was inspired by this tutorial.

Jin Li UI design graphic design, icon, UI, user interface