Reduzierte Farben und Formen – das macht den Flat-Stil aus. Alles stark reduziert und sehr minimalistisch. In diesem Tutorial zeige ich euch drei Beispiele des Flat-Stils anhand von Icons für eine Office-Serie. Einige Ordner, ein gelochtes Blatt Papier sowie eine Leinwand für Präsentationen.

Gelochtes Papier

Erstelle auf einer neuen Ebene mit dem Auswahl-Rechteck-Werkzeug die Grundform eines DIN A4-Blatts. Fülle die Auswahl mit Weiß. Wähle dann mit dem Polygon-Lasso-Werkzeug eine Ecke aus und gehe im Menü auf Ebene > Neu > Ebene durch Ausschneiden. Es folgt Bearbeiten > Transformieren > Um 180 Grad drehen.

Damit die Ecke gut sichtbar ist, gehst du im Menü auf Ebene > Ebenenstil > Farbüberlagerung. Stelle da die Farbe auf einen hellen Grauton. Aktivieren wieder die Ebene mit dem Blatt und gehe im Menü auf Ebene > Ebenenmaske > Alle einblenden. Für die Lochung wählst du einen kleinen Kreis mit dem Auswahlellipse-Werkzeug aus.

Halte dabei die Umschalttaste gedrückt, um die Selektion kreisrund aufzuziehen. Drücke die Entfernentaste bei schwarzer Hintergrundfarbe, um diesen Bereich in der Maske mit Schwarz zu füllen, was einer Sichtbarkeit von 0% entspricht. So entstehen auch die weiteren Löcher, in dem die Auswahl einfach über die Pfeiltasten nach unten bewegt wird.

Leinwand für Präsentationen

Nutze das Rechteck-Werkzeug, um die Grundfläche der Leinwand aufzuziehen. Mit dem Abgerundeten-Rechteck-Werkzeug entstehen die zwei Linien ober und unterhalb der Leinwand. Stelle den Radius so hoch ein, dass die Ecken schön abgerundet sind.

Hinter diesen Ebenen entsteht mit dem Ellipse-Werkzeug ein Kreis. Von diesem gehen wieder mit dem Abgerundeten-Rechteck-Werkzeug drei Standbeine aus. Zeichne zunächst das Bein in der Mitte ein. Die zwei weiteren werden über Strg+J kopiert und dann über Bearbeiten > Transformieren > Drehen in Position gebracht.

Die Leinwand sollte natürlich nicht so leer bleiben, sondern mit einer schönen Präsentation gefüllt werden. Ziehe dazu mit dem Ellipse-Werkzeug einen Kreis auf. Auf einer weiteren Ebene zeichnest du mit dem Polygon-Lasso einen ersten Abschnitt ein, der mit einer Farbe gefüllt wird. Gehe dann auf Ebene > Schnittmaske erstellen, damit dieser Abschnitt der Form des Kreises folgt. So könntest du noch einen zweiten Abschnitt folgen lassen.

Drei Ordner in Reihe

Um drei Ordner in Reihe zu erstellen, musst du zum Glück nur den ersten erzeugen. Die weiteren werden kopiert und in der Farbe und Position angepasst. Ziehe zum Start mit dem Rechteck-Werkzeug die Grundform auf. Für das Greifloch nutzt du das Ellipse-Werkzeug: mit einem dunkleren Ton der Farbe deines Ordners und bei gehaltener Umschalttaste.

Kopiere den Kreis über Strg+J, drücke Strg+T für das Freie Transformieren und verkleinere die Kopie etwas. Ein Doppelklick auf die Ebenenminiatur ermöglicht die Anpassung der Farbe. Der kleinere Kreis wird auf Weiß gestellt. Mit dem Abgerundeten-Rechteck-Werkzeug entsteht nun ein Label. Als „Beschriftung“ dienen uns drei dickere Linien, die mit dem Rechteck-Werkzeug in der Farbe des Ordners erstellt werden.

Wähle in der Ebenenpalette bei gehaltener Umschalttaste zunächst die erste Ebene, dann die letzte Ebene des Ordners an und drücke Strg+G zum Gruppieren. Strg+J kopiert die komplette Ebene. Positioniere die Kopie mit dem Verschieben-Werkzeug etwas nach rechts. Ein Doppelklick auf die Ebenenminiaturen der Kopien ermöglicht es, die Farben anzupassen. Eine weitere Kopie wird ebenfalls in der Farbe angepasst, dann aber noch über Strg+T etwas schräg gestellt.

Fazit

Die drei Beispiele zeigen deutlich, dass im Flat-Design geometrische Grundformen die größeren Formen bilden. Wer nun weitere, freie Icons im Flat-Stil sucht, wird bei speckyboy.com fündig. Echte Büroartikel bestelle ich übrigens bei Otto Office, die ihr hier entdecken könnt.