Now that the Google Code-in 2014 tasks for 8 HID (Human Interface Design) icons are complete, its time to assemble them into an icon set. This involves unifying all the icons to a common artistic style, cleaning up remaining QA issues, and preparing them for programmatic use.

There are multiple copies of this task intended to be completed by different students, students will not be assigned the same icon set task twice (but are encouraged to work on multiple different sets, eg, HID and Network). Additionally, as this task requires experience with our design constraints, you must have completed at least 2 SVG tasks before starting this task.

If multiple students complete the set in different ways, they will be evaluated to each other to pick which one we'll use as a default. Students are allowed to reuse each other's work in this matter, however, alternative sets should be done to different artistic styles.

Its expected (but not required) that during the course of this task you will have to redesign at least one of the icons from scratch. However, as you've alreday done icon tasks before this should be much easier for you now.

Purpose

These icons are intended for use with playerd, a cross-platform service for managing input in a multiuser environment. You may be familiar with similar systems included in modern Microsoft, Nintendo, and Sony game consoles which map game controllers to players (eg, players 1-4), allow game controllers to be re-assigned, and allow games to be written without low-level hardware code.

Each icon represents a type of human interface device and will represent that device on screen. These 8 icons are only a starting point, there may eventually be dozens of different HID icons to represent variants and specific devices. For example, we currently only have "game controller" where we may eventually have separate icons for an XBox 360 controller, Dualshock 3 controller, generic two thumbstick gamepad, etc.

Design Specs

While we had some design constraints listed for each icon task, some of these were not followed perfectly and others not defined at all. For an icon set to be complete, all of the following specs must be met:

1. Each icon must be less than 512 bytes
2. Each icon must be clearly identifyable at 16x16 and attractive at 64x64
3. Each icon must be width="64" height="64"
4. Each icon must be centered and scaled properly
5. Each node must land exactly on a pixel (no decimal places)
6. Each line of XML must not exceed 64 characters
7. There must be no style information given (black on clear only)
8. There must be no metadata or XML comments included

Much of this can be done in a graphical editor, but you will need to review and potentially edit these SVG files in a text editor. If you're familiar with editing HTML, you'll find the syntax familiar.

EDITING SVG

SVG is XML and can thus be viewed and edited as text. Much like a graphical HTML editor, graphical SVG editors often add unnecessary content, comments, and bloat which is especially pronounced in these small icon files.

<?xml version="1.0"?>
<svg width="64" height="64"
 xmlns="http://www.w3.org/2000/svg">
<path d="m 8,40 8,0 0,4 -8,0 z m 12,0 20,0
 0,4 -20,0 z m 24,-4 4,0 L 48,24 44,24 z M 28,36
 l 4,0 0,-12 -4,0 z m 8,0 4,0 0,-12 -4,0 z m
 -16,0 4,0 0,-12 -4,0 z m -8,0 4,0 0,-12 -4,0 z
 M 52,12 12,12 C 0,12 0,12 0,24 l 0,16 c 0,12
 0,12 12,12 l 40,0 c 12,0 12,0 12,-12 L 64,24 C
 64,12 64,12 52,12 z M 4,48 4,20 l 56,0 0,28 z m
 52,-4 -12,0 0,-4 4,0 0,-4 4,0 0,4 4,0 z M 8,28
 l 44,0 0,-4 4,0 0,4 0,4 -48,0 z"/>
</svg>

With 64 nodes this keyboard icon may be the most complex HID icon you'll encounter, but its still under 512 bytes.

Note that even at 16x16 the checkered key pattern still looks crisp, not a grey blur caused by anti-aliasing:

The reason these design specs are important is these icons are likely to be embedded in playerd source code and included in the compiled binary for every platform playerd supports. With 8 icons that's only 4k, but once we start adding icon variants that can grow very quickly.

Artistic Style

You determine the artistic style for your icon set, but you must define this style and conform each icon in your set to it. If picked, future GCI HID icon tasks will be required to conform to this same style so the new icons match.

Should corners be rounded or square? Should the outside border of icons be thicker than 4px to really set it apart? Should thumbsticks be empty circles, or a black circle inside an empty circle? How should buttons be displayed?

It is ok for finer detail (eg, thin clear edge around a button or thumbstick) to disappear when scaled down, this is expected. You may also break apart icons (eg, PS Move vs PS Nav) or create your own new variants as it makes sense to.

Because these icons will be affected by theme settings, you should check your icon set as a light color on dark, and other color combinations, to ensure it'll still look good regardless to where its used.

Write up your style in a short text file called STYLE in the same directory as your modified icons.

While working on this task you should join and remain in #CopyleftGames on Freenode to get help, feedback, and guidance from mentors and other developers. Updates which may affect your work are also announced here as they happen.

Add your work to a new directory in the icons repository. When you're done, commit your work and post the resulting changeset url to this task.