DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

Photoshopで写真をイラスト風に

追記:Photoshopで写真をイラスト風にしたいということで検索されている方へ

わたしのやり方より、Photoshop76 様 の↓こちらの内容の方が、簡単でなおかつキレイです。

イラスト風加工の限界突破!! : Photoshop テクニックス
http://photoshop76.blog.fc2.com/blog-entry-32.html


写真のイラスト風加工、さらに新しい方法編み出したよ! : Photoshop テクニックス
http://photoshop76.blog.fc2.com/blog-entry-124.html


Photoshop76 様
了解を得ましたので、ご紹介させていただきましたm(_ _)m

PhotoshopCS5以上のかたはぜひ、上記 Photoshop76 様 の方法をお試しください
(私は残念ながら古いんですよねー やってみたいんですけど(^^;))

いただいたコメントをきっかけに、見つけることが出来ました。
コメントを下さったダイスケ様、ありがとうございましたm(_ _)m

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

使用している画像についての指摘がありましたので、内容変更しましたm(_ _)m

Photoshopで写真をイラスト風に…いろんなやり方があるかと思うので参考程度にして下さい。
20110815-36.jpg


私がよくやる…っていうか、なんとかのひとつ覚えなんですけど(^^;)
線画にした画像と、塗り部分の画像を重ねると良いんではないでしょうか。
20110815-01.jpg



まずは定番、もとの画像は置いておきたいので、レイヤーを複製します。
20110815-02.jpg


複製先はもと画像と同じファイルで良いので、そのままOKします。
20110815-03.gif


複製した方のレイヤーをさわります。
20110815-04.jpg


が、それはお楽しみで置いておくとして(^^;)
先に線画を作ろうかと思います。これまたレイヤーを複製なんですが…
20110815-05.gif


線画はグレースケールで作りたいので、新規にします。
20110815-06.gif


新規のファイルが出来たら グレースケールにしてあげて下さい。
20110815-07.gif

20110815-08.gif


こちらも、もと(背景)は置いておきたいので、レイヤーの複製をします。
20110815-09.jpg


こちらは背景と同じファイルで良いので、そのままOK。
20110815-10.gif


今回は線を2種類の方法で作って見たいので、レイヤーを2つ複製しました。
20110815-11.gif


1つは、エッジのポスタリゼーションにしてみました。
20110815-12.jpg


20110815-13.jpg


20110815-14.jpg


20110815-15.jpg


20110815-16.jpg


2つめは、輪郭検出にしてみます。
20110815-17.jpg


20110815-18.jpg


あとは、これを好みで重ねるのですが…
とりあえず2つとも試してみたいので、2つ選択して、レイヤーを複製します。
20110815-19.jpg


複製先は、写真(色部分の画像)のあるファイルにしましょう。
20110815-20.gif


20110815-21.jpg


ちなみに…
色の部分(まだ背景の写真を複製しただけで、未加工)と重ねるとこんな感じです。
20110815-22.jpg


20110815-23.jpg


これを好みで加工しましょう。
しかし、その前に、
ポスタリゼーションが気に入らないので、さわってみる…
20110815-24.jpg
薄くしてもなんだかきつい感じ…
この黒色がきっときついんだろうなぁ…

と、言うことで、黒い部分の色を変更してみました。
ロゴの色を変えたいな の要領で、今回はRGBの部分(つまり黒色の線画)を
そのままチャンネルとして使ってます)
20110815-25.jpg

20110815-26.jpg

20110815-27.jpg


このあたりは お好みで。。。
今回は、ポスタリゼーションなんかしてみたり
20110815-28.gif

20110815-29.gif

20110815-30.gif

こんな感じ↓やっぱりちょっと濃いなー
20110815-31.jpg

レイヤー複製して(比較するために)結局はぼかしてみた(^^;)
20110815-32.jpg


で、結局は明るくしてみるんだな~(^^;)
20110815-33.jpg


ちなみに、輪郭検出と重ねるとこんな感じ↓
20110815-34.jpg


せっかくだから両方と重ねるとこんな感じ↓
20110815-35.jpg


長くなったので、このへんでやめときます(^^;)
空を塗っても良いかもですね~。
20110815-36.jpg


----------------------------------------------------------------------------------------------
追記:アルファチャンネルのコピーがわかりにくいようでしたので、追記します。

ざっくりというと、レイヤーをコピーして、チャンネル(新規)にコピーします。
そのチャンネルを選択範囲として使って、レイヤーを塗りつぶす、ということなんですが(^^;)
わかりにくかったかも


↓レイヤーをチャンネルにコピーする↓

コピーしたいレイヤーを(Ctrl+A)で全選択して、(Ctrl+C)でコピー
2013-01-15-tuiki01.jpg


レイヤーからチャンネルに切り替えて、新規チャンネルを作成
2013-01-15-tuiki02.jpg


新しく追加したチャンネルを選択します
2013-01-15-tuiki03.jpg


(Ctrl+V)で、先ほどコピーしたレイヤーをペースト
2013-01-15-tuiki04.jpg


白い部分がいわゆる選択範囲になるので、(Ctrl+I)で色の反転をしておきます
2013-01-15-tuiki10.jpg


後の作業のために、RGBを選択して(チャンネルの選択は解除)おきましょう
2013-01-15-tuiki05.jpg

-----------------------------------------

↓次は、コピーしたチャンネルを使って、新しいレイヤーに色をつけます↓

新規レイヤーを作成
2013-01-15-tuiki06.jpg


そのレイヤーを選択します
2013-01-15-tuiki07.jpg


「選択範囲」→「選択範囲を読み込む」
2013-01-15-tuiki08.jpg


さきほどのアルファチャンネルを読み込みます(チャンネルの白い線の部分が選択範囲で読み込まれる)
2013-01-15-tuiki09.jpg



(Shift+F5)で好きな色で塗りつぶします
2013-01-15-tuiki13.jpg



できました。後はお好みで・・・
2013-01-15-tuiki14.jpg





イラスト描きたいな

友達に「イラストレーターかフォトショップでイラストを描いてみたい」と言われて
思ったんですが、Webなら気楽にフォトショップで描いてみたらどうでしょう?

ひとそれぞれ、いろんなやり方があるので、参考程度にかる~く見て下さい。

手書きをスキャナでとります。イラスト下手なのは気にしないでください。
20110714-01.gif
全然関係ないですが、この前 友達に聞いた話を描いてみました。



とりあえず、レイヤーを複製します。
20110714-02.gif

今回、青ペンしかなかったので、ちょっと線の色を変えておこうかな…。
20110714-03.gif

この線の下に、着色用のレイヤーを作ろうかと思います。
20110714-06.gif

あとはお好みでどうぞ。
20110714-05.gif


ざっくりこんな感じ。流れはつかんでいただけたと思います(^^;)
20110714-07.jpg
余談ですが、友達、部下が残業したら自分は帰れないから、つらいわ~っ って言ってました。
部下の作業日報にハンコ押して、なにやら確認作業があるらしく、部下が10時に終わるなら
自分は10時30分、家に帰ったら11時30分なんだそうです。
しかも、管理職だから残業代は全額出ないらしい…
管理職も大変ですね(--;)



Photoshopでお気軽写真補正

DTPと違ってWebは気軽に写真がさわれるってのを書いたので、ついでに。
Photoshopでお気軽に写真修正をしてみてはどうでしょう(^^)

↓あいかわらずケータイ写真なんで補正してもイマイチですが 手順の参考に…
20110624-kansei.jpg
マンションの部分を明るくしているだけで、空は同じです。

どうしているかと言うと
ようは、レイヤーを二つ作って、重ねているだけです(^^)

まずはレイヤーを複製します。使用前、使用後を確認したいので2つ複製した方が分かりやすいかも。
20110621-01.gif

ケースバイケースと言うか…好みなんですが、今回は下の画像を補正しようと思います。
なので、上のレイヤーの表示は消しておいて下さいね。
20110621-02.gif

好みで補正して下さい(^^)
失敗してもそのレイヤーを消して、また元のレイヤーを複製したら良いので
気軽にあれこれ触って見て下さい。
20110621-03.gif

気に入った感じにできたら 20110624-keshigomu.gif 消しゴムの出番です。

消しゴムの設定なんですが、ブラシの大きさや不透明度は画像のサイズによるので、好みですね~。
参考までに、今回はこの設定です。
20110624-keshigomu2.gif

あとは、様子を見ながら
上のレイヤーの不要な部分(下のレイヤーで見せたい部分)を消しちゃいましょう。
20110621-04.gif

できました(^^)
20110624-kansei.jpg



ロゴの色を変えたいな

Webは写真の扱いが楽 ってことを書いたので、おまけ。

DTPではしませんが、Webならこんなのもアリってことで(^^;)
ロゴの色変更をご紹介。
これもやり方はいろいろあるので、参考にってことでお願いします。

チャンネルを複製して選択範囲を取る→色変更したいと思います。


例えばこんなのがあったとします↓
irokae01.gif

チャンネルを見て、比較的くっきりしているチャンネルを複製します。
(チャンネル名の上で右クリック→チャンネルの複製)
irokae03.gif


複製できました。このチャンネルを白黒くっきりにしたいので、チャンネルを指定。
irokae04.gif

このあたりの作業は好みですが、今回は「レベル補正」を使いました。
irokae02.gif

irokae05.gif

irokae06.gif

好みの状態になったら、チャンネル表示をRGBに戻します。
irokae07.gif

色変更したものを作りたいので、レイヤーを複製しておきます。
irokae09.gif

さきほどのチャンネルをこのレイヤーに読み込みます。
irokae08.gif

irokae10.gif

おや、背景が読み込まれましたね。
キーボード Ctrl + Shift + I で選択範囲の反転をしましょう。
irokae11.gif

さきほど新規で追加したレイヤーが選択されていることを確認して
irokae12.gif

後は好きな色でぬりつぶしちゃって下さい。
irokae13.gif

できました(^^) 後は透明PNGで保存したり、お好みでどうぞ。
irokae14.gif
















商品写真の切り抜き-3

商品写真の切り抜き、個人的にはパス派なんですが
クイックマスクが好きな人もいるので、ついでにご紹介。
マスクの使い方に特に決まりはないので、参考程度に見て下さい(^^)

クイックマスクを使うとチャンネルが追加されていますね。
masuku001.jpg

このチャンネル、白黒グレーOKなので、合成の時に便利です。
このチャンネルを選択範囲で読み込んで、あれこれできるのです(^^)

選択範囲→選択範囲を読み込む
masuku005.gif


画像加工は好みがあるので
会社の指定がない場合、自由にやって良いのでは。
人それぞれ、好きな効果や仕上がりとかあると思うので
いろいろ遊んでみて下さい(^^)

masuku002.gif

masuku003.gif


masuku004.gif


masuku006.jpg
この重ねて上を調節…は上下同じ画像の時にしますが
ホントに重ねて合成(集合写真に1人追加とか)の場合はしないです。

余談ですが、ここでクイックマスクをご紹介しているにもかかわらず、
実は、個人的には使ってないです(^^;)アルファチャンネル派なのです