[JAVA] Ein Tool zum Generieren von Retina-Bildern für iOS zur Verwendung mit Xcode

Überblick

Ich denke, dass Retina-Bilder oft für die iOS-Entwicklung benötigt werden. Wie viele von Ihnen vielleicht wissen, benötigen Retina-Bilder drei Typen mit "@ x1", "@ x2" und "@ x3" am Ende des Dateinamens, abhängig von der Auflösung des Terminals. ist. Bilder mit unterschiedlichen Auflösungen können mit der Stapelfunktion von Photoshop oder mit Illustrator-Assets erstellt werden. Das Umbenennen von Dateien ist jedoch überraschend problematisch.

Daher war es unerwartet praktisch, ein einfaches Tool zu erstellen, das beim Ändern der Auflösung einen Dateinamen mit guter Auflösung generiert. Daher werde ich ihn hier veröffentlichen.

Voraussetzungen

Dieses Tool konvertiert 1x-, 2x- und 3x-Bilder von 6x-Bildern herunter (da das minimale gemeinsame Vielfache von 2 und 3 6 ist). Mit anderen Worten, Sie müssen ein 6x-Bild vorbereiten, das nicht tatsächlich verwendet wird. Bitte lesen Sie die folgenden [Tipps zum Erstellen eines 6x-Bildes](# Tipps zum Erstellen eines 6x-Bildes).

Stellen Sie die Originalbilder vorab in einem Verzeichnis zusammen. Erstellen Sie im Voraus ein Verzeichnis, um die generierten Bilder zu speichern. Da dieses Tool 10 oder mehr Bilder konvertieren soll, ist es so konzipiert, dass Dateien in einem solchen Verzeichnis gleichzeitig verarbeitet werden.

Die einzigen Bildformate, die verarbeitet werden können, sind PNG und JPEG.

Außerdem muss Java ausgeführt werden. Wenn Sie kein Java haben, installieren Sie es bitte über OpenJDK. Da es sich um Java handelt, funktioniert es sowohl unter Windows als auch unter Mac.

Da es sich nicht um eine GUI handelt, müssen Sie sie über die Befehlszeile bedienen.

Ausführungsdatei

RetinaFraction6.jar

Ausführungsmethode

Die Ausführung erfolgt über die Befehlszeile. Starten Sie "cmd (Eingabeaufforderung)" für Windows oder "Terminal" für Mac und wechseln Sie in das Verzeichnis, in dem sich RetinaFraction6.jar befindet.

java -jar RetinaFraction6.Name des JAR-Quellverzeichnisses Exportverzeichnisname

Eingeben. (Der Verzeichnisname lautet [cmd](https://www.google.com/search?ei=C8IJXePSDYuMvQSq97KQBA&q=cmd+%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80 +% E3% 83% 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & oq = cmd +% E3% 83% 95% E3% 82% A9% E3% 83% AB% E3% 83% 80 +% E3% 83% 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & gs_l = psy-ab.3 ... 180651.181149..181854 ... 0.0..0.91.251.3 .. .... 0 .... 1 .. gws-wiz.-93yQ_ITVvU) und [Terminal](https://www.google.com/search?ei=TcAJXf7WIY79rQHKjo2oDQ&q=mac+%E3%82%BF%E3% 83% BC% E3% 83% 9F% E3% 83% 8A% E3% 83% AB +% E3% 83% 95% E3% 82% A9% E3% 83% AB% E3% 83% 80 +% E3% 83 % 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & oq = mac +% E3% 82% BF% E3% 83% BC% E3% 83% 9F% E3% 83% 8A% E3% 83 % AB +% E3% 83% 95% E3% 82% A9% E3% 83% AB% E3% 83% 80 +% E3% 83% 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & gs_l = psy-ab.3 ... 430471.443777..444468 ... 0.0..0.146.2845.27j4 ...... 0 ... 1.gws-wiz ....... Sie können es einfach eingeben, indem Sie den Ordner auf mb-JKgWSOdc ziehen.

Suchen Sie dann alle PNG- und JPEG-Dateien im Quellverzeichnis und geben Sie " 1/6 image @ x1 "," 1/3 image @ x2" und " 1/2 image @ x3 "in das Exportverzeichnis ein. Wird exportiert als. Bitte beachten Sie, dass die Exportdatei überschrieben wird, ohne anzugeben, ob sie vorhanden ist oder nicht. Wenn das Quellbild ein PNG-8-Indexbild ist, wird es in RGBA konvertiert.

Unterschied zu Photoshop

Sie können die Bildauflösung auch in Photoshop ändern (Bildauflösung im Menü Bild). Zu diesem Zeitpunkt ändert sich das Bild des fertigen Produkts abhängig von der Auswahl des Algorithmus. Unten sehen Sie eine vergrößerte Ansicht eines 6-fachen Bildes, das in $ 1/3 $ konvertiert wurde.

Die nächsten Nachbarn werden durch einfaches Ausdünnen der Bilder hergestellt, sodass die Zackigkeit spürbar wird. Bicubic hat eine Farbe, die den Umriss um das Bild betont. Bilinear ist neben Fotos das schönste Schaltflächenbild, das in der App verwendet wird.

Der in RetinaFraction6 verwendete Algorithmus ist die Methode zur Flächenmittelung (Image.SCALE_AREA_AVERAGIN), wenn sowohl die Höhe als auch die Breite des Bildes ein Vielfaches von 6 sind, und das bilineare (wahrscheinlich) (Image.SCALE_SMOOTH), wenn eines der beiden kein Vielfaches von 6 ist. Ich habe es angenommen. Bei der Konvertierung eines Bildes in einen Bruchteil einer Ganzzahl sind die Flächenmittelungsmethode und die bilineare Methode dasselbe Bild. Trotzdem verwende ich absichtlich die Methode der Flächenmittelung, da die Konvertierungsgeschwindigkeit schneller als bilinear ist.

Mit anderen Worten, das von RetinaFraction6 konvertierte Bild entspricht (wahrscheinlich) dem Reduzieren der Bildauflösung mithilfe von Bilinear in Photoshop. Trotzdem ist es ziemlich einfach, drei Bilder von einem Bild zu "@ x1 bis @ x3" zu erstellen und den Dateinamen entsprechend zu ändern.

Als Nebeneffekt hat das von RetinaFraction6 erstellte PNG-Bild eine kleinere Dateigröße als der von Photoshop verarbeitete Bildstapel (anscheinend enthält das Speichern in Photoshop Copyright-Informationen usw. im Header-Teil).

Tipps zum Erstellen eines 6x-Bildes

Es ist ein 6x-Bild, das von RetinaFraction6 verarbeitet wird, aber es ist schön, wenn Sie ein Illustrator-Profil im "Web" erstellen. Erstellen Sie ein Bild (dh ein Bild mit der Größe "@ x1"), das auf der logischen Punktgröße in Xcode platziert werden soll (z. B. 375 Punkte x 667 Punkte für iPhone 6 bis 8), indem Sie es mit dem Illustrator-Webprofil an der Stelle ausrichten und "Für das Web exportieren" Es ist gut, die Größe als 600% anzugeben und zu exportieren.

Der Trick besteht darin, ein Viereck durch "Zeichnen außerhalb der Linie" zu zeichnen. Auf diese Weise wird die Anti-Aliasing-Linie nicht angezeigt, wenn Sie den Wert auf $ 1/6 $ setzen, und die Kante wird sauber.

Weitere Tipps sind "Illustrator-Webpixel" und [Gugutte](https://www.google.com/search?ei=OLsJXbHGINKvyAPUx574BA&q=Illustrator+web+%E3%83%94%E3%82%AF% E3% 82% BB% E3% 83% AB & oq = Illustrator + Web +% E3% 83% 94% E3% 82% AF% E3% 82% BB% E3% 83% AB & gs_l = psy-ab.3..35i39j0i4.29896.30031 ..30968 ... 0.0..0.93.176.2 ...... 0 .... 1..gws-wiz.Y6-D8kZaQgo) Bitte überprüfen Sie es.

Illustrator kann x1-, x2- und x3-Bilder ausgeben, aber es ist immerhin mühsam, die Datei selbst umzubenennen.

Wenn Sie in Photoshop ein 6x-Bild zeichnen möchten, sollten Sie mit einem Rasterabstand von 6 Pixel arbeiten. Wenn Sie die Seiten des Vierecks so zeichnen, dass sie an der Außenseite dieser 6 Pixel haften, ist das von RetinaFraction6 verarbeitete Bild wunderschön.

Quellcode programmieren

Stellen Sie auch den Quellcode von RetinaFraction6 bereit (https://drive.google.com/file/d/1j4KaOFeDA1hhAoFRZXHmgR7Q1bICAhLY/view?usp=sharing). Ich habe Java benutzt, um mich an den Autor zu gewöhnen. Es tut uns leid. Es ist ein einfaches Programm, also habe ich es unter main geschrieben.

Fühlen Sie sich frei, es zu ändern und weiterzugeben.

Impressionen

Der Hauptgrund, warum ich RetinaFraction6 erstellt habe, ist, dass es mühsam war, Dateien auf einmal umzubenennen. Sie können die Dateinamen auf einmal auf andere Weise ändern, aber es ist einfacher, beim Generieren der Dateien daran zu denken, die Dateinamen korrekt zu ändern. Selbst wenn Sie nur eines der vielen Bilder neu zeichnen, können Sie es verwenden, indem Sie das gesamte Verzeichnis aktualisieren. Ich denke, dasselbe kann mit einem Skript mit ImageMagick gemacht werden, aber das einmalige Lesen des Originalbildes kann ein Vorteil gegenüber der Geschwindigkeit sein (?)

Ich mag dieses Tool ziemlich, aber ist es nicht seltsam, ein 6x-Bild zu erstellen?