Process/Planning

Create abstract icons like a sphere and a box to give an idea about perspective and lighting.

Define the virtual environment: Lighting and surfaces that are hinted at in reflections. It seems Human and Oxygen assume light straight from above. This simplifies shadows. I think the default theme and the icons should assume the same light direction.

Look & Feel

• Perspective - Right now we will copy Oxygen and change where needed. This still needs defined for ourselves but I feel a mix of perspectives based on, say, use or type will work. It should also be noted that the perspective can change at smaller sizes to better fit that view.
• General Style - "Hyper-realistic" (more perfect than real life) is the design goal. You should want to reach out and touch the icons. Each icon should really show much work has gone into it. The difference between hyper-realistic and photo-realistic is the difference between a normal photo and a "photoshopped" photo. Where applicable it should appear as if the icons are made of a real-world material.
• Shadowing - This needs to be very consistent. Also should shadows be dropped under 32px in favor of an outline?

Workflow

We will be using this "One Canvas Workflow" idea from jimmac. All the needed tools will be in the BZR branch along with the SVG template linked below.
People will be able to submit icons created with the template via the Ubuntu Artwork mailing list or directly to BZR if you've been approved.

Once the icons are uploaded to BZR, the preview images and source SVGs on the icon wiki pages will automatically update.

• All source icons will be in .SVG form created at the size they are meant to be used.
• Sizes = 16px, 22px, 24px, 32px, 48px and scalable. Scalable to be created at 128px.
• 16-48px will be rendered in the built package with .svg used for anything larger.

Step by step

1. Download the SVG template.

2. Place the template in ~/.inkscape/templates/ (or ~/.config/Inkscape/ if you are using Inkscape from current SVN). It should then be visible in Inkscape's File → New menu. Alternatively, just open the template file directly, but take care to not change it.

3. Enable the Layers palette (Shift+Ctrl+L or in via menu: Layer → Layers). You should see 3 layer with sublayers now:

   • instructions
   • path/template
     • plate
   • palette
     • Color cues
     • ...
4. Rename the "path/template" layer to match path and icon-name of the icon you want to work on (e.g. "actions/gnome-help")
5. Unlock the renamed layer (click on the lock symbol) to create your icon in it.

6. Create 2 text objects in plate layer. Their content have to be the context (e.g. actions) and icon-name (e.g. gnome-help). Assign the labels context and icon-name to them. To do so, right-click a text object, choose Object Properties, enter the label and hit Set.

7. If icon is final you can remove the Instructions and palette layers.

8. Hide the plate layer (click on eye symbol).

9. Then go to: File->Vacuum Defs. This will remove any stray objects.

10. Save your work with the name of the icon as filename (e.g. gnome-help)

Links

• Discussion

• The Icons

• Submissions

• Development Timeline

• Launchpad project page: Breathe Icons