June 24, 2015

Free Vector Icons in Material Design

Materialdesignicons.com

Good morning,

To be honest, I can't wait for 4k screens to really hit the market! However, high resolution displays, like the ones used on most phones these days, lead to a major new challenge for GUIs: free scalability to fit every resolution. Especially in regards to icons, many applications still struggle to meet this demand.

To anyone searching for vector icons which perfectly scale to any resolution or DPI, I can highly recommend materialdesignicons.com. There you will find a large variety of icons including (but not limited to) most typical application functions and widely used software icons. All icons are available in a number of formats, e.g. SVG or Web-Font and even XAML.

There are various ways to include XAML-icons in your program (materialdesignicons.com shows one for example). However, in my opinion the best way is to create a ResourceDictionary for the icons and add every icon as a DrawingImage containing a GeometryDrawing.

<DrawingImage x:Key="IconSave">
  <DrawingImage.Drawing>
    <DrawingGroup>
      <DrawingGroup.Children>
        <GeometryDrawing Brush="Black" Geometry="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
      </DrawingGroup.Children>
    </DrawingGroup>
  </DrawingImage.Drawing>
</DrawingImage>

The beauty of this is the ease with which you can then use the icon anywhere in your GUI:

<MenuItem Name="Save"
Header="{x:Static ms:Resources.MainMenu_Save}">
<MenuItem.Icon>
<Image Source="{StaticResource IconSave}" />
</MenuItem.Icon>
</MenuItem>

To get the geometry path for the GeometryDrawing from a XAML icon, just right click on the icon in the meterialdesignicons preview. Select "View XAML" and it is right there in the Paths data attribute:

<Viewbox Width="48" Height="48">
<Canvas Width="24" Height="24">
<Path Data="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" Fill="Black" />
</Canvas>
</Viewbox>

As for using the web font, you can find a great guide at materialdesignicons.com/getting-started.

As of writin this article, all icons on materialdesignicons.com are released under the SIL Open Font License, Version 1.1.

January 31, 2015

Texturing Workshop with Jamin Shoulet

Texturing Workshop with Jamin Shoulet (Youtube)

Good morning,

anyone interested in drawing game textures might want to take a look at the two-part texturing workshop with Jamin Shoulet (Blizzard and others), provided by the Academy of Art University.

In this workshop Jamin shows how to create some basic textures like stone and wood. He explains very well what to pay special attention to and why. Focus of the workshop are stylised (e.g. comic-like) textures as can be seen in a lot of the latest games.

Texturing Workshop with Jamin Shoulet Pt. 1 (Youtube)

Texturing Workshop with Jamin Shoulet Pt. 2 (Youtube)

As per usual in the professional designer scene, Photoshop is the tool to go to. However, the main points of the workshop can easily be followed using any decent graphics software like GIMP or Paint.NET. Also, a graphics tablet might be of use, but can be lived without (drawing is more fun with a tablet though, for sure).