Comment automatiser l'exportation de plusieurs fichiers PNG de différentes tailles à partir de Photoshop?


18

J'ai un fichier PSD avec une résolution de 96 px × 96 px. Maintenant, je veux l'enregistrer en tant que quatre fichiers PNG avec différentes résolutions telles que 36 px × 36 px, 48 px × 48 px, 72 px × 72 px et 96 px × 96px. Au lieu d'ajuster manuellement la taille de l'image quatre fois et d'enregistrer en option, puis-je automatiser cela d'une manière ou d'une autre?


Veuillez essayer la réponse donnée par @NickBeus et cochez-la verte si cela fonctionne pour vous. Cette réponse m'a beaucoup aidé. Je ne peux pas vous dire combien de fois j'ai ouvert la boîte de dialogue "Enregistrer pour le Web" juste pour changer la taille de sortie UNE FOIS DE PLUS. La fenêtre "Ressources d'image" vous permet d'ajouter toutes les tailles et suffixes de nom de fichier dont vous avez besoin et de les exporter tous.
rgb_life

Réponses:


13

Ce n'est pas une solution complète, mais cela pourrait aider quelqu'un qui vient de Google.

Si vous enregistrez avec Fichier → Enregistrer pour le Web, vous pouvez redimensionner pendant le processus d'enregistrement, les options sont sur le côté droit sous Taille d'image.

Je le fais assez souvent lorsque j'ai besoin de deux tailles différentes pour une image, bien que, comme les autres réponses l'ont noté, si vous concevez des icônes, utilisez des vecteurs, cela vous facilitera la vie.


3
Je suis ébahi. Je n'avais jamais vraiment remarqué l'option de
redimensionnement

et vous pouvez également utiliser Alt+Ctrl+Shift+Spour lancer la Save for Webboîte de dialogue dans CS6.
Muhammad Saqib

5

Avec Photoshop CC, il existe désormais une fonctionnalité appelée Photoshop Generator qui est conçue pour créer plusieurs images

Vous pouvez lire sur Generator ici .

Un extrait:

Generator vous permet de créer des ressources d'image en temps réel pendant que vous travaillez, éliminant les étapes fastidieuses de copie, de découpe et d'exportation manuelle de chaque couche et vous faisant gagner des heures. Ajoutez simplement une extension de fichier au nom de votre calque ou groupe de calques, et Photoshop créera automatiquement un JPG, PNG ou GIF à partir du contenu de ce calque. Si vous apportez une modification à cette couche, le fichier est immédiatement mis à jour. Cela signifie que vous disposez désormais d'un dossier d'images toujours à jour avec votre conception Photoshop.


4

Combien de fois avez-vous besoin d'exporter l'icône? S'il ne s'agit que d'une seule icône, votre meilleure option est probablement de tout dessiner à l'aide de vecteurs et de styles de calque, de redimensionner le document, de faire les ajustements nécessaires et d'enregistrer le PNG (en conservant éventuellement le PSD pour une future exportation).

Si vous devez répéter le processus plusieurs fois, je vous recommande de tout configurer comme une feuille de sprite avec des tranches.

Voici quelque chose que j'ai écrit sur le sujet (comprend de nombreuses techniques d'exportation): Exportation depuis Photoshop .

Lors de la conception d'icônes, vous devez souvent ajuster manuellement les plus petites tailles individuellement - il peut être utile de garder cela à l'esprit lorsque vous créez toutes les tailles.


3

Comme Marc l'a mentionné ci-dessus, vous feriez probablement mieux de mettre à l'échelle des vecteurs dans le document et d'utiliser des feuilles de sprites.

La seule chose que vous devriez éviter est la mise à l'échelle pendant Save for Web comme le suggère Maxism. J'ai écrit un article comparant les résultats de différentes techniques et Save for Web produisait régulièrement des actifs avec des artefacts et des demi-pixels: la réduction et l'exportation des actifs dans Photoshop .

J'ai également créé un script Photoshop qui automatise le processus d'exportation de ces actifs: EXPORT TO ANDROID PHOTOSHOP SCRIPT .

J'espère que cela t'aides.


1

Il n'y a pas de bonne façon de passer de 96 à 36 automatiquement. Même à 48 ans, vous verrez votre design commencer à s'effondrer.

Le seul avantage serait si vous avez beaucoup d'icônes à exporter de cette manière et que vous prévoyez de revenir les nettoyer. Vous pouvez l'enregistrer en tant qu'action ou utiliser jsx, si vous en avez envie.

Pour votre conception particulière, j'expérimenterais à descendre par étapes ou à exporter chaque version à partir de la version originale 96px. Habituellement, les étapes sont les meilleures, mais sur certains modèles, elles peuvent introduire des quantités progressives de distorsion.


1

Créez vos icônes en mdpi et utilisez cette action Photoshop pour l'exporter en ldpi, hdpi et xhdpi. De mdpi à xhdpi, cela fonctionne bien, mais ldpi et hdpi semblent un peu flous.

Lien vers l'article
Téléchargez l'action Photoshop



1

Il y a une nouvelle option dans Photoschop CC 2014. Elle s'appelle "Générer des actifs", elle est sous "fichier" et vous pouvez choisir 0,25x, 0,5x, 2x, 3x et vous pouvez configurer vous-même les dimensions. Il exportera vos calques vers n'importe quel format de fichier et dans différentes dimensions (si vous le souhaitez).


Cette réponse est TRÈS bonne. Vous devez d'abord aller dans "FILE> GENERATE" et cocher "Image Assets". Ensuite, allez dans "FILE> EXPORT> EXPORT AS" et vous obtiendrez le meilleur menu que j'ai jamais utilisé dans Photoshop, où vous pouvez ajouter des tailles et leur donner à chacune un suffixe personnalisé! C'est dans Adobe Photoshop CC, bien sûr. Mon CS4 est mort avec une mise à jour Mac OSX, et je n'ai donc aucune idée d'une version autre que celle que j'utilise maintenant.
rgb_life

1

Je crois que c'est exactement ce que vous voulez.

https://github.com/austynmahoney/mobile-export-scripts-illustrator

Si vous êtes à l'aise pour ouvrir chacun .psdd'eux, Illustratorvous pouvez facilement produire plusieurs tailles en modifiant les facteurs d'échelle dans le .jsxfichier.

L'image de base utilisée pour Android est xhdpi, pour iOS c'est @ 2x. Le script augmentera et diminuera à partir de ces tailles.



0

Je n'ai rien trouvé de simple dans Adobe Land pour le faire pour moi. Si vous avez ou souhaitez installer ImageMagick et que vous êtes à l'aise avec la ligne de commande, l' convertoutil CLI est parfait .

J'ai écrit ce script shell qui accepte les largeurs et redimensionne une image jusqu'à ce que vous appuyiez sur Entrée sans numéro:

#!/bin/sh

oot=${1%.*}
while read -p 'width: ' -r && [ "$REPLY" != '' ]; do
    convert "$1" -resize "$REPLY"x "$oot-$REPLY.png"
done

J'ai nommé le mien multi-resize.shet l' ai mis ~/bin/pour qu'il soit disponible partout.

Vous l'exécuteriez ensuite dans un shell comme celui-ci sur un PNG de la résolution d'origine:

$ multi-resize.sh foo.png
width: 96
width: 72
width: 48
width: 36
width: 
$

Vous aurez foo-72.png, etc. dans le même répertoire.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.