Advertisement

scan-drawing-top (1)

 

ほんの数ステップのみで、手描きイラストをPhotoshopに取り込む方法をご紹介します。これからのシーズン、クリスマスや年賀状の作成などに活用できるテクニックで、オリジナル性の高いデザインを作成することができます。

 

 

今回は、切り抜いたレイヤーを素早く保存することができる、「画像アセット」機能の使い方も一緒にまとめています。

 

 

 

詳細は以下から。

 

 

 

01. イラストをPhotoshopに取り込もう。

 

今回は、画用紙のうえに水彩絵の具を使ってペイントしています。スキャナーの最大解像度で取り込むことで、よりディテールまで表現することができます。

shoes011

 

 

 

Photoshopにイラストを取り込んだ様子がこちら。解像度600ppi、4453x6490pxで取り込んでいます。また、レイヤーパネルよりレイヤーを選択し、ダブルクリックし、レイヤーのロックを解除しておきましょう。

step2

 

 

 

02. 「レベル補正」でゴミを除去しよう。

 

ファイルをズームアップして見てみると、画用紙の質感も一緒にスキャンされてしまっています。まずこれらの不要な部分を修正しましょう。

step3

 

 

 

メインメニューより「イメージ」>「色調補正」>「レベル補正」(ショットカットキーは、Command + L)を選択しましょう。画像の補正には、「シャドウ」、「中間調」、「ハイライト」の三角スライダを左右に動かし調整します。

 

今回は、背景をより白くしたいので、「ハイライト」を左にずらし、「シャドウ」を少しだけ右に移動させました。

step4

 

 

 

こうすることで、画用紙の質感は消え、背景のみを切り取りやすくなります。また同時に、水彩イラストの発色をより鮮やかにすることもできます。

step3-final

 

 

 

03. 背景を取り除こう。

 

メインメニューより「選択範囲」>「色域指定」を選択したら、取り除きたい背景部分(真っ白のエリア)をクリックして、OKボタンをクリックしましょう。

step6

 

 

 

背景部分のみが選択範囲として指定されているのを確認したら、Deleteキーを押しましょう。

step8

 

 

 

背景部分のみきれいに削除されているのが分かります。

step7

 

 

 

04. パーツごとに分けていこう。

 

今回はそれぞれの靴イラストを、どんなデザインにもスタンプ感覚で利用できる、PNGファイルに変換します。

 

ツールボックスより「フリーフォームペンツール」を選択します。オプションバーで、「パス」を作成が選択されているか確認しておきましょう。あとは、イラストの周りを囲んでいきましょう。

step9

 

 

 

カンバス上で右クリック>「選択範囲を作成」を選択しましょう。

step10

 

 

 

表示されたダイアログボックスに、「ぼかしの半径: 0px」で設定しましょう。

step11

 

 

 

あとは選択範囲をコピー(Command + C)で、ペースト(Command + V)すれば完了です。

step-spin-5

 

 

 

05. 「画像アセット」機能を使って保存しよう。

 

すべてのパーツを切り抜いたら、PNGファイルに保存していきましょう。今回は、スライスツールを利用せずに、PhotoshopCCで採用された「画像アセット」機能を活用します。

 

メインメニューより「ファイル」>「生成」>「画像アセット」にチェックを入れます。

step12

 

 

 

あとはレイヤーパネルより、レイヤー毎に保存したいファイル名とファイル形式に書き換えましょう。今回は、「show_pink.png」としています。

step13

 

 

 

ファイル名を書き換えると同時に、ファイルが保存されている場所(今回はデスクトップ)に、フォルダが作成されます。

image-asset

 

 

 

フォルダを確認すると、パーツに沿って切り取られたPNGファイルを確認することができます。

スクリーンショット-2015-12-06-15.39.58

 

 

 

個別にスライスを設定する必要もなく、ファイル名を変更するだけで、お好みのファイル形式でレイヤーを保存でき、デザイン制作時間の短縮にもなります。

step14

 

 

 

完成

 

簡単なステップのみで、手書きイラストやスケッチをPhotoshopに取り込むことができます。オリジナル性の高いデザインにオススメで、覚えておきたいテクニックと言えるでしょう。

scan-drawing-top (1)

 

 

サムネイル & スケッチ @: Ai Ueno – Tumblr