2017/12/16

【ずぼらdeイラレ】マスクの余白を避ける!アートボードで画像書き出し


Pocket

こんにちは、たじまです!今回のテーマはずぼらdeイラレ 画像書き出し編!(続編は未定です!)

この記事を「Adobe Illustrator Advent Calendar 2017」に捧げます。

この記事で伝授するのは表題の通り画像書き出しです。
Illustrator大好きっ子であり、めんどくさがり極まる私が時折やる、クリッピングマスクの線を流用して一括アートボード変換で、画像を書き出すズボラ術。

面倒くさい、つらい、そんな感情から編み出しましたが、荒いので取り入れるのは自己責任でどうぞ。また、書き出しの細かい設定(画質や書き出し先など)については記載してません。

素材はadobeクリエイティブクラウドのアセットから、webのデザインの素材をお借りしています。
また、本記事の内容を使用して万が一障害があった場合の責任は負いません。あしからず。

アセット機能と書き出しトラブルについて

アセットの基本的なこと

皆さんはイラストレーターのアセットという機能をご存知ですか?一応紹介させてくださいね。

これがアセットパネル

アセットパネルはウィンドウから出せる

アセットパネルに画像やオブジェクトを突っ込めば、まとめて書き出し

書き出したい画像やオブジェクトをアセットパネルにクリック&ドロップ 書き出しは一括で行えます

データをまとめて書き出せて便利でアセット大好き。結婚したい。

マスクオブジェクトは余白も一緒に書き出される

さて、クリッピングマスクした画像もアセットパネルに入れて、書き出ししたら…余白がついてきました。

余白のついた画像のスクリーンショット

私、マスクで透明になった部分もつけて書き出してくださいって言ったかな。
うん!言ってないな!おこ(怒)です!

  • アセットと結婚したい理由
    • まとめられる
    • 要領がいい
    • 時間短縮できる
  • アセットにおこ(怒)!な理由
    • マスクに余白が出る

おこ(怒)!の理由「マスクに余白が出る」をどうにかします。プンスカ!

そうだ!アートボード使おう!

オブジェクトぴったりのアートボード

もともと画像書き出しにアートボードを使っていた私はすぐさまそちらに切り替え。

アートボードツールに切り替え、クリッピングマスクの縁(線)をクリック

動画で内容を詳細に伝達

私「そいや!そいや!(画像ポチポチクリックしてる)」
私「これでアセットの書き出し画面のタブからアートボードに切り替えて書き出しにしようかな」

アートボードの書き出し画面

それでもだるい私のずぼら術

私「(アートボード使いながら)これ一個一個クリックせなあかんのか…。」
私(ああ〜だるい。Mなので足でも踏んでもらわないとやる気おきねえ〜。)
私(1こずつクリックすらしたくない。呼吸すらしんどい。つらみ。)

そんな私が思いついた、超ずぼら術をお伝えします。

選択オブジェクトをアートボードに一括変換

ダイレクト選択ツールでマスクされた写真のマスクのフチ(線)を1つ選択

ダイレクト選択ツールで画像のフチ(線)を選ぶ

メニューバーから「選択→オブジェクト→クリッピングマスク」

パネル選択の遷移を示す

クリッピングマスクされたオブジェクトが全部選択されるのでコピー!

一括選択されていたらコピーする

マスク画像の影響を抑えるために、コピー元のレイヤーをロックして、新規レイヤーにペースト

レイヤーでロックとペースト前、ロックとペースト後を表現

マスクの線が選ばれた状態のままオブジェクトをアートボードに変換(これでそれぞれのオブジェクトを一括でアートボードサイズにできます)

メニューバーのファイル、書き出し、スクリーン用に書き出しで設定

ちょっとステップが多いでのすが、いちいちクリックするより楽です。
ここはオブジェクトを複数選択し、まとめてアートボードに変えれるところが肝なので自由にアレンジして一番やりやすい方法を、ぜひ見つけてくださいね

最後に、つまづきポイントをご案内します。

「アートボードに変換」にはルールがある

楽チンでしたが、アートボードに変換の機能は四角形だけなんです。

アートボードに変換できない際に出るエラー画面

四角以外はポチポチしないとなりません。
(これもマスクの囲い線を流用しとくと早めな感じです)
ポチポチ動画おいときますね。ポチポチ…ポチポチ…

CMYK猫が円形マスクされており、手動で選択するイメージ

という訳で、私が稀にやるズボライラレ術でした。
再度注意書き掲載しておきますね。
本記事の内容を使用して万が一障害があった場合の責任は負いません。あしからず。

以上です。謎tipsいっぱい持ってるけど、画像の書き出しの大変さに第二弾が想像できないたじまでした。(でも需要があったら頑張るぞ〜!)

Pocket

画像:たじまちはる

この記事を書いたのは > たじまちはる

企業/事業戦略、ブランド戦略、販促計画など、根本を組立てる仕事が得意。
紙、立体物、店頭、Web、動画など幅広い分野の企画とデザインに携わっています。

デザイン(和訳:設計)を活かすためのお勉強記事を主体に執筆してます。

SNS:Twitter/Facebook/Instagram

Works:portfolio