These icons will be very useful when creating wireframes or tutorials covering touch gestures. As a Silverlight and Windows developer, I wanted to see how well these fit with the Windows Touch API. In the image to the right, I’ve mapped the icons to the Windows Touch Gestures. (Click the image to see it larger)
Importing the Gesturecons into Expression Blend to use in an application or a SketchFlow prototype is simple since Ryan has provided the icons in an Illustrator format.
To import the icons into Blend, follow these steps:
- Create a new or open an existing project
- Select File > Import Adobe Illustrator File…
- In the dialog select the “cs.ai” file from the “Gesturecons.zip” file
- The artwork will appear in your UserControl in a Canvas named cs
- Zoom out the artboard to see all of the icons by: typing Ctrl+-, using the mouse wheel over the artboard or using the Zoom dropdown in the bottom left corner
- In the Objects Panel, Delete the borders Canvas
- Right-click the icons Canvas and select Ungroup
- Select the first Path, scroll down to the last Path and holding Shift select the last Path
- With all of the Paths selected now, scale down the group of icons by dragging one of the corners of the outermost bounding box, hold Shift to lock to a relative scale.
- Reposition the group to fit on your UserControl and zoom back out to 100%
- To reset the cs Canvas, in the Properties Panel, set Width and Height to Auto
The Gesturecons are now available in XAML as reusable vector paths. The next steps you might take to make these easier to reuse include, grouping Paths that make up an individual icon and making them available as Resources.
Thanks again to Ryan Lee for creating and sharing the Gesturecons!