【解決】リアルファブリック用画像書き出しを一気に済ませたい!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Fabricantアプリ アイキャッチ図版

リアルファブリックは,オリジナルの布をデザインしたり販売したりできるサービスです。パターンデザインをIllustratorで制作しているかたも多いでしょう。

過去の記事「アートボードとパターンのタイルをフィットさせるリアルファブリック用 Illustrator スクリプト」により,Illustratorのパターンデザインをアートボードに揃える工程が素早く正確になりました。しかし,最も面倒なのは画像書き出しです。

リアルファブリックのデザイン登録には,次の2種類の画像がいります。

  1. デザイン提出用画像(以降,デザイン用画像と呼ぶ)
  2. サムネイル用画像(希望者のみ。なくても可)

デザイン用画像の決まりはこちらのようになっています。

形式:JPEG

カラーモード:RGB

解像度:200ppi

サムネイル用画像は特に指定がありませんが,常識的に考えるとこんなところでしょう。

形式:JPEG

カラーモード:RGB

解像度:72ppi

もうこの時点で大変そうですね。Illustratorファイルの中にデザイン用とサムネイル用アートボードが混在する場合,それぞれ解像度を変えて書き出す必要があります。

さらに言えば,デザイン用画像の解像度200ppiがくせ者です。Illustratorで普通に書き出すだけだと,パターンの継ぎ目に白い隙間ができてしまうことが多いのです。

そのため一旦隙間が出にくい解像度で書き出し,規定通りに200ppiに変更,その後Photoshopでパターンに登録して目視確認する,といった複雑な手順を辿ることになります。

つまり,リアルファブリックの決まりに基づいた形式・解像度で,白い隙間ができないよう画像を書き出し,実際隙間ができるか確認するための画像も追加で生成しなければいけません。

今回紹介するのはまさにそのためのPhotoshop & Illustrator用スクリプト, Fabricant(ファブリカント) です。

動画で見たい

あらましを教えて

Illustratorファイル内のアートボードに配置してあるパターンデザインを,リアルファブリックの決まりに基づいて画像化するPhotoshop & Illustrator用スクリプトです。名前はFabricant(ファブリカント)といいます。

このスクリプトは1つのアートボードを1つのパターンデザインとみなし,そのデータからデザイン用・サムネイル用・目視確認用の3つの画像を自動で生成します。

Fabricant書き出し結果サンプル 画像

Illustratorで書類の情報を取得し,ラスタライズが綺麗なPhotoshopを使って画像化する流れです。つまりIllustratorとPhotoshop両方必要になります。

便宜上スクリプトと呼んでいますが,実際はElectronと言う技術で作られたmacOS・Windows両対応のマルチプラットフォームアプリケーションです。インストーラはそれぞれのOS用に分かれ,2つあります。

どのバージョンに対応してるの?

次の通りです。

macOS用(app)
  • macOS 10.14以上に対応。macOS 10.14/10.15(Intel),11.6/12.2(Apple Silicon)で動作を確認。Electronは10.11でも動作するので,そこまでは動作の可能性あり
  • Illustrator CS6,またはそれ以上のIllustratorに対応。CS6,CC2015.3〜2022で動作を確認
  • Photoshop CC 2018,またはそれ以上のPhotoshopに対応。CC2018〜2022で動作を確認。古いバージョンでも動作の可能性はあり
Windows用(exe)
  • Windows 10に対応。Windows 10で動作を確認。ElectronはWindows 7でも動作するので,そこまでは動作の可能性あり
  • Illustrator CS6,またはそれ以上のIllustratorに対応。CS6,CC2019〜2022で動作を確認
  • Photoshop 2020,またはそれ以上のPhotoshopに対応。2020〜2022で動作を確認。古いバージョンでも動作の可能性はあり

どうやってインストールするの?

macOS用にはdmgファイルで,Windows用にはexeファイルでインストーラを用意してあります。ダウンロードして開けば指示が出るので,それに従って進めればOKです。

ただしWindowsの場合はオプションで「現在のユーザーのみにインストールする」を選んでください。もしすべてのユーザー用にインストールすると,管理者権限とセキュリティの都合で,Fabricantへのファイルドロップがブロックされます。うまく動きません。

Windowsインストールオプション選択画面 画像

インストールが済んだらFabricantアプリを開いてみてください。ウインドウが出てきたら成功しています。

Fabricantウインドウ 画像

起動できないんだけど

macOS

インターネットからダウンロードしてきた身元不明のアプリケーションは,起動を阻止されることがあります。

macOS開発者不明アプリケーション警告 画像

その場合右クリックから[開く]を選ぶか,システム環境設定のセキュリティとプライバシーで[このまま開く]を選択すれば許可できます(開発元が未確認のMacアプリケーションを開く – Apple サポート)。

Windows

セキュリティソフトMicrosoft Defender SmartScreenがインストーラの実行を止めることがあります。その場合詳細情報を押してください。実行ボタンが出て進められるようになります。

Windows開発者不明アプリケーション警告 画像

どう使うの?

次のどちらかの方法でスクリプトを発動してください。

  • Fabricantアプリにaiファイルをドロップする
  • Illustrator書類を開いた状態でFabricantアプリのメニュー「Export Active Document on Illustrator」を実行する
メニュー経由で実行 画像
▲メニュー経由で実行

ドロップ経由の場合は,ドロップされた複数のファイルをすべて処理します。メニュー経由の場合は,Illustratorでアクティブな書類1つのみが対象です。

初期設定ではスクリプトは下記のように働きます。

  1. Illustrator書類からアートボード名などの情報を読み取る
  2. 各アートボードごとに,Photoshopでデザイン用(design)・サムネイル用(thumbnail)・確認用(preview)の3種類のjpgを書き出す
  3. 確認用画像をPhotoshopで開く

画像はIllustrator書類と同じ階層に書き出します。特にサブフォルダは作りません。同じ名前の画像があったら上書きするのでご注意ください。

Fabricant書き出し結果サンプル 画像

Illustratorファイルの作成ルールは?

Fabricantは基本的に,1つのアートボードを1つのパターンデザインとみなします。アートボードぴったりにパターン1リピート分のオブジェクトを置いてください。

また,名前が「_thumbnail」で終わるアートボードはサムネイル用として扱います。デザイン用とは別の解像度で画像を書き出したい場合,そのように命名してください(「_thumbnail」は環境設定で別の文字に変えられます)。

サンプルaiファイル(Fabricant_sample.ai)はこちらからダウンロード可能です。

求められるaiファイルの状態 画像

何も起きないんだけど

セキュリティの都合でスクリプトの実行をブロックされることがあります。その場合,次の対策を見て許可を出してください。

macOS

Fabricant.appがAdobe Illustrator/Adobe Photoshopを利用する許可を求められることがあります。システム環境設定 > セキュリティとプライバシー > プライバシー > オートメーション と辿り,Fabricantの項目のAdobe Illustrator/Adobe Photoshopにチェックを入れてください。

FabricantにIllustrator/Photoshopへのアクセスを許可 画像

Windows

セキュリティソフトがFabricant内蔵のexec.exeをウイルスとみなし,隔離した可能性があります。

復元して元の場所に戻し,exec.exeを無視する設定に変更すると次回からエラーが起こらなくなります。ファイルのある場所は,アプリをインストールしたフォルダ以下 resources/.scripts_unpacked/exec.exe です。具体的な対処方法は各自ご使用のセキュリティソフトのマニュアルをご覧ください。exec.exeは前面にあるPhotoshop/Illustratorにスクリプト処理を送るために使っています。

また,インストールのとき「このコンピューターを使用しているすべてのユーザー用にインストールする」を選ぶと,Explorerからのファイルドロップがブロックされることがあります。その場合は「現在のユーザーのみにインストールする」を選び,再インストールします。

Windowsインストールオプション選択画面 画像

環境設定はどう開くの?

Fabricantアプリを起動した状態で,メニューのPreferencesを選ぶと環境設定画面が開けます。ショートカットはmacOSではcommand+K,Windowsではctrl+Kです。

環境設定メニュー 画像

どんなことが設定できるの?

デザイン用・サムネイル用・確認用の各画像の保存オプション,そしてLanguage(表示言語)です。

デザイン用画像

環境設定 > デザイン用画像 画面

接尾辞
デザイン用画像のファイル名につける接尾辞(サフィックス)です。単純に命名のみに使います。初期設定は「_design」です。

サムネイル用画像

環境設定 > サムネイル用画像 画面

サムネイル用画像
サムネイル用と判定したアートボードから,画像を書き出すかどうかを制御します。

生成する場合,サムネイル用画像を書き出し生成します。

生成しない場合,そのアートボードを無視します。画像は生成しません。

※ここを生成しないに設定しても,スクリプトがサムネイル用と判定できなかったアートボードはデザイン用として書き出されます。その場合はアートボード名の末尾と[サムネイル用画像 > 接尾辞]の文字が正確に一致しているか確かめてください。

解像度
サムネイル用画像はリアルファブリックから解像度を指定されていないため,ある程度自由に決められます。ただデザイン用画像より高品質でも意味はないので,72〜200ppiの間にしておいてください。

接尾辞
サムネイル用画像のファイル名につける接尾辞です。名前がここで指定した文字で終わるアートボードをサムネイル用と判定する,特別な単語になります。初期設定は「_thumbnail」です。

確認用画像

環境設定 > 確認用画像 画面

確認用画像
確認用画像を書き出すかどうかを制御します。

生成する場合,確認用画像を書き出し生成します。

生成しない場合,確認用画像はまったく生成しません。

幅 (px)
確認用画像の幅をピクセル単位で指定します。高さは幅と同じ数値が選ばれ,正方形になります。

確認用画像を提出するわけではないので,大きさは自由です。リアルファブリックに詳しいさんいんちさんの経験では,6000pxあれば十分に隙間を見つけられるそうです。初期値は6000になっています。

接尾辞
確認用画像のファイル名につける接尾辞です。単純に命名のみに使います。初期設定は「_preview」です。

書き出し後,確認用画像を開く
ONにすると,最終的にPhotoshopで確認用画像が開いた状態になります。今すぐに目視で確認したいときに便利です。

Language(表示言語)

環境設定 > Language 画面

環境設定画面の言語を変更できます。Japanese(日本語)とEnglish(英語)から選んでください。初期設定はJapaneseです。この項目はアプリケーションを再起動したとき適用されます。Language設定の表記はずっと英語のままです。

買いたい!

今回のスクリプトはドロップレット(macOS/Windows)セットで販売しています。noteに出店していて,アカウントがなくても買えます。

note で買う:1500円

ぱっと見だと「リアルファブリックで1500円分もとを取れるのはいつになるだろう」と思うかもしれません。しかし本当に戻ってくるお金だけを見て判断して良いのでしょうか?

少し豪華なランチくらいの価格を支払うだけで,データ不備に悩む日々とさよなら。こなしても自分を成長させない単なる作業は,もはや過去。あとはデザインを制作するだけです。ぜひご購入いただき,輝けるクリエイティブライフを手にしてください。

今回は,パターン作成とリアルファブリックに詳しいさんいんちさんとの共同制作です。ありがとうございます。

画像の仕様や生成手順など,参考にした記事はこちらです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

広告

コメントを残す