こんにちは、デザイナーの白浜です。
今回は人気のポリゴンスタイルの画像をPhotoshopとIllustratorで作成する方法をご紹介したいと思います。
参考サイト
まず初めに今回の参考サイトから。
- 【Photoshop講座】人物をポリゴンスタイル風に加工する
こちらの動画を参考にしました。
パペットワープのキャプチャを撮って塗り分けに使うというかなり斬新なやり方で、サクサクっとポリゴンスタイルを取り入れることができる素晴らしいチュートリアルです。
今回パペットワープは使っていませんが、アクションを使った塗り分けの手法を参考にさせていただきました。
それでは具体的な製作過程をご紹介したいと思います。
写真を元にIllustratorでポリゴンのラインを描く
1. 塗り分けの準備
まず初めに元になる写真をPhotoshop上で開いて、サイズを決めます。
今回はブログのアイキャッチ用の画像なので655×437にしました。
次にCtrl+Aで全選択してIllustratorにコピー＆ペーストします。
のちのちPhotoshopに持ってくるときに楽なので今回はIllustrator上でも等倍で作業しますが、いきなりIllustrator上に写真配置して作業しても大丈夫かと思います。
塗り分けの線がわかりやすいように、不透明度を50％にしてレイヤーをロックしておきます。
2. ペンツールで線画を描く
写真を元に線画を三角形と四角形で区切っていきます。
サンプルはよくよく見ると結構多角形になっちゃってる部分もありますが……基本は三角形と四角形で区切っていきます。
初めにアウトラインを直線でつないで、その中のアンカーポイントとアンカーポイントをつないでいくとやりやすいです。
「表示」→「スマートガイド」にチェックをいれて、「アンカー」と表示されるポイントをつないでいくと仕切りやすいです。
とにかく隙間を開けないように仕切っていくことがポイントになります。隙間があると、塗り分ける時に選択範囲がうまくとれなくなります。
仕切りのコツ
のちにPhotoshopで塗り分ける際には、Illustratorのパスを元に作成した選択範囲を使って色を塗りつぶしていきます。色の切り替わりでポリゴンを仕切っていくと、塗り分けた時にいい感じに影がついて立体感のあるポリゴンに仕上がります！
くぎってくぎって……。
写真を非表示にすると、こんな感じになりました。アンドロイドのようですね。
パスをPhotoshopに読み込む
ここから先はPhotoshopで作業をしていきます。
Illustrator上で先ほど描いた線画を“塗りなし”、“線なし”にしてからコピーします。
次にポリゴン加工する写真のレイヤー上で、「パス」を選択してペーストします。
パスをペーストしたら、こんな感じで読み込んだパスと写真をピタッと合わせます。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
