[JAVA] Un outil pour générer des images Retina pour iOS à utiliser avec Xcode

Aperçu

Je pense que les images Retina sont souvent nécessaires pour le développement iOS. Comme beaucoup d'entre vous le savent peut-être, les images Retina nécessitent trois types avec " @ x1 "," @ x2" et " @ x3 "à la fin du nom de fichier, selon la résolution du terminal. est. Des images avec différentes résolutions peuvent être créées avec la fonction de traitement par lots de Photoshop ou les ressources Illustrator, mais renommer les fichiers est étonnamment compliqué.

Par conséquent, il était étonnamment pratique de créer un outil simple qui génère un nom de fichier avec une bonne résolution tout en modifiant la résolution, je le publierai donc ici.

Conditions préalables

Cet outil convertit à la baisse les images 1x, 2x et 3x à partir d'images 6x (car le multiple commun minimum de 2 et 3 est 6). En d'autres termes, vous devez préparer une image 6x qui n'est pas réellement utilisée. Veuillez vous reporter aux [Conseils sur la création d'une image 6x] suivants (# Conseils sur la création d'une image 6x).

Mettez les images originales ensemble dans un répertoire (dossier) à l'avance. Créez un répertoire à l'avance pour stocker les images générées. Étant donné que cet outil est censé convertir 10 images ou plus, il est conçu pour traiter les fichiers d'un tel répertoire à la fois.

Les seuls formats d'image qui peuvent être traités sont png et jpeg.

De plus, je suis désolé, Java est requis pour fonctionner. Si vous n'avez pas Java, veuillez l'installer à partir de OpenJDK. Puisqu'il s'agit de Java, il fonctionne à la fois sur Windows et Mac.

Puisqu'il ne s'agit pas d'une interface graphique, vous devez l'utiliser à partir de la ligne de commande.

Dossier d'exécution

RetinaFraction6.jar

Méthode d'exécution

L'exécution se fait sur la ligne de commande. Démarrez «cmd (invite de commande)» pour Windows ou «Terminal» pour mac et accédez au répertoire où se trouve RetinaFraction6.jar.

java -jar RetinaFraction6.jar nom du répertoire source nom du répertoire d'exportation

Entrer. (Le nom du répertoire est [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) et [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 ....... 35i39j0i4j0i131i4j0i131j0i131i67j0i67j0i131i4i10j0j33i21. Vous pouvez facilement le saisir en faisant glisser le dossier vers mb-JKgWSOdc))

Ensuite, trouvez tous les png et jpeg dans le répertoire source, et mettez " 1/6 image @ x1 "," 1/3 image @ x2" et " 1/2 image @ x3 "dans le répertoire d'exportation. Est exporté en tant que. Veuillez noter que le fichier d'exportation sera écrasé sans dire s'il est présent ou non. De plus, si l'image source est une image d'index PNG-8, elle sera convertie en RGBA.

Différence avec Photoshop

Vous pouvez également modifier la résolution de l'image dans Photoshop (Résolution de l'image dans le menu Image). À ce moment, l'image du produit fini changera en fonction de la façon dont l'algorithme est sélectionné. Vous trouverez ci-dessous une vue agrandie d'une image 6x convertie en 1/3 $.

Les voisins les plus proches sont créés en éclaircissant simplement les images, de sorte que l'irrégularité est perceptible. Bicubic a une couleur qui accentue le contour autour de l'image. Mis à part les photos, bilinéaire est la plus belle image de bouton utilisée dans l'application.

L'algorithme utilisé dans RetinaFraction6 est la méthode de moyennage de zone (Image.SCALE_AREA_AVERAGIN) si la hauteur et la largeur de l'image sont des multiples de 6, et la bilinéaire (probablement) (Image.SCALE_SMOOTH) si l'une ou l'autre n'est pas un multiple de 6. Je l'ai adopté. Lors de la conversion d'une image en une fraction d'un entier, la méthode de calcul de la moyenne de surface et bilinéaire sont la même image. Même dans ce cas, j'utilise délibérément la méthode de calcul de la moyenne de surface car la vitesse de conversion est plus rapide que bilinéaire.

En d'autres termes, l'image convertie par RetinaFraction6 est la même que la réduction de la résolution d'image utilisant bilinéaire dans Photoshop (probablement). Pourtant, il est assez facile de créer trois images d'une image de @ x1 à @ x3 et de changer le nom du fichier de manière appropriée.

En tant qu'effet secondaire, les images PNG créées avec RetinaFraction6 ont une taille de fichier plus petite que les images traitées par lots avec Photoshop (il semble que l'enregistrement dans Photoshop comporte des informations de copyright écrites dans la partie en-tête).

Conseils pour créer une image 6x

C'est une image 6x traitée par RetinaFraction6, mais c'est beau si vous créez un profil Illustrator sur "Web". Créez une image (c'est-à-dire une image de taille @ x1) à placer sur la taille de point logique dans Xcode (par exemple, 375 points x 667 points pour iPhone 6 à 8) en l'alignant sur le point avec le profil Web Illustrator et" Exporter pour le Web. Il est bon de spécifier la taille à 600% et d'exporter.

L'astuce consiste à dessiner un quadrilatère en "dessinant en dehors de la ligne". Si vous faites cela, la ligne d'anti-crénelage n'apparaîtra pas lorsque vous la définissez sur $ 1/6 $, donc les bords seront propres.

D'autres astuces sont "Illustrator Web Pixel" et [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) S'il vous plaît vérifier.

Illustrator peut produire des images x1, x2 et x3, mais il est difficile de devoir renommer le fichier vous-même.

Si vous souhaitez dessiner une image 6x dans Photoshop, vous devez travailler avec un espacement de grille de 6 pixels. Si vous dessinez les côtés du quadrilatère de manière à ce qu'ils collent à l'extérieur de ces 6 pixels, l'image traitée par RetinaFraction6 sera magnifique.

Code source du programme

Le code source de RetinaFraction6 est également exposé. J'ai utilisé Java juste pour m'habituer à l'auteur. Pardon. C'est un programme simple, donc je l'ai écrit sous main.

N'hésitez pas à le modifier et à le redistribuer.

Impressions

Après tout, la principale raison pour laquelle j'ai créé RetinaFraction6 est qu'il était compliqué de renommer les fichiers en une seule fois. Vous pouvez changer les noms de fichiers en même temps d'une autre manière, mais il est plus facile de penser à changer correctement les noms de fichiers lors de la génération des fichiers. Même si vous ne redessinez qu'une seule des nombreuses images, vous pouvez l'utiliser simplement en mettant à jour tout le répertoire. Je pense que la même chose peut être faite avec un script utilisant ImageMagick, mais la lecture de l'image originale une seule fois peut être un avantage sur la vitesse (?)

J'aime beaucoup cet outil, mais n'est-il pas étrange de créer une image 6x?