24. June 2015

Freie Vektor-Icons in Material Design

Materialdesignicons.com

Ehrlich gesagt kann ich es kaum abwarten, dass 4k-Monitore endlich überall verwendet werden. Allerdings bringen hochauflösende Bildschirme, wie sie heute auch in den meisten Smartphones eingesetzt werden, eine große Herausforderung mit sich: freie Skalierbarkeit, um jeder Auflösung gerecht zu werden. Gerade in Hinblick auf Icons haben viele Anwendungen hier noch Defizite.

Allen, die Vector-Icons suchen, welche sich perfekt an jede Auflösung und DPI anpassen, kann ich materialdesignicons.com empfehlen. Dort findet sich eine große Auswahl an Icons für die häufigsten Applikationsfunktionen, Softwares und mehr. Alle Icons stehen in verschiedenen Formaten zur Verfügung, so bspw. SVG, Web-Font und sogar XAML.

Es gibt verschiedene Wege ein XAML-Icon in einem Programm einzubinden (marterialdesignicons.com zeigt einen davon). Allerdings ist der beste Weg meiner Meinung nach die Erstellung eines ResourceDictionaries, in das jedes Icon als DrawingImage eingefügt wird, das ein GeometryDrawing enthält.

<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>

Das Schöne an diesem Vorgehen ist die Einfachheit, mit der sich das Icon überall in der GUI einfügen lässt:

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

Um den Pfad für das GeometryDrawing aus dem XAML Icon zu kriegen, macht man einen Rechtsklick auf das jeweilige Icon in der Vorschau von materialdesignicons. Der Menüpunkt "View XAML" zeigt den XAML-Code zum Einbinden des Icons an, aus dem das Data-Attribut des Path einfach herauskopiert werden kann.

<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>

Zur Verwendung der Web-Font gibt es eine sehr gute Anleitung unter materialdesignicons.com/getting-started.

Zum Zeitpunkt der Erstellung dieses Artikels, werden alle Icons auf materialdesignicons.com unter der SIL Open Font License, Version 1.1 angeboten.

31. January 2015

Texturing Workshop mit Jamin Shoulet

Texturing Workshop mit Jamin Shoulet (Youtube)

Wer sich für das Zeichnen von Texturen für Spiele interessiert, dem kann ich den zweiteiligen Texturing Workshop mit Jamin Shoulet (u.a. Blizzard) empfehlen. Bereitgestellt von der Academy of Art University.

Jamin zeigt hier wie man einige grundlegende Texturen (bspw. Stein und Holz) erstellen kann und erklärt sehr gut, worauf man besonders achten muss, und warum. Der Fokus liegt bei diesem Workshop auf stilisierter (also Comic-artiger) Darstellung, wie man sie mittlerweile bei vielen Spielen findet.

Texturing Workshop mit Jamin Shoulet Pt. 1 (Youtube)

Texturing Workshop mit Jamin Shoulet Pt. 2 (Youtube)

Wie im professionellen Umfeld üblich, wird in den Videos Photoshop eingesetzt, allerdings lassen sich die Hauptpunkte des Workshops auch mit jedem anderen brauchbaren Zeichenprogramm wir GIMP oder Paint.NET nachvollziehen. Ein Zeichentablet ist ebenfalls hilfreich, aber nicht zwingend notwendig (auch wenn Zeichnen deutlich mehr Spaß mit einem Tablet macht).