So erstellen Sie ein Cloud-Symbol in Adobe XD

Was Sie erstellen werden

Da Cloud Computing auf dem Vormarsch ist, ist ein einfaches "Cloud" -Symbol immer von Nutzen. In diesem Video erfahren Sie, wie Sie aus meinem Kurs "Icon Design With Adobe XD" einen erstellen.

So erstellen Sie ein Cloud-Symbol in Adobe XD

 

Erstellen Sie die Basisformen für die Cloud

Um zu beginnen, richten Sie ein 60 x 60 px Zeichenfläche und wählen Sie es aus und schalten Sie die ein Gitter in der Werkzeugleiste rechts. Das Raster ist auf 1 gesetzt, also gibt es für jedes Pixel eine horizontale und vertikale Richtlinie.

Wähle aus Ellipse-Werkzeug und einfach mit der linken Maustaste klicken und halten Verschiebung einen ziemlich kleinen Kreis zeichnen. Dann geh zu Bearbeiten> Duplizieren, Bewegen Sie die Kopie nach rechts oben und halten Sie sie gedrückt Verschiebung und skaliere es.

Ziehen Sie beide über und heben Sie die Auswahl der Füllung auf. Wählen Sie dann den kleineren Kreis und gehen Sie zu Bearbeiten> Duplizieren nochmal. Halt Verschiebung Klicken Sie mit der linken Maustaste und ziehen Sie es nach rechts, damit es perfekt in einer Linie bleibt. 

Dann geh zu Bearbeiten> Duplizieren nochmal. Machen Sie diesen neuen Kreis etwas größer, indem Sie halten Verschiebung, Klicken Sie mit der linken Maustaste und skalieren Sie von einer der Ecken aus. 

Wählen Sie nun das Rechteckwerkzeug und zeichnen Sie ein horizontales Rechteck. Dann über alles ziehen und zu gehen Objekt> Auf Pixelraster ausrichten. Das hilft nur, dass alles einrastet und sich insbesondere unten befindet.

Ziehen Sie dieses Rechteck etwas heraus und doppelklicken Sie auf die Form, wählen Sie die oberen beiden Ecken aus und ziehen Sie sie ein, wenn sie sich außerhalb des Wolkensymbols befinden. 

Erstellen Sie eine einzelne Wolkenform und passen Sie sie an

Das sieht im Moment wie ein Durcheinander verschiedener Formen aus. In Adobe XD können wir jedoch mehrere Formen zu einer einzigen Form kombinieren. 

Ziehen Sie einfach alles über und über die Optionen oben im Eigenschafteninspektor, wählen Hinzufügen, und es werden alle Formen zu einer Form kombiniert. 

Sie können das unten sehen, wir haben ein bisschen Anomalie. Aber das ist in Ordnung - einfach hineinzoomen, doppelklicken und versuchen, diesen Pfad ein wenig anzupassen. Wenn Sie diesen Kreis ein wenig verschieben, wird die Kurve ausgeglichen. 

Dann über alles ziehen und ein geben Rand von 2. Wählen Sie im Farbwähler die Farbe aus # 4A4A4A, und deaktivieren Sie die Füllung. Skaliere es ein wenig und halte Alt-Shift und Skalierung von der Mitte.

Wieder gehen Sie zu Objekt> Auf Pixelraster ausrichten wenn du musst. Sie können sehen, dass es etwas gemischt wird, sodass Sie möglicherweise einige Formen erneut anpassen müssen, wie zuvor. 

Fügen Sie das letzte Detail hinzu

Das letzte, was wir tun werden, ist eine kleine Kurve hinzuzufügen, um der Cloud ein bisschen mehr Details zu geben.

Wähle aus Stiftwerkzeug Klicken Sie einfach mit der linken Maustaste, klicken Sie erneut mit der linken Maustaste, um eine Kurve zu erstellen, und drücken Sie Flucht um es abzuschließen. Dann wählen Sie das gleiche aus # 4A4A4A Farbfeld aus der Farbauswahl. Und das Letzte, was wir tun können, ist, alles zu ziehen und zu gehen Objekt> Gruppe so dass wir es als ein Objekt bewegen können.

Sie werden sehen, dass unsere Cloud so leicht vom Pixelraster entfernt ist. Sie können also einfach alles ziehen und zu gehen Objekt> Gruppe alles zusammen gruppieren. Gehen Sie dann zur Werkzeugleiste und stellen Sie den y-Wert so ein, dass er nicht 15.5 ist, sondern auf 15 abgerundet wird. Nun werden Sie sehen, dass er sich jetzt gut an das Pixelraster anpasst.

Sehen Sie sich den vollständigen Kurs an

Im gesamten Kurs, Icon Design With Adobe XD, lernen Sie, wie Sie mit den in Adobe XD verfügbaren Werkzeugen verschiedene Symbole entwerfen. Neben der Cloud lernen Sie, wie Sie ein Telefon, einen Browser, ein Bleistiftsymbol und mehr erstellen und dabei nützliche Adobe XD-Kenntnisse erwerben.

Sie können diesen Kurs mit einem Abonnement von Envato Elements sofort absolvieren. Für eine einmalige geringe monatliche Gebühr erhalten Sie nicht nur Zugriff auf diesen Kurs, sondern auch auf unsere wachsende Bibliothek mit über 1.000 Videokursen und branchenführenden eBooks für Envato Tuts+. 

Darüber hinaus erhalten Sie jetzt unbegrenzte Downloads aus der riesigen Envato Elements-Bibliothek mit mehr als 440.000 kreativen Elementen. Erstellen Sie mit einzigartigen Schriftarten, Fotos, Grafiken und Vorlagen und sorgen Sie schneller für bessere Projekte.