写真からWeb用画像を作成

[toc]
勢いこんでPCにインストールしているadobeのソフトもその都度使い方を調べて、また数ヶ月後、同じ作業をやろうとして思い出せずadobeサイトの使い方説明を見て、また数ヶ月後繰り返す。そんな事が結構あります。「必要だ」って思ったその時はその作業がweb作成上、必須でも個人サイトでは実はそんなに大量だったり頻度も少ないものです。画像とか動画サイトで無いですから。

それでもまた調べ直すことになるのも面倒です。と言うわけで覚え書きをしていこうと思います。

写真からイラスト画像作成

私のブログは説明、解説ブログなんで画像はその解説の際にソフトやブラウザのキャプチャー画像で事足りるわけですが、WordPressで作成しているのでアイキャッチ画像だったり、時には感想だけで費やす記事もあったりして画像が必要な時もあります。

適当にFireworks ccで作成して遊んでいるわけですが、込み入った物や動物を一から描くのは難しく面倒です。そこで写真から画像を作る方法について調べてみました。

駅の写真をイラスト画像に加工

私が撮影した江ノ島駅です。これをWebに使えるイラスト画像にしてみます。
使うソフトはこれまで使ってこなかったadobe Photoshop ccと頻繁に使用しているFireworks ccです。Web用の比較的単純な画像編集作業はFireworks ccが一番速いのです。

Fireworks ccで周囲を消しました

Fireworks ccで画像を開いて「多角形なげなわツール」を選択します。

なげなわツールはその囲まれた範囲のみ有効となるので、屋根を上とか囲んで消しゴムツールで消していけば良いわけです。

Fireworks ccと言ってもadobeはすでに開発中止発表されていますし、このあたりの作業はFireworks4とかMXあたりでも可能です。もちろんCS6とかでも。
アニメ画像風になるように加工するので「フィルター」メニュー→「シャープ」→「シャープ（強）」を3度ほど繰り返して「フィルター」メニュー→「カラーを調整」→「明るさ、コントラスト」も数値を上げました。上の画像はjpgでWeb用に容量落とした物ですが加工画像はpngです。

Photoshop ccで編集します

ここからはいつもPhotoshopを使う時はそうなのですが、他人の解説に譲ります。このサイトを元に作業しました。
[参考サイト]
【小ワザ】Adobe Photoshopで写真をアニメ風に加工する

・画像をPhotoshop ccで開いて右下「3D」「レイヤー」「チャンネル」と並んでいるウィンドウのレイヤーを選択します。加工する画像が小さくあって私の場合は横に「レイヤー0」となっています。（ここは画像によって名称は変わります）そこにマウスを持って行くと手の形にカーソルが変わるので「レイヤー０」をクリックして下に引っ張ります。

ゴミ箱アイコンが一番右にあってその左隣が「新規レイヤーを作成」アイコンです。左下が折れている長方形の形をしています。そこにつかんでいるマウスカーソルが合わせてマウスの押しボタンから手を離します。ドラッグ＆ドロップってやつです。