写真をイラスト（アニメ）風に加工する方法
先日、こんな動画を作りました。
この動画の特徴は２点あります。
① 写真をイラスト（アニメ）風に加工していること
② 視差効果（パララックス）*を使っていること
パララックスとは … 要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法
引用：ワンゴジュウゴ
この２つを使えば、１枚の写真から
こんな感じのアニメ風動画を作ることができます。
実はこういう動画を作るのは今回が初めてで、ちょっと苦戦しました。
でも作っててめちゃくちゃ楽しかった…！
今から具体的な作り方をご紹介していきますが、少し長くなるので、
この記事ではまず写真をイラスト（アニメ）風に加工する方法を説明します。
実写動画とはまた違うテイストの動画を作ってみたい人はぜひ挑戦してみてください！
この記事の目次
必要なもの
写真をイラスト（アニメ）風に加工した動画を作るのに必要なソフトは以下の２つ。
※どちらもAdobe Creative Cloudのコンプリートプランに含まれています。
① Photoshop（フォトショップ）
画像を加工するソフト。
今回は画像をイラスト風に加工するのと、画像を複数のレイヤーに分けるために使います。
レイヤーとは…グラフィック・ソフトで画像を描画する面のこと。
引用：コトバンク
② After Effects（アフターエフェクツ）
画像にアニメーションをつけるソフト。
特殊効果をつけたり合成動画を作るときにも活躍します。
それぞれ単体で購入できますが、コンプリートプランは上記の他にも様々なソフトが含まれていてお得です。
動画作りに限らず、デザインなどクリエイティブなことをしたい方にはオススメ。
写真をイラスト（アニメ）風に加工する
まず、一口に「イラスト（アニメ）風」といっても、アメコミ、抽象画、油絵、ペーパーアートなど多種多様なテイストがあります。
そしてそれらは、スマホのアプリで割と簡単に作れちゃったりします。
参考記事（外部サイト）：「簡単に作成できる「似顔絵アプリ・サイト」おすすめ20選。SNSアイコンに最適」
もちろん上記のアプリで作ってもいいんですが、今回はAfter Effectsでアニメーションをつけるときに連携しやすいPhotoshopを使った方法をご紹介します。
絵のテイストとしては、この写真を
こういう感じにしていきます。
① 背景を複製する
まずPhotoshopで素材となる写真を開いたら、背景を複製します。
レイヤーを右クリックし、「レイヤーを複製」。
「背景コピー」というレイヤーが作成されます。
② カットアウトを適用する
「フィルター」から「フィルターギャラリー」を選択。
「アーティスティック」の項目から「カットアウト」を選択。
基本的に「レベル値」「エッジの単純さ」「エッジの正確さ」の数値は高めの設定でいいと思いますが、
プレビューを確認しながら好みの値に微調整してください。
これで、精細な写真が、おおまかな画像に変わりました。
カットアウトをかけることで違和感が出る部分（細かいギザギザになって汚いなど）は、
レイヤーマスクを作成し、
黒ブラシで塗れば、その部分だけカットアウトを除けます。
カットアウトを除くと、元の精細な写真が出てくるわけですが、
次にかける ぼかし でイラストっぽい柔らかな感じは表現できます。
③ ぼかし（表面）をかける
ctrl + alt +shift + E（Macはcommand + alt +shift + E）で、背景を含む全てを統合したレイヤーをコピーします。
レイヤーの一番上にできあがった「レイヤー１」にぼかしをかけます。
「フィルター」→「ぼかし」→「ぼかし（表面）」を選択。
プレビューを見ながら、イメージに近づくよう調整します。
④ 色味を調整する
最後に色味などを調整します。
「レイヤー」→「新規調整レイヤー」→「トーンカーブ」を選択。
カーブをS字にして、明るく、コントラストを強めにします。
次に彩度を調整します。
「レイヤー」→「新規調整レイヤー」→「色相・彩度」を選択。
作りたいイメージによって変わると思いますが、僕はだいたい以下の設定が多いです。
グリーン系：色相を+15〜20くらいにして青寄りに。彩度を-30くらい下げる。
イエロー系：彩度を-20くらい下げる。
シアン：彩度を-20くらい下げる。
いろいろ数値をいじってイメージに近づけてみてください。
完成！
イラストっぽい画像になったでしょうか？
次回はこれに動きをつけて、遠近感を演出していきます。
質問などはTwitter（@ginzablow）などから気軽に投げてもらえればと思います！
