Illustratorで作成したイラストをPhotoshopで利用する

Illustratorで作成したイラストをPhotshopで使用する場合、“スマートオブジェクト”としてペーストすることで、Photshop内での取り扱いがしやすくなります。

※画像をクリックすると画像のみを順番に見ることができます

スマートオブジェクトは、ビットマップデータ(ピクセルデータ)とは異なり、拡大・縮小しても画像が荒くなりません(イメージとしては、SVG形式と同じようなデータを扱っていると考えていただくと分かりやすいかもしれません)。

Illustratorで作成したパスデータをPhotoshopで利用する

Photoshopでも、もちろんパスデータを扱うことはできますが、私は、作業効率化のためあらかじめIllustratorで作成したパスデータを作りためています。

例えば、”構築”をイメージさせる歯車のアイコンを作成する場合の連携方法です。

Illustratorのパスデータをコピーします。
注意点としては、Illustrator上で線は入れないでください(“塗り”は適応して構いません)。

※画像をクリックすると画像のみを順番に見ることができます

Photoshopで編集できるようにシェイプレイヤーでペーストします。

スタイルを適応し完成させます。

Illustratorの段組設定を活用しPhotoshopでの作業効率化を図る

Illustratorには段組設定という機能があります。
一つのオブジェクトを複数に分割してくれる機能で、表組み作成等に使われます。
この機能を活用して、Photoshopでのレイアウトに生かします。

例えば、”横幅600px、高さ500pxのボックスの中に複数枚のサムネイル画像を表示したい”とします。この場合に表示できる画像の枚数・列数・行数・写真1枚あたりのサイズ・写真ごとの間隔はどれくらいにすればよいでしょうか？

まずは、Illustratorで600px×500pxのボックスを描きます。

※画像をクリックすると画像のみを順番に見ることができます

次に、段組設定を選択します。

以下のような画面が表示されますので設定していきます。
※プレビューにチェックすると画面を確認しながら設定できます。

実際には全ての数値を入力する必要はありません。
どれかの数値を入力するだけで、Illustratorが自動で計算してくれます。
また、”Illustratorで作成したパスデータをPhotoshopで利用する”の項目でも説明したように、このパスデータをPhotoshop上でシェイプレイヤーとしてペーストすれば、Photoshopでの編集も可能です。

注意点としては、こちらに関しても線は引かないようにします。
線の位置(中央・内側・外側)によってサイズや間隔が分かりにくくなるためです。
※Photoshopのスタイル(境界線)で適応しましょう。
数値を入力する際は、それぞれの数値に少数点が表示されないようにしてください。
Webでは1px以下がないためです。

これらの機能を活用し連携させることで、Photoshop上でレイアウトのやり直し、電卓等を使ってその都度計算する、といったことも大幅に軽減されます。
私は、ワイヤフレーム作成時にもこれらの手順を取り入れ、作業の効率化を図っています。