複数のアートボードを、ファイル名を前に付けずにアートボードにちなんで命名されたPNGにエクスポートする


7

次の設定を前提とします。

ファイル:SomeFilename.ai

次の名前のアートボードが含まれています。

  1. Artboard_01
  2. Artboard_02
  3. Artboard_03

現時点でアートボードをエクスポートする場合、Illustratorはアートボードにファイル名を付加するように要求します。したがって、生成されるファイルには次の名前が付けられます。

  1. SomeFilename_Artboard_01.png
  2. SomeFilename_Artboard_02.png
  3. SomeFilename_Artboard_02.png

それらに名前を付けたい:

  1. Artboard_01.png
  2. Artboard_02.png
  3. Artboard_02.png

明らかに、ファイルの名前を一括変更するためのオプションが多数あることは知っていますが、これは私のワークフローに適合しません。Illustratorで多数のグラフィックを作成してからエクスポートすることを含む、多くのUIデザイン(iOSまたはCSS)を行っています。私はXcodeまたはブラウザとIllustratorのグラフィックを微調整する間を頻繁に行き来します。現時点では、エクスポートと再構築/更新だけを行うことはできません。機能するためには、ファイルを見つけて名前を変更する必要があります。これは主要なスピードバンプです。

回答:


5

アートボードではなく、Illustratorでスライスを使用する場合は、エクスポートに正確なファイル名を指定できます。大きな単一のアートボードをセットアップし、スプライトシートを作成する場合と同じようにすべての要素を追加してから、Web用に保存を使用してすべてを1つのパスにエクスポートします。

Adobe Illustrator:スライスとイメージマップ

アートボードでスライスを使用するその他の理由:

  • スライスはピクセルグリッドにスナップします。アートボードにはありません。
  • 1つのドキュメントには10​​0個のアートボードしか含めることができません。スライスにはその制限はありません。

ファイル名を変更するために、私は通常Automatorワークフローを設定しました。Automatorワークフローをプロジェクトごとに設定することもできます。そのため、名前の変更と移動は、1回のクリックまたはフォルダーアクションで行うことができます。実際、おそらくそれをXcodeのビルドフェーズとして追加できますか?

Illustratorに両方のサイズのアートワークがある場合を除き、@ 2xファイルの名前を変更する必要があると思いますか?

また、UIの設計作業にIllustratorを使用する場合は、少し注意が必要です。その形状アンチエイリアスにはいくつかの問題があり、グラデーションはディザリングできません。つまり、アートワークは、PhotoshopやFireworksで作成した場合よりもかなり低い標準になる可能性があります。


ありがとう。スライスの使用も考慮されていません。面白いですね。通常はグラデーションを重ねるのでそれほど問題にはなりませんが、どうしても必要な場合はPsでグラデーションを作成してIlに配置します。時折発生するグリッチ以外は、シェイプアンチエイリアスの問題に気づきませんでした。どのような問題を参照していますか?
2012

浮遊ピクセルであり、理想的な形状ではありません。詳しくはこちら:bjango.com/articles/illustratorandappdesign
Marc Edwards

1
いい記事です。なんて憂鬱。私はIllustratorのほうがはるかに生産性が高く、ベクトルの操作は非常に柔軟です。別のワークフローがあるのか​​な。Illustratorでデザインしてから、Photoshopにドキュメントを配置し、そこからレンダリング/エクスポートする場合もあります。
2012

確かに憂鬱。アイコンを作成している間、AI CC 2015.1.0(v.19.1.0)で浮遊ピクセルを見てきました。多分私は何か間違ったことをしていると思った。レンダリングのバグだと気づかなかった。純粋にSVGを使用する方向に進んでいますが、それまでは、Photoshopなどを使用してPNGにエクスポートすることで、これらの問題を回避することは可能ですか?
Jon Coombs、2016

ヒント:ピクセルプレビューをオンにしてサイズ/位置を微調整すると、わかりやすくなり、浮遊ピクセルも取り除くことができます。この種の調整を行うには、通常、snap-to-pixel-gridをオフにする必要があります。実際、私はほとんど使用をやめ、代わりにピクセルプレビューに依存しています。
Jon Coombs

6

ちょうど楽しみのために、Mac OSでターミナルを開きます

cd folder

ヒント:ターミナルウィンドウでターゲットフォルダーをドラッグできます

ls

ファイルをリストし、それが適切な場所かどうかを確認する

for f in *.png; do  mv "$f" "${f/SomeFilename_/}"; done

ファインダーを見る


OPが何か他のものを要求したとしても、そのような頻繁に必要とされるBashスクリプトを提供するための1つです。参考のために保管しておくと便利です。一部のグラフィックデザイナーはオタクであり、一部のオタクはグラフィックデザイナーです。:)
表意文字2014年


2

PNGを保存した後、コマンドプロンプトを使用して、フォルダー内のすべてのファイルの名前を変更するだけではどうですか。

ren "Prefix_*.png" "///////*.png

プレフィックス(アンダースコアを含む)に含まれる文字と同じ数の「/」を入力する必要があることに注意してください。

注:このコマンドは、Windows OSのコマンドプロンプトで実行できます。

サブノート:私はこれが何度か回答されたことを知っています。他の人が複雑なcmdスクリプトやバッチファイルを使用する代わりにこの超単純なコマンドを使用できるように、この回答を追加しています。


これは、Windowsユーザーにとって便利な回避策です。ファイルが表示されたら、BATファイルをダブルクリックしても、時間はかかりません。
Jon Coombs

微調整:ファイルにtrim4chars.batという名前を付けて、アンダースコアが後に続く任意の3文字に一致させるようにしました。ren "???_*.png" "////*.png" 。また、状況に合わせて別の行を追加しました。ren "???_*.svg" "////*.svg"
Jon Coombs、2016

0

Illustratorをお持ちであれば、ブリッジもご利用いただけます。バッチ名の変更はBridgeに組み込まれており、アートボードをエクスポートした後、そのタスクを簡単に実行できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.