Contents of Icon O Matic Tutorial Video

Feedback Ideas
1

ICON O MATIC TUTORIAL VIDEO
Given below are the topics I would cover in the tutorial video I’m about to make for Google Codein :
About Icon O Matic
Bitmap VS Vector Graphics
Overview of IOM’s window
About Paths (what do they do, path menu, path properties)
About Shapes (what do they do, shape menu, shape properties)
About Styles (what do they do, style menu, style properties)
About LOD (Level of Detail)
About Transformers (what do they do, transformer menu, transformer properties)
Creating an icon
Saving and exporting an icon

What do you think of this list. Please give me your views and opinions. I’m open to suggestions and improvements

Tejpunj Raju
(dax007)

2 Likes
2

How to add a icon on a binary would be of interest too:

I hope this will be match any more: http://besly.de/menu/search/archiv/pref/haikuicon_eng.html

1 Like
3

Ooh, this looks good, I could use a refresher on LOD and transformers. I usually just tinker till I get it right.
How about:
Icon guideline basics- perspective, colors, shadows, etc. Nothing in depth just an overview of good design to make icons fit in the Haiku universe.
Importing from other icons.

1 Like
4

 We could make a second video task for “advanced topics” like how to make style conforming icons and how to actually use those icons, if it gets too long.
Better two in-depth than one rushed video. :slight_smile:

About Icon O Matic
Bitmap VS Vector Graphics

I’d keep these really short.

About Paths (what do they do, path menu, path properties)
About Shapes (what do they do, shape menu, shape properties)
About Styles (what do they do, style menu, style properties)

Make sure you explain those in a real world example while creating it. E.g. create the Path first. Then concentrate on setting points, explain how to set straight lines, bezier, remove one bezier handle, how to make a corner point of a bezier point etc.
Then show that you need a Shape and a Style to make it actually visible. etc.

Show the different styles, gradients, colour. resze and move the gradient box etc.

Then the transformers…

Drag&drop to re-order the shapes. Shapes with more than one path, Shapes with holes…

There’s so much to show. :slight_smile:

5

OK sir, I’ll keep that in mind

6

Looks good. One thing you might want to add at the end is importing SVG images. I often find that the most convenient way to create an icon that looks the way I intend is to build it in Wonderbrush first, then transfer the SVG to I-o-M. There are differences and deficiencies (like all paths and shapes being unnamed, and no common paths) but one can tidy it up as much as one wants from there.

7

“advanced” tricks: you can drag styled text from StyledEdit into IOM to compensate for the lack of a text tool inside the app.

8

Also important to show that aligning the points of the path on the grid is very important to get sharp edges. For example like this:

  • Set the “Snap to grid” to off.

  • Create a shape+path+style

  • Select the path and try to create a square.

  • Zoom in to see how blurry the adges are.

  • Activate “Snap to grid” and move the vertices to have them snap to the nearest point on the grid to show show sharp it all becomes.