Icons mit langen Schatten für Android erstellen

Das Wichtigste zuerst: Soweit ich verstanden habe, geht es bei Ihrer Frage nicht um GIMP, sondern um

Wie erstelle ich ein Materialsymbol mit kostenloser Open-Source-Software?

(da du auf Linux bist). Wenn das richtig ist, passen Sie bitte den Titel Ihrer Frage entsprechend an.

Wie andere bereits erwähnt haben, ist Inkscape das Programm der Wahl , da Sie damit genau die Art von Vektorillustration erstellen können, nach der Sie suchen, und das Ergebnis dann für mehrere Geräteauflösungen exportieren können. Der von Ihnen beschriebene Stil nennt sich Material Design und zeichnet sich durch eine reduzierte, flache Erscheinung mit langen Schatten aus .

So erzeugen Sie das gezeigte Symbol in Inkscape:

0. Laden Sie Inkscape herunter und installieren Sie es . Beim ersten Start sollte ein neues, leeres Dokument geöffnet sein.

1. Erstellen Sie mit dem Ellipse-Werkzeug ( ) den Hintergrundkreis mit einer Größe von 192 x 192 Pixel . Sie können das Seitenverhältnis der Ellipse auf einen perfekten Kreis beschränken, indem Sie während des Zeichnens drücken. Nachdem Sie den Kreis gezeichnet haben, können Sie auch dessen Breite und Höhe ( und ) in den Objekteigenschaften oben bearbeiten. Wählen Sie eine geeignete Füllfarbe aus der Palette unten oder direkt aus dem Bild (Sie können das Originalbild mit importieren und dann mit dem Pipettenwerkzeug ( ) eine Farbe aus dem importierten Bild auswählen).F5CtrlWHCtrl+IF7

Hinweis: Da Sie eine Vektorzeichnung erstellen, ist die Größe nicht so relevant (Sie können das Vektorsymbol in jeder Auflösung exportieren/rastern). Es empfiehlt sich jedoch, Ihre Zeichnung mit einer Auflösung zu erstellen, die der höchsten gewünschten Ausgabeauflösung entspricht (in diesem Fall xxxhdpifür Android).

1. Erstellen Sie die Hauptsymbolform innerhalb des Kreises. Da dies für jedes Symbol ein anderer Prozess ist, werde ich hier nicht zu sehr ins Detail gehen. Um das Android-Maskottchen zu erstellen, verwenden Sie eine Kombination aus Kreisen ( F5) und abgerundeten Rechtecken ( F4, legen Sie den Randradius in den Objekteigenschaften fest). Sie können Formen "zusammenkleben", indem Sie sie ( F1und Shift + Clickdie Objekte) auswählen und dann "Pfad" > "Vereinigung" wählen. Einige Formen (die Antennen des Maskottchens) müssen gedreht werden (klicken Sie zweimal auf das Objekt und verwenden Sie dann die Drehgriffe). Beachten Sie, dass Sie Formen mit duplizieren und mit und Ctrl + Dhorizontal/vertikal spiegeln könnenhv, bzw. Für den Kopf können Sie eine Ellipse erstellen, dann ein Rechteck, das den unteren Teil bedeckt, beide auswählen und den unteren Teil mit "Pfad"> "Unterschied" wegschneiden. Ähnlich verwenden Sie für die Augen des Maskottchens Kreise, ziehen diese dann von der kreisförmigen Kopfform ab usw.

2. Erstellen Sie die Schattenform. Die Materialdesign-Schatten sind einfache 45°-Schatten, die nach Südosten zeigen. Verwenden Sie zum Zeichnen des Schattens das Werkzeug „Gerade Linie “ ( Shift + F6) und zeichnen Sie einen zusammenhängenden Umriss, der jeden nordöstlichen äußersten Punkt Ihrer Hauptsymbolform berührt. Klicken Sie, um einen Scheitelpunkt zu platzieren. Wenn Sie das Liniensegment zeichnen, das einen sichtbaren Teil der Form nach Südosten erzeugt, drücken Sie Ctrl, um die Linie auf einen Winkel von 45° zu beschränken. Achten Sie darauf, dass sich Ihr Umriss über die südöstliche Grenze des Kreishintergrunds hinaus erstreckt. Fahren Sie fort, bis Sie die Form geschlossen haben (den letzten mit dem ersten Scheitelpunkt verbunden haben).

UPDATE : Falls es Ihnen schwerfällt, eine exakte Platzierung der 45°-Liniensegmente zu erreichen, habe ich in diesem Blogbeitrag nun eine genauere Erklärung bereitgestellt .

Hinweis: Bei einfachen Symbolen sollten Sie alle relevanten Teile der Symbolform mit einer Schattenform abdecken können, bei komplexeren benötigen Sie möglicherweise mehrere Formen, was auch in Ordnung ist. Die rote Form in Schritt 3 oben zeigt Ihnen, wie Sie es für das Android-Maskottchen tun.

Hinweis: Höchstwahrscheinlich hat Ihre Schattenform nach dem Zeichnen einen Strich und keine Füllung. Um dies zu ändern, wählen Sie eine Füllfarbe aus der Palette unten aus (vorerst ist jede Füllfarbe in Ordnung, z. B. ein helles Rot) und entfernen Sie dann den Strich, indem Right ClickSie die Farbe „Strich“ unten links auswählen und „Strich entfernen“ wählen.

4. Beschneiden und passen Sie die Schattenform an . Wählen Sie den Hintergrundkreis aus und duplizieren Sie ihn ( Ctrl + D). Die neu erstellte Kopie sollte oben liegen und alle anderen Formen überdecken. Shift + Clickdie Schattenform (der Teil, der außerhalb des Kreises sichtbar ist). Wählen Sie nun „Pfad“ > „Schnittpunkt“, um den überlappenden Teil der Schattenform abzuschneiden. Sie sollten am Ende eine Schattenform haben, die perfekt mit dem Kreis darunter übereinstimmt. Wählen Sie nun die Schattenform aus, wählen Sie eine reine schwarze Füllfarbe (ganz links in der Palette unten) und geben Sie ihr 50%Deckkraft (Parameter Ounten links unter der Palette). Schicken Sie schließlich die Schattenform nach hinten ("senken"), indem Sie drücken Page Down, bis sie hinter der Hauptsymbolform landet. Das ist es.

5. So exportieren Sie Ihr Symbol : Wählen Sie alle erstellten Formen aus ( F1, ziehen Sie dann einen Auswahlrahmen um sie herum) und gruppieren Sie sie ( Ctrl + G). Dies ist nicht unbedingt erforderlich (Sie könnten einfach die Hintergrundform exportieren, wodurch alle Formen darüber gerendert werden), aber das Gruppieren aller Formen, die zu einem Symbol gehören, ist im Allgemeinen eine gute Vorgehensweise. Drücken Ctrl + Shift + ESie dann , um das Bedienfeld „PNG exportieren“ aufzurufen. Wählen Sie einen Pfad und Dateinamen, indem Sie auf "Exportieren als" klicken, und exportieren Sie dann die "Auswahl" in der gewünschten Auflösung ( 90dpi entspricht der Bildschirmauflösung von 192x192Pixeln.

Hinweis: Um das Symbol in einer tatsächlichen Android-App zu verwenden, sollten Sie es mit Auflösungen von 90dpi (entspricht xxxhdpi), 67.5dpi ( xxhdpi), 45dpi ( xhdpi), 33.75dpi ( hdpi) bzw. 22.5dpi ( mdpi) exportieren. Exportieren Sie diese Dateien in die /res/drawable-*dpi/Ordner für normale Android-Assets oder in die /res/mipmap-*dpi/Ordner für das eigentliche App-Symbol.

Hinweis: Für das PlayStore-Artwork benötigen Sie ein Symbol mit noch höherer Auflösung (512 x 512 Pixel). Dies ist - wie Sie vielleicht schon erraten haben - kein Problem, da wir eine Vektorzeichnung des Symbols erstellt haben, die in jeder gewünschten Auflösung exportiert werden kann. Exportieren Sie das Symbol einfach mit 240dpi (oder geben Sie 512Breite und Höhe im Exportbereich ein).