Saturday, 9 March 2013

Day Player Icon evolution


 You will see the app icon life cycle. its all about iteration, and find something to improve from time to time.  
finally i got the logo concept i should have. then start to design the logo around this concept. 

if the words are confusing, in a moment the design process will be clear.







First time i started with this icon logo.
                 It holds for two days as i remember in the app landing page before i changed it (anyway i think i was the only one who was visiting this page :)   )

  I know your first impression ugggghhhh ugly. i see. so i decided to dig into icon design tutorial, because the first impression is more important than you think. 

Using Inkscape (an open source vector drawing editor)
     
      It's similar to adobe illustrator except for "its free". i found this tutorial, that explain steps to design iphone icons using inkscape. it states the basics in easy way. 

  then i started to improve my design a little bit, based on what i learnt. then back again to my icon logo. this time i know my tools well. 

Here are steps that i followed to make the final app icon design

1- first start with a simple opened circle like this

2- Adjust the width and rotate it a little to be like this

3- Add my clock hands by connecting two line by one point and make the clock tell 12:10 time

4- Again adjust the width of lines and add small solid circle, as the achor of the two lines.and make the lines tips look like half circled shape

5- And here it comes, what make this logo stand out, the three solid green lines, that represent the play button


6- Just a simple three lines, and make sure to grade the lines from dark green to something light at the end. so far this is a nice logo, but it lack the texture that make it lively

so this is the role of filters, apply a filter in inkscape called "darkness and glow" (i dont know if its the same name in illustrator). this filter give the logo a 3D look

6- This simple filter transform an amateur logo design to a professional one :) , some times its simple than what you think. and to give it more texture we can add shadow blow the logo to make it stand out.

just start with a black solid rectangle below the logo
 
7- And apply blur filter to give you this effect

8- Voila, a nice shadow, finally the apple white sign (i really don't know what they call it. but if you did't make it yourself, xcode will add it to your app and you can disable it anytime)

so this is the final product. if you have any comments or ideas for the logo design. don't hesitate to contact me. i still can do some changes, its not shipped yet, you know. 

Salam,
M.Aleem

No comments:

Post a Comment