Setzen Sie in Adobe XD CC Grundformen zu Icons für User Experience Designs zusammen.
mobile-menu-icon_1000x560

In diesem Tutorial wird ein Icon mit Notizblock und Stift erstellt. Laden Sie die Beispieldatei herunter, um die Schritte in diesem Tutorial nachzuvollziehen, oder wenden Sie die hier beschriebenen Funktionen auf ein eigenes Icon-Design an. Die Ausgangsform für den Notizblock ist ein Quadrat, das eine Linie enthält. Der Stift beginnt mit einem Rechteck.

mobile-menu-icon_step1

Achten Sie auf Elemente, die sich zum Kopieren eignen, wie die Linie des Notizblocks. Mit einem Wiederholungsraster lassen sich Elemente mit gleichmäßigen Abständen replizieren.

mobile-menu-icon_step2

Runden Sie bei der Stiftform die Ecken an einem Ende ab, um einen Radiergummi darzustellen. Mit einem Doppelklick konvertieren Sie die Form in einen Pfad. Fügen Sie für die Stiftspitze einen Punkt hinzu, um das Design um eine neue Form zu erweitern. Mit ein paar zusätzlichen Linien nimmt der Stift langsam Gestalt an. Vergessen Sie nicht, Elemente zu gruppieren, um sie leichter als Einheit im Design verschieben zu können.

mobile-menu-icon_step3

Sobald die einzelnen Grafiken fertig sind, folgt der Feinschliff. In diesem Beispiel wurde der Stift gedreht und auf dem Notizblock positioniert. Wichtig war dabei die Anordnung der Elemente: Der Stift befindet sich im Vordergrund, der Notizblock im Hintergrund. Anschließend wurden ein weißer Rahmen und eine grüne Fläche definiert.

mobile-menu-icon_step4

Betrachten Sie das Ergebnis im folgenden Appdesign.

mobile-menu-icon_step_5

Nutzen Sie diese Techniken für andere Icon-Projekte.

11/06/2018

Beitrag von: Serge Vasil

Adobe Stock-Anbieter: Leonid

War diese Seite hilfreich?