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

  • このエントリーをはてなブックマークに追加
  • 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両方必要になります。

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

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

次の通りです。

macOS用(app)
  • macOS 10.14以上に対応。macOS 10.14/10.15(Intel),11.6/12.7/13.6/14.3(Apple Silicon)で動作を確認
  • Illustrator CS6,またはそれ以上のIllustratorに対応。CS6,CC2015.3〜2024で動作を確認
  • Photoshop CC 2018,またはそれ以上のPhotoshopに対応。CC2018〜2024で動作を確認。古いバージョンでも動作の可能性はあり
Windows用(exe)
  • Windows 10以上に対応。Windows 10/11で動作を確認
  • Illustrator 2023,またはそれ以上のIllustratorに対応。2023〜2024で動作を確認。古いバージョンでも動作の可能性はあり
  • Photoshop 2023,またはそれ以上のPhotoshopに対応。2023〜2024で動作を確認。古いバージョンでも動作の可能性はあり

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

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

インストールが済んだら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ファイルの状態 画像

何も起きないんだけど

「Please start Illustrator and Photoshop to execute.」などと出て進まないことがあります。対象のアプリを起動してから実行してくださいという意味です。FabricantはIllustratorとPhotoshopの両方を使うので,両方起動してからファイルをドロップしてください。

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

macOS

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

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

Windows

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

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

環境設定はどう開くの?

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

環境設定メニュー 画像

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

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

デザイン用画像

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

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

サムネイル用画像

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

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

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

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

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

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

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

確認用画像

環境設定 > 確認用 画面

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

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

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

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

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

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

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

Language(表示言語)

環境設定 > Language 画面

環境設定画面の言語を変更できます。Japanese(日本語)とEnglish(英語)から選んでください。初期設定はJapaneseです。Language設定の表記はずっと英語のままです。

買いたい!

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

note で買う:1500円

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

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

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

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

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

SNSでもご購読できます。

広告

コメント

  1. shima より:

    Windows10でFabricantを起動すると、エラーとなりアプリが動作しません。
    resources/.scripts_unpacked内のexec.exeは隔離されておらず、インストール時にウイルス対策ソフトで何かしらブロックもされていません。
    表示は「please start target application and try again. / Line#246:Throw,msg / The current thread will exit」となっています。

    aiのファイル名を変更したり、aiを起動したり閉じたり、ドロップやメニューバーでの操作など試してみましたがいずれも同じ表示となりダメでした。
    どうすればよいか教えていただけないでしょうか。

    1. したたか企画 より:

      お問い合わせありがとうございます。

      FabricantがIllustratorを認識していないようです。先日似たような問題があり,Illustrator 2023から2022にしたら解決しました。試してみてください。

      現在使用中のIllustratorのバージョンはいくつでしょうか(例:27.1.1)?

      1. したたか企画 より:

        言うのを忘れていましたが,このアプリはIllustratorとPhotoshop両方使うので,両方起動しておく必要があります。

        1. shima より:

          ご返信ありがとうございました。

          試した操作ではPhotoshopを起動していなかったので、IllustratorとPhotoshopの両方を起動したうえでファイルをFabricantへドロップしたところ、無事に作成されました。
          使用しているソフトのバージョンは、いずれも2021でした。

          お騒がせしてすみません。

          1. したたか企画 より:

            ご報告ありがとうございます。解決したようでよかったです。

コメントを残す