CG・映像デザイナー技術ブログ

【Photoshop】Illustratorからコピー・変換する時の注意点まとめ

eyecatch_ photoshop

本記事ではIllustratorからコピー・変換する時のアンチエイリアスの状態やシェイプの状態などの注意点まとめを紹介いたします。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

Illustratorからコピーする時にアンチエイリアスをかけない方法

UIを作る時にパーツの作り込みはイラレで、その素材をコピペして、フォトショップで加工や配置などをすることが結構あります。
そのコンバート時にアンチエイリアス(ボケ)が入ることがあるので、アンチエイリアスをかけない方法を紹介します。

STEP.1
Illustratorでのサンプル素材制作

1. パスでラインを引く
2. 線>破線にチェック

と、点線を作成してみます。

この素材をこれを「コピー」します。

STEP.2
Photoshopへのコンバート

1. このままペースト
2. ペースト形式を選択


このままどのペースト形式を選んでもアンチエイリアスが入ってしまいます!

STEP.2
アンチエイリアスを切る設定

・イラレ側のデータをアウトラインかける
・イラレ側のデータをラスタライズする
・フォトショ側の環境設定をニアレストネイバー法にする

等々、いろいろ試したいのですが解決せず。
しかし一つだけ上手くいく設定がありました。

・まずフォトショップへのペースト時にスマートオブジェクトまたはピクセルを選択

・○(Enter)を押す前に、三角のアンチエイリアスボタンを切る

これでアンチエイリアスの入らないシャープなままでコンバートできました!

※まだ検証数が少ないので、上手くいかないケースがあるかもしれません。

細かいことなのですが、今後も細部まで素材に気を配ることで、ピクセル・パーフェクトな画面を目指していきます。

Illustratorからのデータをシェイプに変換する方法

イラレで作ったデータをフォトショップに持ってくると、ディティールのアンチエイリアスが汚すぎて嫌になることがあります。

形によっては、アンチをかけない等で回避できるのですが、円形と矩形が複合していたりすると、そうもいかないのでシェイプに変換する方法を試してみました。

STEP.1
Illustratorのサンプルデータ

下記のようなデータを作成

STEP.2
Photoshopにスマートオブジェクトで貼り付け
まずはそのままイラレからコピペして、スマートオブジェクトで貼り付けてみます。

細かいのですが矩形は不必要なアンチが入ってしまいます。
また円の形もアンチエイリアスのかかり方が汚いです。

STEP.3
Photoshopにシェイプで貼り付け

イラレからコピペでシェイプを選択して貼り付けます。

このような状態に。

パス選択にして、丸だけを選択してCtrl+Xで切り取ります。
パスウインドウで新規パスを制作して貼り付け

パスを選択して、レイヤー>新規塗りつぶしレイヤー>ベタ塗りを作成。シェイプが作成されます。丸と四角それぞれシェイプ化。


シェイプなので、矩形にむだなアンチエイリアスがなく、円もスマートオブジェクトより微妙にきれいな状態で表示されます。

Illustratorのデータをシェイプに変換する方法まとめ

そもそもはじめからPhotoshopで作成すれば良いのですが、複雑な図形をパスで描くのはイラストレーターが適しているので、どうにか綺麗な状態で持っていけるのか試してみました。

シェイプ化は手間はかかりますし、図形の修正はイラレですぐにできないので、まだまだ課題は多いです。

以上、すいみん(@cg_method)でした!

Photoshopに関する参考記事・ツール・書籍のまとめ

Photoshopに関する記事を下記にまとめました。



photoshop-summary-article


便利な機能紹介!Photoshopに関する作り方まとめ

フォトショップのソフトウェア購入


eyecatch-buy-adobe-creative-cloud
【Adobe Creative Cloud】最安!アドビ認定スクールから購入する方法(+講座付き)

フォトショップの参考書籍

assistant すいみん

独学で勉強できてしまうPhotoshopですが、他の人の手法を見ると全然使いこなせてなかったことに気がつくこともあります