creatersnest13

レイヤーをそのままIllustratorからPhotoshopに移動させる方法


Illustratorで作成したオブジェクトを、レイヤー階層を保持したままPhotoshopに移動させる方法をご紹介いたします。
複雑な形状のパスを作る・角度を設定してオブジェクトをコピーする等の作業はIllustratorで、質感をつける作業はPhotoshopで…と、それぞれの特長を生かして制作する事ができます。
両方のソフトを活用して、効率アップを図りましょう。

移動するデータの内容について

今回ご紹介するデータの移動方法に関し、最初にご理解頂きたい点があります。

レイヤー情報を保持したまま移動できるが、オブジェクトの情報は画像データになる」ということです。
移動したデータは、Photoshopでは「ベタ塗りのオブジェクト」に変換されてしまいます。
パスをPhotoshopで編集できる状態でコピーする方法は後述いたします。

 

レイヤーを保持したままデータを移動する方法

Illustratorでデータを作成する

1.Illustratorでレイヤー分けされたデータを作成します。
今回は「レース」「リボン」「点々のワク」のオブジェクトをIllustratorで作成しました。
オブジェクトを円形にコピーする操作は、photoshopよりIllustratorの方が操作しやすいですよね。

2.レイヤーに分ける
それぞれのオブジェクトをレイヤーに分けます。
尚、グループはグループ毎にまとまった状態でphotoshopで開くことができます。

また、背景用に四角形を一つ作成し配置しておきます。
作りたい画像のサイズになるようにしてください。
データをphotoshopで開いた際に、その四角形が画像の大きさになります。
四角形を背景に配置しておけば、オブジェクトの大きさや中心をずらさずに開くことができます。

オブジェクト作成

Photoshop形式でデータを書き出す(保存する)

1.「ファイル」メニュー「書き出し」を選択します。

保存1
2.保存先とファイル名を設定します。
3.「書き出し」ダイアログ下部にある「ファイルの種類」を「Phostoshop(PSD)」にして「保存」をクリックします。
保存3

 

4.「Photoshop書き出しオプション」ダイアログで、オプションの「レイヤーを保持」にチェックをつけて「OK」をクリックします。

保存4

 

Illustratorでの操作は以上です。

Photoshopでデータを開く

ここからの作業はPhotoshopで行います。

「ファイル」メニュー「開く」より、先ほど保存したデータを開きます。
レイヤーパレットを確認すると、Illustratorで設定したレイヤー階層が保持されていることが分かります。

photoshopで開く

オブジェクトに着色したり、レイヤー効果を施します。
罫線を追加する等して、メッセージカード風に仕上げました。

完成画像

 

パスデータをphotoshopで使用する場合

パスデータをphotoshopで使用する場合の操作もご紹介します。

Illustratorで選択したオブジェクトを「コピー」し、photoshopのファイル上で「ペースト」するだけです。
※ペーストの際に「ペースト形式」で「パス」を選択します。

この方法ですと、photoshopでパスを編集できるようになりますが、レイヤー階層は保持されません。

 

まとめ

簡単な操作でデータの移動ができることをご理解頂けましたでしょうか。
どちらかのソフトだけで作業しても良いのですが、それぞれの得意な部分を生かすことでデザイン制作の効率アップに繋がるはずです。
レイヤー階層を保持するかパスのまま移動するか、作業に合わせて移動方法も選んでみてください。
今後の制作でお役に立てれば幸いです。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Illustratorってとっつきにくいなあと思っていたのですが、便利な機能を知っていくうちに楽しくなってきました。 「illustratorって楽しいな」と感じるきっかけになることができれば嬉しいです。

Next Article【2015年版】女性らしいテイストに合う日本語の極細フォント50選