Below is a collection of resources and design practice material that I have found useful when learning how to use Inkscape, with a focus on designing for iOS devices. You can of course use the skills you gain for other development efforts, Microsoft's fabulous Windows Phone comes to mind.
Inkscape reference
Inkscape is a vector shape drawing program, similar to Adobe's Illustrator. I personally prefer Inkscape to both Illustrator and Photoshop (but I know literally nothing about design, so please try the others out before you take my word for it). A great resource for beginners to get familiar with Inkscape is of course the Inkscape documentation page. I particularly recommend Tavmjong Bah's book.
Practice drawing
Becoming good at drawing is practice. You need a lot of it. Most of the really brilliant UI designers out there have probably been at it for years. Here are a few interesting tutorials to get you started, after which I guess the sky is the limit. One site in particular I would recommend anyone interested in seriously improving their UI skills is Dribbble; see how the masters do it and try replicating their ideas and designs.
Practice material:
1. Learn how to design a simple light bulb icon - Vector Tuts Article.
2. A nice tutorial on building stamps.
3. A fun post on building Pac-Man baddies.
4. Excellent video tutorials on YouTube by Tutor4u and HeathenX.
5. KalaaLog another nice blog by Mahesh with some interesting Inkscape designs.
6. 3d objects in Inkscape. There are few more nice tutorials on this site.
7. Another blog with some nice tutorials.
8. Another nice collection on this site.
9. Don't just restrict yourself to English language posts, there are a lot of good ones in other languages. For example, this post in German.
10. Excellent 2d game art tutorials.
Icon design tutorials
The window to your users; your display on the marketshelf. Icons are extremely important. A few interesting articles on designing these.
1. Icon design for iOS from Cocoa with love (absolutely brilliant articles).
Part 1.
Part 2.
2. Here's a sitepoint article on creating iPhone icons using Adobe Illustrator. You can do pretty much everything in Inkscape as well. Here's another that uses Photoshop, try doing this in Inkscape.
Tab bar icons
A lot of iOS apps need tab bars, here are a few tutorials to help you with icons for these tab bars.
1. Two excellent articles on tab bar icons using Inkscape.
Part 1.
Part 2.
2. This is done using Omni-Graffle. Try it in Inkscape.
Creating wireframes
An article on mocking up your UI's with Inkscape.
Exporting images
Inkscape is a vector shape drawing tool, which differs from raster based tools like the GIMP in the fact that you can scale your drawings to any size you want. This is great when doing art work for iOS and other mobile platforms where you have a variety of screen sizes to cater to. Vector shapes do however have a drawback in that sometimes scaling art work results in images that are sometimes blurry and not as crisp as raster images. Inkscape sadly does not allow you to re-touch individual pixels like Photoshop. Moreover Inkscape anti-aliases images when it exports them as bitmaps; this is what causes blurry images. You can however snap your image elements to pixel boundaries when drawing them for clearer exports. Miguel de Icaza explains exactly how to do this. This becomes particularly important when exporting images for high resolution displays like the Retina display.
These links are just to get you started. There are a lot of sites dedicated to design out there. In your searches do not restrict yourself to searching for Inkscape, but look for ideas created using Photoshop, Illustrator etc. and then try getting them down in Inkscape. For example Bjango has some excellent articles. These talk about Photoshop primarily, but the ideas are easily assimilated. Here's another great collection of design tutorials. Here's another collection of videos. Here's a site that focuses on the GIMP. There are a lot of these blogs and collections out there just search for them, and keep practicing.
Inkscape reference
Inkscape is a vector shape drawing program, similar to Adobe's Illustrator. I personally prefer Inkscape to both Illustrator and Photoshop (but I know literally nothing about design, so please try the others out before you take my word for it). A great resource for beginners to get familiar with Inkscape is of course the Inkscape documentation page. I particularly recommend Tavmjong Bah's book.
Practice drawing
Becoming good at drawing is practice. You need a lot of it. Most of the really brilliant UI designers out there have probably been at it for years. Here are a few interesting tutorials to get you started, after which I guess the sky is the limit. One site in particular I would recommend anyone interested in seriously improving their UI skills is Dribbble; see how the masters do it and try replicating their ideas and designs.
Practice material:
1. Learn how to design a simple light bulb icon - Vector Tuts Article.
2. A nice tutorial on building stamps.
3. A fun post on building Pac-Man baddies.
4. Excellent video tutorials on YouTube by Tutor4u and HeathenX.
5. KalaaLog another nice blog by Mahesh with some interesting Inkscape designs.
6. 3d objects in Inkscape. There are few more nice tutorials on this site.
7. Another blog with some nice tutorials.
8. Another nice collection on this site.
9. Don't just restrict yourself to English language posts, there are a lot of good ones in other languages. For example, this post in German.
10. Excellent 2d game art tutorials.
Icon design tutorials
The window to your users; your display on the marketshelf. Icons are extremely important. A few interesting articles on designing these.
1. Icon design for iOS from Cocoa with love (absolutely brilliant articles).
Part 1.
Part 2.
2. Here's a sitepoint article on creating iPhone icons using Adobe Illustrator. You can do pretty much everything in Inkscape as well. Here's another that uses Photoshop, try doing this in Inkscape.
Tab bar icons
A lot of iOS apps need tab bars, here are a few tutorials to help you with icons for these tab bars.
1. Two excellent articles on tab bar icons using Inkscape.
Part 1.
Part 2.
2. This is done using Omni-Graffle. Try it in Inkscape.
Creating wireframes
An article on mocking up your UI's with Inkscape.
Exporting images
Inkscape is a vector shape drawing tool, which differs from raster based tools like the GIMP in the fact that you can scale your drawings to any size you want. This is great when doing art work for iOS and other mobile platforms where you have a variety of screen sizes to cater to. Vector shapes do however have a drawback in that sometimes scaling art work results in images that are sometimes blurry and not as crisp as raster images. Inkscape sadly does not allow you to re-touch individual pixels like Photoshop. Moreover Inkscape anti-aliases images when it exports them as bitmaps; this is what causes blurry images. You can however snap your image elements to pixel boundaries when drawing them for clearer exports. Miguel de Icaza explains exactly how to do this. This becomes particularly important when exporting images for high resolution displays like the Retina display.
These links are just to get you started. There are a lot of sites dedicated to design out there. In your searches do not restrict yourself to searching for Inkscape, but look for ideas created using Photoshop, Illustrator etc. and then try getting them down in Inkscape. For example Bjango has some excellent articles. These talk about Photoshop primarily, but the ideas are easily assimilated. Here's another great collection of design tutorials. Here's another collection of videos. Here's a site that focuses on the GIMP. There are a lot of these blogs and collections out there just search for them, and keep practicing.
No comments:
Post a Comment