写真からWeb用画像を作成

2017年9月15日

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

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

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

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

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

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

enoshimaeki01

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

Fireworks ccで周囲を消しました

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

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

enoshimaeki02

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

Photoshop ccで編集します

ここからはいつもPhotoshopを使う時はそうなのですが、他人の解説に譲ります。このサイトを元に作業しました。
[参考サイト]
http://dev.classmethod.jp/visual-design/photoshop/adobe-photoshop-photo-anime/【小ワザ】Adobe Photoshopで写真をアニメ風に加工する

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

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

fireworksgazokako03

複製が表示されます。

複製したレイヤーを選択した状態

作成したレイヤー0のコピーを選択して、フィルターメニュー > 表現手法 > 輪郭検出 クリックします。
fireworksgazokako04

輪郭が抽出されます。
fireworksgazokako05

通常を乗算にします

fireworksgazokako06
右下のウィンドウで「通常」となっているところをクリックしてプルダウンメニューから「乗算」をクリックします。

fireworksgazokako07

「乗算」を選択すると横に「不透明度」が表示されています。100%だとイラスト風、0%なら写真風になります。%表示されているところをクリックするとスライダーがポップアップされるので好みの位置に設定します。

ここで書き出してしまえば一応アニメ風、イラスト風な画像にできます。

Web用に加工

私はWeb用のかなり小さい画像表示として、アイキャッチなどとして利用することが多いので、さらにPhotoshop で書き出した画像をFireworks cc で開いてシャープ(強)を2度ほどかけて輪郭を強調した後、GIF画像としてかなり色数を減らして書き出しました。
大きめ
fireworksgazokako08

小さめ
fireworksgazokako09

かなり軽量化できますし、便利です。