Comment puis-je exporter une image à partir d'une image Illustrator en plusieurs tailles?

29

Je suis nouveau sur Adobe Illustrator et j'ai une image de logo que je dois utiliser en 5 ou 6 tailles différentes. L'image du logo a été créée dans Adobe Illustrator, mais lorsque j'essaie d'enregistrer l'image au format PNG ou JPEG, ce qui aurait dû être simple s'avère très compliqué.

Je comprends qu'Adobe Illustrator souhaite traiter l'image comme une certaine taille, puis souhaite multiplier cette taille par un facteur d'échelle de pixels par pouce pour aboutir au nombre réel de pixels qu'il enregistre. Il a quelques choix de facteurs d'échelle limités qui donnent un ensemble très limité de tailles de pixels de sortie résultantes.

Cependant, pour de nombreuses utilisations Web, l'utilisateur connaît déjà les dimensions de pixels de sortie qui sont nécessaires. Existe-t-il un moyen de simplement spécifier la largeur ou la hauteur de pixel du graphique enregistré qui est nécessaire?

J'ai vu des suggestions pour exporter l'image, puis utiliser Photoshop pour la redimensionner, mais cela se traduit par une qualité d'image moins bonne que la création de l'image finale à partir de l'image vectorielle.

Howard
la source
Il y a plusieurs façons de le faire, la mienne est de sélectionner tout puis l'image que vous souhaitez exporter, puis l'option de largeur et de hauteur dans l'en-tête, il suffit de la modifier puis de l'exporter

Réponses:

26

Fichier> Enregistrer pour le Web, puis entrez les dimensions en pixels en cliquant sur l' Image Sizeonglet à droite de la fenêtre Enregistrer pour le Web.

Ou est-ce que je ne vous comprends pas correctement?

Scott
la source
Parfait merci. Je viens de passer environ 15 minutes avec la fonction "export", mais comme il refuse d'utiliser moins de 72 ppp, j'ai dû redimensionner l'illustration et le plan de travail pour de très petites exportations, c'est probablement ce que le demandeur a fait également.
Kjeld Schmidt
12

L'utilisation File → Save for Webet la saisie des dimensions feront ce que vous recherchez. De plus, Illustrator utilise une mise à l'échelle vectorielle, donc les résultats sont meilleurs que si vous essayiez la même chose dans Photoshop - la saisie de dimensions qui ne correspondent pas au document dans Photoshop signifie que l'image sera mise à l'échelle bitmap.

Veuillez noter que vous devez cliquer sur Appliquer après avoir modifié les dimensions, si vous utilisez une version d'Illustrator antérieure à CS6.

Enregistrer pour le Web dans Illustrator

Oh, et il y a de très bonnes chances que vous souhaitiez la Convert to sRGBdésactiver - elle convertit de manière destructrice votre image de l'espace colorimétrique actuel en sRGB, provoquant un décalage des couleurs.

entrez la description de l'image ici

Marc Edwards
la source
Il n'y a pas de bouton Appliquer dans CS6 .... et je ne suis pas d'accord sur Convertir en RVB, vous voulez que cela soit activé pour les images destinées au Web.
Scott
2
Merci pour l'astuce CS6. Laisser Convertir en sRVB est absolument la mauvaise approche pour le travail sur le Web et l'interface utilisateur. Voici un article complet sur pourquoi: bjango.com/articles/photoshop ( Contestez -moi à ce sujet à vos risques et périls!)
Marc Edwards
2
Avez-vous réellement lu l'article? Lorsque vous effectuez des travaux sur le Web et l'interface utilisateur, les valeurs de couleur exactes DOIVENT être conservées tout au long du processus. Si vous entrez # FF0010 comme couleur, cela DOIT être affiché dans le fichier comme # FF0010 si vous avez l'intention de faire correspondre la couleur dans le code. Cela signifie que la conversion en sRGB DOIT être désactivée. J'ai l'impression que vous ne faites pas ce genre de travail et que vous ne comprenez pas ce que cela implique.
Marc Edwards
1
Scott, veuillez ne pas considérer cela comme une attaque ad hominem, mais à partir de discussions similaires, je pense que vous avez peut-être repris des idées erronées sur la représentation des couleurs RVB. Voir aussi graphicdesign.stackexchange.com/questions/7815/… .
e100
3
Convertir en sRGB n'est pas le bon choix dans presque toutes les situations imaginables lorsque vous travaillez pour le Web. "Il y a une RAISON pour laquelle l'équipe Save for Web a implémenté l'option Convertir en sRGB" - Il est temps de résoudre ce problème. feedback.photoshop.com/photoshop_family/topics/…
Marc Edwards
1

Lorsque j'ai besoin de prendre en charge plusieurs tailles de pixels, je dupe et redimensionne l'art dans le même fichier AI. Chaque taille est placée sur un plan de travail correctement dimensionné. J'ajoute le nom du forum au format de fichier à exporter. Ensuite, je lance un jsx qui exporte chaque plan de travail et récupère le format de fichier à partir du nom, en utilisant les derniers paramètres que j'ai entrés pour ce format dans ce fichier. Tout cela dans CS5.

J'utilise ce flux de travail pour certains logos, icônes et annonces graphiques.

en civil
la source
S'il vous plaît, pouvez-vous partager le .jsx?
kelin
@kelin J'ai peur de ne pas pouvoir. Cela fait longtemps que je ne me suis pas soucié des produits Adobe.
civil le
1
Pas de problème, j'ai trouvé un excellent script ici: stackoverflow.com/a/28067227/3050403
kelin
0

Vous pouvez également créer un document de la taille appropriée dans Photoshop (ou encadrer une zone avec des guides) puis Fichier> Placer l'art vectoriel.

Vous pouvez mettre à l'échelle la taille de la forme avant qu'elle ne soit rendue. Évidemment, la mise à l'échelle après cela réduira sa qualité.

J'ai toujours utilisé cette technique pour les logos afin de donner un contrôle précis sur la taille, par exemple en obtenant la ligne de base des éléments de texte du logo sur une limite de pixel (une forme d'indication).

e100
la source
0

Un ajout à ce sujet que j'ai trouvé intéressant pour les concepteurs d'applications mobiles, est ce script qui crée des actifs de rétine pour iOS et Android en 1 clic.

numediaweb
la source