So erstellen Sie Ihr eigenes Design, um die Ästhetik von aseprite nach Ihren Wünschen anzupassen.
Erste Schritte
Hallo und willkommen zu meiner Anleitung zum Anpassen eines Themas in Aseprite. In Aseprite Themes bestimmen Sie das Aussehen des Programms. Mit diesem Tutorial können Sie Aseprite für Ihren Stil personalisieren. Themen wirken sich nicht auf die auf der Leinwand verwendeten Farben aus, wie z. B. das Schachbrett, das den transparenten Hintergrund anzeigt, und das Gitter, die in ihren eigenen Abschnitten im Menü „Einstellungen“ angepasst werden können. Sie benötigen ein Programm wie Winrar, um Zip-Dateien zu erstellen. Ich bin ein Dummy bei jeder Art von Codierung, also ist dies meistens nur eine Art Tutorial „Ersetze diese Nummer durch eine andere Nummer für diesen Effekt“, nichts zu verrücktes.
------------------------
Wie auch immer, um zuerst Ihr eigenes Design zu erstellen, erstellen wir einfach eine Kopie des Standard-Aseprite-Designs. Der einfachste Weg, dies zu tun, ist, zum Menü „Designs“ (Bearbeiten->Einstellungen->Designs) zu navigieren, dann „Standard“ auszuwählen und auf „Ordner öffnen“ zu klicken.
------------------------
Kopieren Sie alle Dateien und navigieren Sie dann zu einem zugänglichen Ort wie Dokumente/Downloads/Bilder. Dort erstellen Sie Ihren eigenen Ordner, den Sie beliebig benennen können, aber ich empfehle, sich an das Benennungsschema zu halten, das aseprite zu haben scheint („nameoftheme-theme“).
------------------------
Die Dateien sind wie folgt: Die „LICENSE“-Datei ist eine Textdatei, mit der Sie sich nicht wirklich herumschlagen müssen, es sei denn, Sie planen, Ihr Thema wahrscheinlich zu verteilen/verkaufen. Die „Paket“-Datei ist so etwas wie Projektinformationen zu Ihrem Thema. Die Datei „sheet.aseprite-data“ ist eine Datei, die aseprite generiert, Sie brauchen sich damit überhaupt nicht herumzuschlagen, glaube ich. Die „Blatt“-Datei ist ein Bild aller Symbole/UI-Elemente, alles hier kann nach Herzenslust neu eingefärbt oder komplett neu gezeichnet werden! Schließlich ist die „Design“-Datei das, was Sie verwenden, um Farben, Größen, Schriftarten, die Größe von Symbolen/UI-Elementen, die Position von Symbolen/UI-Elementen in der „Blatt“-Datei und ihre Namen anzupassen, und ich bin mir sicher, dass es eine Menge gibt mehr. Zunächst sollten wir uns jedoch auf die „Paket“-Datei konzentrieren, um zu beginnen. Wählen Sie es aus, klicken Sie mit der rechten Maustaste und öffnen Sie es mit Notepad oder einem Äquivalent. (besonderer Tipp, Sie können die Textgröße im Editor anpassen, indem Sie die Strg-Taste gedrückt halten und scrollen)
------------------------
Sie werden mit einem Code konfrontiert, aber zum Glück nicht zu viel. Achten Sie beim Ändern von Text darauf, Kommas und Anführungszeichen nicht zu löschen. Glücklicherweise ändern wir eine Kopie der Standarddatei, sodass die eigentliche Standarddatei immer vorhanden sein sollte, um darauf zurückzugreifen. Auf jeden Fall sollten Sie zuerst „aseprite-theme“ in den Namen des Ordners umbenennen, in dem sich diese Dateien befinden. Dann „Aseprite Default Theme“ in den Namen Ihres Themas. Sie können den Rest der Dinge auch anpassen, aber sie sind meistens nur wichtig, wenn Sie Ihr Thema verteilen oder mit anderen teilen. Zuletzt sehen Sie einen „Standard“ neben den Wörtern „id“ und „path“, das ist eigentlich etwas, das Sie umbenennen müssen, ändern Sie es in den Namen Ihres Themas. Speichern Sie dann die Datei und beenden Sie sie.
------------------------
So fügen Sie ein von Ihnen erstelltes Design zu Aseprite hinzu
Sie können den Ordner des von Ihnen erstellten Themas jetzt jederzeit mit winrar in eine ZIP-Datei komprimieren und es als neue Erweiterung/neues Thema zu aseprite hinzufügen. Ich empfehle, Ihr Thema sehr oft zu testen, während Sie es erstellen, was mühsam sein kann. Aber besser, als etwas falsch einzustellen und nicht zu wissen, was es war. Bevor ich also zeige, wie Sie Ihr Design visuell anpassen, zeige ich Ihnen, wie Sie Ihr Design zu Aseprite hinzufügen, damit Sie sehen können, wie es später bei der Erstellung aussieht. Zuerst müssen Sie es in eine ZIP-Datei umwandeln, um es zu komprimieren, klicken Sie einfach mit der rechten Maustaste auf den Ordner, in dem winrar installiert ist, und klicken Sie auf „Zum Archiv hinzufügen…“. Alles, was Sie tun müssen, ist, ZIP unter Archivformat auszuwählen. Dies sollte eine ZIP-Kopie Ihres Projekts erstellen. Sie brauchen sich keine Gedanken über den Namen der ZIP-Datei zu machen, selbst wenn sie mytheme(19645) heißt, ist sie aufgrund dessen, was wir in der „Paket“-Datei angepasst haben, in Ordnung.
------------------------
Um danach ein Design in Aseprite zu installieren, navigieren Sie zum Menü Erweiterungen (Bearbeiten-> Einstellungen-> Erweiterungen) und klicken Sie auf Erweiterung hinzufügen. Navigieren Sie dann zu dem leicht zu findenden Ordner, in dem Sie Ihren ZIP-/Projektordner abgelegt haben, und doppelklicken Sie auf Ihre ZIP-Datei, um sie als Erweiterung hinzuzufügen. Um Ihr Thema anzuwenden, wechseln Sie dann zum Menü „Thema“ und doppelklicken Sie darauf in der Liste (das Doppelklicken ist sehr wichtig, wenn Sie das Thema auswählen und auf „OK“ drücken oder anwenden, es wird das Thema nicht ändern, diese kleine Eigenart hat mich gemacht denke, ich habe mein eigenes Thema etwa eine Stunde lang nicht richtig erstellt). Denken Sie dann daran, zum Erweiterungsmenü zurückzukehren und Ihr Design zu deinstallieren, wenn es nicht bereit ist.
------------------------
Bearbeiten der Standarddesignvorlage
Jetzt sollten Sie bereit sein, Dinge für Ihr Thema tatsächlich zu ändern. Gehen Sie zurück zu Ihrer entpackten Version Ihres Projekts. Zuerst die „Blatt“-Datei, öffnen Sie diese Datei nicht in MS Paint, da MS Paint keine Transparenz unterstützt. Sie werden diese Datei natürlich in Aseprite anpassen wollen! Zunächst einmal werden Sie viele Linien bemerken, die Slices anzeigen (wenn Sie sie nicht sehen möchten, können Sie zu View->Show->Slices gehen). Der Ersteller von Aseprite hat dies für uns eingefügt und zeigt die Größe der Sprites für jedes Symbol/9splice/ect. Versuchen Sie, innerhalb der von ihnen angegebenen Kästchen für einfache Recolor-Themen zu bleiben. Sie können auch Ihr eigenes Sprite-Sheet erstellen, und wenn wir zur „Design“-Datei gelangen, können Sie die Speicherorte dessen, was Sie ersetzen, auf dieses Bild umleiten, anstatt auf dieses. Sie werden wahrscheinlich die meisten Symbole hier erkennen, wenn Sie Aseprite häufig verwendet haben, suchen Sie nach etwas mit abgerundeten Kanten auf der Benutzeroberfläche. Wenn es abgerundete Kanten hat, ist es wahrscheinlich ein 9-Splice und auf diesem Blatt angegeben. Beachten Sie, dass einige der Farben eine Transparenz aufweisen, die auf dem standardmäßigen grauen Schachbrettmuster von aseprite möglicherweise nicht gut dargestellt wird.
------------------------
Hier sind einige enthaltene Bilder, um eine Vorstellung davon zu bekommen, wo sich einige der 9 Spleiße auf dem Blatt befinden könnten. Es gibt einen 9splice für Schaltflächen in einem nicht gedrückten, schwebenden und gedrückten Zustand, also denken Sie daran. Auch Bildlaufleisten, Auswahlmöglichkeiten in Dropdown-Menüs und Eingabefelder haben eigene Farben. Wofür genau jeder Spleiß verwendet wird, steht in der „Theme“-Datei, wenn Sie Farben aus einer eher programmiertechnischen Richtung anpassen möchten.
------------------------
Es kann schwierig sein zu erraten, was wohin im Sprite-Sheet gehört, daher kann es bei der Fehlersuche ziemlich hilfreich sein, wenn Sie den Dingen eine auffällige Farbe geben. Sie können sich auch den Teile-Abschnitt der „Design“-Datei ansehen, um die Namen und die x/y-Koordinate der oberen linken Ecke jedes Sprites zu finden, aber die Namen sind nicht immer ganz klar, was in Asprites wohin gehört.
------------------------
Die „theme“-Datei wird ähnlich wie die „package“-Datei geöffnet. Sie wählen und öffnen in Notepad. In dieser Datei nehmen Sie alle anderen Anpassungen vor und können sehr überwältigend sein. Ich werde mein Bestes tun, um es zu brechen. Zuerst können Sie den Namen Ihres Themas (für organisatorische Zwecke) und die Bildschirmskalierung & UI-Skalierung anpassen. Die Bildschirmskalierung passt meines Erachtens die Leinwand an, und die UI-Skalierung passt das UI-Fenster herum an. Was Sie hier eingeben, wird nur als ganze Werte gespeichert und dann mit dem Originalmaßstab multipliziert ... Beispiel: Bildschirmskalierung 1 würde zu 100 % Vergrößerung, Bildschirmskalierung 1.9 zu 100 % Vergrößerung, Bildschirmskalierung 2 zu 200 % Vergrößerung . Nicht besonders nützlich für den durchschnittlichen Monitor, aber wahrscheinlich nützlich, wenn Sie einen Projektor verwenden, während Sie im Bett liegen und so weiter. Als nächstes ein weiterer Punkt, an dem Sie Ihren Namen als Anerkennung für die Erstellung dieses Themas eintragen können.
------------------------
Dann die Option, die in Aseprite verwendete Schriftart zu ändern. Die hier einzufügenden Standardschriftoptionen sind begrenzt. Wenn Sie die Schriftart ändern möchten, navigieren Sie zum Schriftartenordner im Datenordner von Aseprite (Aseprite\data\fonts). Dort sehen Sie 2 Bilder, die die benutzerdefinierte Standardschrift von Aseprite und eine Datei anzeigen mit dem Namen „Schriftarten“. Wenn Sie die Datei „Schriftarten“ mit Notepad öffnen, werden Ihnen Ihre Standardoptionen angezeigt, in die Sie die Schriftart ändern können. Wenn es nicht in dieser Liste enthalten ist, können Sie es nicht in Aseprite verwenden. Wenn Sie fest entschlossen sind, Ihre eigene Schriftart zu erstellen, können Sie wahrscheinlich eine Kopie der Spritesheets für die benutzerdefinierte Schriftart von aseprite erstellen und sie als Anleitung zum Erstellen einer neuen Schriftart verwenden. Ich weiß nicht viel über das Erstellen benutzerdefinierter Schriftarten, tut mir leid. Um eine vorhandene installierte Schriftart zu dieser Liste hinzuzufügen, kopieren Sie einfach den Arial-Eintrag und fügen Sie ihn ein und ersetzen Sie „Arial“ durch den Dateinamen der installierten Schriftart in der „Fonts“-Datei Ihres Betriebssystems. Schreiben Sie dann den Namen der Schriftart in die „Theme“-Datei. Stellen Sie sicher, dass Aseprite neu gestartet wird, wenn Sie die Schriftart mit geöffnetem Aseprite installiert haben.
------------------------
Als nächstes kommen die Abmessungen für UI-Elemente in Pixeln, die ich für richtig halte. Die UI-Elemente sind alle ziemlich gut beschriftet, so dass sie ziemlich einfach zu unterscheiden sein sollten.
------------------------
Danach Farben. Ich will ehrlich sein, es ist sehr schwer zu sagen, was für mich wohin gehört. Es wird wahrscheinlich lange dauern, dies anzupassen. Was Sie hier sehen, ist eine Liste von Abschnitten der Benutzeroberfläche, denen ein Hex-Farbcode zugewiesen wurde.
------------------------
Sie können die Hex-Farbcodes für Farben in Aseprite glücklicherweise leicht herausfinden und die Hex-Codes von dort in Ihre Datei kopieren.
------------------------
Hier ist eine Liste der Standardfarben in der Datei, um zu visualisieren, welche Farben Sie möglicherweise austauschen können. Eine hilfreiche Sache, die ich fand, war das Drücken von Strg + F, um das Suchmenü im Editor zu öffnen und nach genauen Hex-Farben zu suchen, wenn ich sagen wollte, dass alle Dinge, die weiß sind, in schwarz und alle Dinge, die schwarz sind, in weiß geändert werden. Schließlich gibt es offensichtlich ein Namensschema und Bereiche der Benutzeroberfläche scheinen zusammen gruppiert zu sein. Gesichter sind wie die Hintergrundfarbe für Teile der Benutzeroberfläche und heiße Gesichter sind meiner Meinung nach anklickbare Teile? Hot Text ist anklickbarer Text, Radio bezieht sich meines Erachtens auf Radiomenüs, „Ausgewählte“ sind offensichtlich ausgewählte UI-Elemente, Hover für Farbe, wenn der Mauszeiger darüber bewegt wird, und so weiter.
------------------------
Teile sind alle Symbole/UI-Elemente in der „Blatt“-Datei. Zuerst gibt es seine x- und y-Koordinate auf dem Spritesheet an, wo das Symbol beginnt, und gibt dann eine Höhe und Breite in Pixeln für dieses Symbol an. Dies würden Sie ändern, wenn Sie größere/kleinere Symbole erstellen. Diejenigen, die mehrere Breiten und Höhen haben, sind gespleißte Symbole/Elemente (wie 9 Spleiße). Sie sind die identifizierende Länge jedes Abschnitts.
------------------------
Zuletzt ist der Style-Bereich. Dies entscheidet, welche Elemente von dem, was Sie in allen anderen Abschnitten definiert haben, wohin gehen. Es kann nützlich sein, um herauszufinden, wohin eine Farbe oder ein Teil geht. Sie können hier auch den Abstand, die Randlänge und die Textausrichtung anpassen.
