BLOG ブログ

> ブログ

こんにちは!浜松のWEBデザイナーこたです。

photoshopって便利ですよね。
WEBデザインをするうえでは欠かせないツールですが、photoshop初心者の方はどのように勉強していいかわからないとよく耳に聞きます。
明確な勉強方法は「参考書を買って基礎をみっちりやること」だと思いますが、正直これでは挫折します。
なぜなら、参考書はやっていて楽しくないからです。

学生の頃を思い出しても、字がみっちり書かれた教科書を見ても、やる気は湧きませんでしたよね。
それと同じで、なるべく負担のない方法で勉強しなければ長くは続きません。

さて、先日に下記のツイートをしました。

Photoshopの練習は”遊び心”が大切です!
常に楽しんで練習しています!

楽しんで練習することが僕は最も大切なことだと思っています。
そこで今回ご紹介するのは「アニメ風の加工方法」について紹介します。

アニメの様な画像を作ってみたいという方は結構いるのではないかと思ったので、良かったら楽しんで作成してみてください。

アニメ風加工方法

画像はアニメ風に加工したいお好きなフリー画像をダウンロードしてください。

1. HDRトーンで画像全体を鮮やかにする

メニューバーから[イメージ]→[色調補正]→[HDRトーン]をクリックしましょう。
各種設定し、OKを押します。

[エッジ光彩]
半径 = 186px
強さ = 1.07
[トーンとディティール]
ガンマ = 1.41
露出高 = +0.14
ディティール = +30%
[詳細]
シャドウ = -100%
ハイライト = -6%
自然な彩度 = +67%
彩度 = +39%


2. レイヤーを3つ複製します

[背景レイヤー]をクリックし、レイヤーを3つ複製し、それぞれレイヤーの名前をつけます。
今回は[アニメ1],[アニメ2],[アニメ3]とします。

レイヤー複製方法
Windows Control + J
Mac Command + J

3. [アニメ3]の色調補正を設定

[アニメ3]レイヤーを選択し、メニューバーから[イメージ]→[色調補正]→[2階調化]をクリックしましょう。
[2階調化する境界のしきい値]を185に設定し、OKを押します。
[アニメ3]レイヤーを一旦非表示にします。

[2階調化する境界のしきい値] = 185

4. [アニメ2]のハイパスと色調補正を設定

(1) [ハイパス]設定

[アニメ2]レイヤーを選択し、メニューバーから[フィルター]→[その他]→[ハイパス]をクリックしましょう。

[ハイパス] = 0.4pixel


(2) [2階調化]設定

[アニメ2]レイヤーを選択し、メニューバーから[イメージ]→[色調補正]→[2階調化]をクリックしましょう。
[2階調化する境界のしきい値]を185に設定し、OKを押します。
[アニメ2]レイヤーを一旦非表示にします。

[2階調化する境界のしきい値] = 185

5. 油彩フィルターでイラストのような画像にする

[アニメ1]レイヤーを選択し、メニューバーから[フィルター]→[表現方法]→[油彩]をクリックしましょう。
各種設定し、OKを押します。

[ブラシ]
形態 = 0.2
クリーン度 = 0.8
拡大・縮小 = 0.1
密度の詳細 = 0.0
[光源]
角度 = -60
光彩 = 0.7

6. [アニメ3]レイヤーでチャンネルを選択範囲として読み込む

(1) [アニメ3]レイヤーを選択し、チャンネルパネルから[右下の○]をクリックしましょう。

その後、選択範囲を反転させます。

選択範囲を反転させる方法
Windows Control + Shift + I
Mac Command + Shift + I

(2) レイヤーパネルに戻り、[アニメ3]レイヤーを選択したまま、新規レイヤーを作成します。

新規レイヤー作成方法
Windows Control + Shift + N
Mac Command + ShiftN

レイヤー名を[アニメ3 コントラスト]とします。
[アニメ3 コントラスト]レイヤーを選択し、ツールパネルから[塗りつぶしツール]を選択。
描画色を「#0d75e5」に設定し、そのまま画面上を塗りつぶします。
その後選択を解除し、[アニメ3],[アニメ3 コントラスト]レイヤーを一旦非表示にします。

選択を解除する方法
Windows Control + D
Mac Command + D

7. [アニメ2]レイヤーでチャンネルを選択範囲として読み込む

(1) [アニメ2]レイヤーを選択し、チャンネルパネルから[右下の○]をクリックしましょう。

その後、選択範囲を反転させます。

(2) レイヤーパネルに戻り、[アニメ2]レイヤーを選択したまま、新規レイヤーを作成します。

レイヤー名を[アニメ2 線画]とします。
[アニメ2 線画]レイヤーを選択し、ツールパネルから[塗りつぶしツール]を選択。
描画色を「#0d75e5」に設定し、そのまま画面上を塗りつぶします。
その後選択を解除し、[アニメ2],[アニメ2 線画]レイヤーを一旦非表示にします。

※6.の工程と同じなので詳しい説明、画像はカットします。

8. べた塗り新規レイヤーを作成する

[アニメ3 コントラスト]レイヤーを選択し、レイヤーパネル下の[右下の○]で[べた塗り]を選択します。
べた塗りカラーを「#0d75e5」に設定する。
[ベた塗り]レイヤーを一旦非表示にする。

9. グラデーションの新規レイヤーを作成する

新規レイヤーを作成し、[グラデーション]と名付けます。
ツールバーの[グラデーションツール]を選択し、グラデーションを設定します。
下から上へグラデーションをかけます。
[グラデーション]レイヤーを旦非表示にする。

[左]色:#0d75e5 = 不透明度:100%
[右]色:#ffffff = 不透明度:0%


10. それぞれのレイヤーの描画モードを変更する

[背景],[アニメ1]レイヤーのみ表示状態にします。

各レイヤーを設定していきます。
各項目設定する際に非表示→表示に変更しましょう。

[グラデーション]レイヤー
描画モード:オーバーレイ 不透明度:32%
[べた塗り1]レイヤー
描画モード:覆い焼きカラー 不透明度:5%
[アニメ3 コントラスト]レイヤー
描画モード:乗算 不透明度:40%
[アニメ2 線画]レイヤー
描画モード:乗算 不透明度:20%

11. トーンカーブで最終調整

[グラデーション]レイヤーを選択し、レイヤーパネル下の「右下○」の[トーンカーブ]を選択します。


完成です!

まとめ

いかがでしたでしょうか?
難しい、できないと感じる方は何度か繰り返してみると、2回目くらいからはスッとできるようになります。自分なりのオリジナル画像を作って楽しんでみてください。