HYPの勝手に語ろうか

よく使われているタグ

こんにちは、HYPのかなこです。

WEB用の画像を作成する上で、背景を透過させたい事って多々ありますよね。

イチからデジタルを用いて自分でデザインしたもの!
であるならば支障は無いと思うのですが、スキャンした手書きのものを透過させるとなると、ちょっとばかり面倒です。

本格的なイラストレーションなら、パスで作成した方が良いかとは思うのですが。
枚数を描くのがしんどい、手書きを活かしたいなら、スキャンに限る。ふんふん。

そんなわけで、今回はチャンネルを使って「スキャンしたイラストや文字をPhotoshopで透過させる方法」についてお話ししていきます。

題材はコチラ

ラッコ系女子(仮)

スタンプの新作(仮)を使って、透過させる方法を紹介していきたいと思います。
160214_01
ラッコ系女子(仮)です。

ラッコ系女子(仮)の案は、前作の【栗きんとんさん】の前から出していたりしますが、線が多くてめんd…難しいので後回しにしてしまっています。
ラッコっぽいのですが、言動は別にラッコとは何も関係がない仕様となっております。

ちなみに栗きんとんさん。一番売れてないといっても過言ではないですが、個人的に使用率は一番高いです。
151126_03

ふくふく栗きんとんさん

ちなみに栗きんとんさんは、半紙に墨+筆で描いたものをスキャンして使っています。

その1:スキャンします

160214_02
スキャンしたままの状態です。
真っ白な紙に濃いめに線を描いているので、ほとんど白が飛んでいますね。
紙の端っこがちょっと見えている程度です。

その2:明るさ調整とゴミ取りをします

透過したい部分を真っ白に、線で残したい部分をまっ黒にしていきます。

160214_03
パッと見は白で飛んでいても、拡大するとまだまだ粗いところが目立ちますね。

真っ黒にしたいので、彩度をMAXまで下げます。
【Ctrl】+【Shift】+【U】がショートカットなので、覚えておくと便利ですよ。

160214_04
背景をさらにぶっ飛ばして、ゴミがあれば消すor白で塗りつぶします。

残したい色と飛ばしたい色の差が激しい時(コントラストを強調したい時)は、私はレベル補正を使います。

160214_05
ちょっと解りづらいですが、ぶっ飛ばしています。
ここで飛ばし残しがあるとキレイに透過されないので、ご注意をば。

160214_06
線も【まっ黒】なレベルまで持っていくため、念の為トーンカーブでちょちょいっと全体を暗くします。
色が残っていると一緒に暗くなってしまうので、必ず白い部分を飛ばしてから暗くしましょう。
白は白いまま、色がついている部分のみ暗くなります。

160214_07
こんな感じでOKかなと。

その3:チャンネルから黒い部分のみを選択させる

160214_08
チャンネルを選択し、RGB以外のものにします。
本のイラストに色がついている場合はその色に応じたカラーを選択するといいと思うのですが、今回はテケトーにレッドで。
ちなみにチャンネルの機能は使いこなせていません。ひぃ。

160214_09
RGB以外を選んだ(表示させた)状態から、点線になっている○を選びます。
○を選び終わったら、再びチャンネルをRGBに戻します。

160214_10
すると、白い部分のみが選択されます。
画像は選択範囲をわかりやすくするため、クイックマスクモードにしています。
赤い部分以外が選択されてる部分になります。

その4:選択範囲を反転させ、線のみを選択する

160214_11
この状態から選択範囲を反転させ、線を選択した状態にします。上と同じくクイックマスクにしています。
【Ctrl】+【Shift】+【i】がショートカットなので、覚えておくと便利ですよ。

160214_12
こんな感じで、線の部分のみが選択されます。

160214_13
その選択部分を、黒で塗りつぶします。
上記の画像は、背景の白を非表示にしています。
【Shift】+【F5】がショートカットなので、覚えておくと便利ですよ。

その5:無駄な線が残っていないかチェックする方法

160214_20
レイヤースタイルで、境界線を選択し、太めにしてみてください。
拡大しないと見えない、残してしまった部分が見えてきますよ。

このように残している部分が多い場合は、再度白く飛ばすことから始めた方が逆に楽だと思います。
残し部分が少ない場合は、一個ずつ消していっても良いですね。

その6:出来上がり!

160214_14
これで完成です!!
線が薄くなってしまっている場合は、レイヤーを複製して重ねると良いです。
【Ctrl】+【J】がショートカットなので、覚えておくと便利ですよ。

透過後の作成例

160214_15
ここからパスを使って色付けをしています。シェイプにしてると調整が楽ですよ。

160214_16
こんな感じ。
ちょっと色味は仮にしておいてください。
イラストを描くときに、いつも色を考えていない私です。

160214_19
文字に境界線をつけたりも出来ます。

160214_17
背景も付け放題。いじり放題です。

160214_18
いじり放題です。

やり方はいろいろ

私は一番この方法がやりやすいのですが、他にもいろいろあるようです。

単純に選択範囲を使って、近似値を選択から黒だけを選ぶ、そこから塗りつぶす、でも良いですし。
マスクを使った方法なんぞもあるようですね。

いろいろしてみて、自分のお気に入りのやり方を見つけてくださいね!!

TIPS

デザイン

観光

ハードウェア

生活&ダイエット