Tutorial on how to make icons

[roryaronson]

I would love to help make these, but don't have the experience. What programs are best? What are the shapes made of? Lines? Spline curves? Pixels? What is the general pattern people take to go from crop name to crop icon?

I'm not looking for anything fancy. I think just a rough outline and some pointers would be nice. A screencast of making an icon would be killer.

[simonv3]

👍 this would be fantastic. Aside: I think it'd be a great resource for opensourcedesign.net

[neynah]

I personally use Illustrator but any vector program would work. Alternatively, if you're not comfortable with creating vectors you can feel free to just sketch on paper or put something together in Photoshop/Inkscape, or another program and I/ someone else can vector it for you. You can also try out my friend's web app Vectr. I think a good place to start would be to google up references of whichever veggie/fruit you are going to create and get an idea of how you want yours to look. Then you can go ahead and create basic shapes and combine them. There are some useful tutorials here on creating icons in general.

Feel free to ask me if you need some help and when I get a chance I can try to write a generic tutorial. :)

[andru]

I use Sketch. Here's a tutorial covering some basics: https://medium.com/@sokratus/how-to-create-a-flat-styled-icon-in-sketch-3-27c4bd09989

and another: http://medialoot.com/blog/how-to-create-a-cartoon-bomb-icon-with-sketch-app/

[jsimplicio]

I personally use Sketch as well but Illustrator is so similar that instructions for one would pretty much work for the other. If anyone wants to jump in quickly, I recommend making the smallest size icon first at 24px as detailed as possible in that size like @andru's guide recommends.

Sketch automatically aligns things to grid I believe, Illustrator you might have to find that option in the dropdowns. Aligning your shapes to grid when it comes to icons is always very very good. Space things out based on the amount of squares in a grid and try to make things sized based on the squares too. For example on this corn icon, see how my shapes take specific amounts of squares? Then see the version of it pixelated it works out very evenly, the shapes fill squares as planned, which usually means it will look good at tiny bitty sizes.

*Also note, on Sketch when you make something really small, the grid for that size shows up immediately like this.