Metro-Design mit Photoshop - Tutorial

Wer heute noch denkt, dass "Metro" ein Untergrundtransportmittel in Paris ist, hat definitiv nicht mitbekommen, dass Windows 8 in den Startlöchern steht und dabei eine brandneue Benutzeroberfläche anbietet. In diesem Artikel werden die Merkmale von Metro beschrieben und in einem Photoshop-Tutorial die Erstellung des Designs nachvollzogen.

Anders bei "Aero" von Windows 7 wird diesmal nicht bloß ein wenig mit Effekten wie Transparenz und Spiegelung gespielt. Das Ziel des neuen Designs ist ein totalitär veränderte Wahrnehmung der Oberfläche. Da die Anzahl der Tablet-PCs und Geräte mit Touch-Bedienung rapide zunimmt, wurde diese Bedienphilosophie von Anfang an durchweg in der Konzeption berücksichtigt.

Hier ein erster Blick auf die Benutzeroberfläche "Metro" von Microsofts Windows 8:

Die neue Benutzeroberfläche "Metro" von Windows 8 (Beta).

Merkmale von Metro

Bei "Metro" handelt es sich um ein typographisches Design. Die Schriften stehen also im Vordergrund und werden als Ersatz für aufwändige Icons eingesetzt.
Alle Elemente sind kachelartig angeordnet - jede Kachel folgt dabei einem unsichtbaren Raster, damit die Fluchtlinien stimmig sind. Die Icons, wenn überhaupt vorhanden, werden nur noch minimalistisch dargestellt.

Die Sidebar (rechts) bietet Zugriff auf Einstellungen wie Desktophintergrund, Kachelabstand sowie die Auswahl der sichtbaren Widgets und Verknüpfungen. Ich habe die Bedienung an einem Touch-Monitor ausprobiert: Das Verschieben der Kacheln und das Wischen des Schirms (um zu den weiteren, nicht sichtbaren Widgets zu wechseln) funktionieren problemlos. Allerdings wünsche ich mir mehr Einstellungsmöglichkeiten und im Versuch haben die Widgets nur partiell meine getätigten Einstellungen beibehalten.

Die Metro-Oberfläche befindet sich (genau wie Windows 8 selbst) noch in der Entwicklungsphase. Der Fortschritt kann im (wirklich interessant geschriebenen) Blog des Microsoft-Entwicklerteams nachvollzogen werden.

Metro-Design mit Photoshop erstellen - Kurztutorial

Aus Interesse habe ich das Metro-Design mit Photoshop nachgebildet und ein wenig interpretiert. Das Ergbnis dieses Tutorials sieht am Ende wie folgt aus:

Ergebnis des PhotoShop-Tutorials "Metro-Design".

Schritt 1: Vorbereitungen - Überschrift und Raster

Ich erstelle ein neues Photoshop-Dokument mit der gewünschten Größe (z.B. 1024x768) und wähle eine Auflösung von 72 DPI.
Danach suche ich mir eine serifenlose, schlanke Schriftart (Century Gothic) für die Hauptüberschrift aus und platziere sie großzügig skaliert oben links am Bildschirmrand.
Anschließend muss das Raster für die Kacheln erstellt werden. Um die Rastereinheiten erkennen zu können und einen Rahmen zu bilden ich platziere ein sehr großes graues Rechteck auf der Arbeitsfläche. Jetzt wähle ich eine Rechteckform und ziehe diese mit gedrückter Shift-Taste zu einem Quadrat mit einer Seitenlänge von ca. 6cm (1). Jetzt dupliziere ich das Quadrat und färbe die Kopie neu ein (die Kopie muss in der Ebenenansicht über dem Original liegen).

Schritt 0: Erstellen einer Rastereinheit.

Jetzt ändere ich die Breite des Rechtecks so lange, bis das Rechteck das Quadrat genau halbiert (2). Dann überlege ich mir, welchen Kachelabstand ich haben möchte. Bei einem Kachelabstand von 16 Pixeln mache ich das Rechteck weitere 8 Pixel schmaler.
Das so gewonnene Rechteck benenne ich "Rasterelement" und erstelle ein Duplikat davon. Das Duplikat ("Rasterelement Kopie") verschiebe ich so lange seitlich, bis es die andere Hälfte meines Quadrats ausfüllt. Das Quadrat beinhaltet also zwei jeweils auf den Kanten liegende Rechtecke mit einem Spalt dazwischen (3).
Das Quadrat blende ich nun aus (4). Die zwei Rasterelemente dupliziere ich und platziere sie rechts neben dem Original. Dabei halte ich genau denselben Abstand zum linken Paar ein, wie auch der Abstand zwischen den beiden Rasterelementen groß ist. Dieser Abstand muss auch für den vertikalen Abstand eingehalten werden. Durch weiteres Duplizieren erhalte ich so am Ende ein großes Raster wie in der folgenden Abbildung.

Schritt 1: Raster erstellen.

Schritt 2: Die Sidebar

Für die Sidebar wähle ich einen starken Grauton (#595959) als Hintergrundfarbe. Mit perfekten Kreisen forme ich Schaltflächen, auf denen ich einfache Symbole mit niedrigem Detailgrad platziere. An Stelle von Kreisen würden rechteckige Elemente vermutlich besser passen, aber zumindest an dieser Stelle möchte ich mich vom Original abheben.
Ebenso habe ich oben rechts ein Viertel eines Kreises platziert - dies soll die "Schließen"-Schaltfläche werden. Sie ist groß gewählt, da viele (otpische) Touch-Displays Probleme mit der Fingererkennung in den Eckpunkten haben.

Schritt 2: Sidebar ergänzen.

Schritt 3: Die Kacheln

Jetzt wird das Raster mit den Kacheln gefüllt.Ich überlege mir, welche Elemente mein Startbildschirm enthalten soll und wieviel Platz diese jeweils benötigen.
Ich blende das Quadrat aus Schritt 1 wieder ein und dupliziere es. Ich lege die Duplikate passend auf das Raster und färbe jedes Kachelelement einzeln ein. Die Farben wähle ich dunkel genug, damit ich später einen weißen Text darauf platzieren kann.Wie im folgenden Bild zu sehen, kann die Fläche sich beliebig ausbreiten - es muss nur die Rasterung eingehalten werden.

Schritt 3: Kachelung wählen.

Schritt 4: Texte und Symbole

Die Kacheln wirken noch recht leblos. Mit Hilfe von einfachen Symbolen und sehr großen Schriftzügen garniere ich die Schaltflächen.
Bei Metro gibt es vier Arten von Schaltflächen:
a: große Symbole ohne Text
b: mittelgroße Symbole mit wenig Text, der hervorgehoben wird
c: kleine Symbole mit mehr Text
d: großes Bild ohne Symbole oder Text

Die Hervorhebung des Textes (Fall "b") bewirke ich durch das Platzieren eines schmalen schwarzen Rechtecks unter dem Text. Die Deckkraft setze ich auf 55% und die Füllmethode setze ich auf "Ineinanderkopieren".
Die Überschriften müssen zwar derselben serifenlosen Schriftart angehören, können aber verschiedene Schriftgrößen und Zeichenabstände haben. Microsoft spielt bei dem Design absichtlich mit verschiedenen Schriftgrößen pro Widget.

Schritt 4: Texte und Symbole ergänzen.

Schritt 5: Farbverlauf (optional)

Das originale Metro-Design besitzt keine Farbverläufe auf den Buttons. Ich bin jedoch ein Fan von dezenten Farbverläufen und finde diese Variante eine Spur hübscher.
Um den dezenten Farbverlauf zu bewirken, wähle ich eine der Kachelformen aus und öffne über das Kontextmenü das Menü "Fülloptionen...". In den Fülloptionen (= "Ebenenstil") aktiviere ich den Punkt "Verlaufsüberlagerung" und wähle als Füllmethode "Hart mischen" bei einer Deckkraft von 35%. Der Verlauf sollte einen Übergang von weiß zu transparent beinhalten. Ich spiele mit dem Slider "Skalieren", bis der Verlauf meinen Wünschen entspricht und achte darauf, dass der Verlaufswinkel exakt 90° beträgt.

Fülloptionen für den Farbverlauf.

Wenn ich den Dialog schließe, sieht das fertige Ergebnis wie folgt aus:

Schritt 5: Farbverlauf ergänzen (optional).