KLWPの3つの影【影のつけ方 3通り】

KLWP

今日はKLWPを使って「影のつけ方」を3種類を紹介したいと思います。まずは次のスクリーンショットをご覧ください。

わかりますかね。。。それぞれ別の方法で影を描いています。

上のスクリーンショットの中で、“Shadow1”と“Shadow3”は元々KLWPに備わっているエフェクトですが、“Shadow2”はふと思いついた方法です。
(これは強引な方法なので、パッとしないかもしれませんが、少しでも表現の幅を広げるヒントになればと思います)

今回は「KLWPの影のつけ方」について説明したいと思います。


スポンサードサーチ

アイテムに影をつける

ざっくり言うと、次のような感じです。

  • アイテムの「FX→影→アウター」使う
  • 『グループ化』アイテムを2つ重ねて『影を落とす』
  • 『放射状のグラデーション』を影として使う

初心者向けに書いているので、3つ目の「『放射状のグラデーション』を影として使う 」を知りたい人は、読み飛ばしてもらって構いません。

アイテムの「FX→影→アウター」使う

おそらく、一番一般的な方法です。

1.まずは『グループ化』を追加

『アイテム』タブで右上の「+」ボタンをタップしてください。そしてアイテム『グループ化(重ねる)』を追加。

2.先ほど追加した『グループ化(重ねる)』をタップし、そこへ新たにアイテムを追加。
 今回は影のつけ方を説明するだけなので、とりあえず『図形』を追加します。

3.『図形』をタップし、少しサイズを大きくします。
  そのまま『位置』タブに移動し、余白をそれぞれ25ずつ加えます。

  ポイント

余白を加えないまま影を有効にすると、影が途中で途切れてしまい、不自然になります。

4.それでは、影を有効にしましょう。『FX』タブに移動し、『影』をタップ。すると、次のようなウインドウが表示されます。

  迷わず『アウター』を選択。すると『影:なし』だったのが『影:アウター』の表示になり、新たに4つほど項目が追加されます。

それぞれ次のように働きます。

ぼかし影の広がる強さです。値が大きいほど範囲は広くなります。
方向影を表示させる角度です。文字盤で言うと3時の方向を起点としており、例えば「マテリアルデザイン」風のカードを作りたい場合、値を270にすればそれっぽくなります。
距離アイテム本体と影との間の距離です。上記で設定した方向に影の位置を変えられます。
影の色です。なるべく透明度を高くすることがコツです。

後はお好きなように設定してください。
先ほども書きましたが、これが一般的な方法です。これを知っておくだけでも十分ですが、

影をつけられるのは、そのアイテム1つのみ

です。例えば、複数のアイテムに影を一度につけたい場合、この方法だと少々面倒です。そこで、次の方法です。

『グループ化』アイテムを2つ重ねて『影を落とす』

スクリーンショットでは、わざとアイテムが多くなるようにしています。

先ほど紹介した方法は、

アイテムに影をつける

という方法でした。今から紹介する方法は、言ってみれば

グループを1つのアイテムに見立てて影をつける

というイメージです。

1.まず、『アイテム』タブの状態から右上の「+」アイコンをタップし、『グループ化(重ねる)』を追加してください。

2.そして、先ほど追加した 『グループ化(重ねる)』 をタップした後、再度『グループ化(重ねる)』を追加してください。

3.2回目に追加したグループをタップし、そこにアイテムをいくつか追加してください。何でもいいです。

4.そのまま『レイヤー』タブに移動してください。そして、下にスクロールして『エフェクト』を見つけてください。
そのまま『エフェクト』をタップしてください。

たぶん「エフェ…」という表記になっています

5.出てきたウインドウから、『影を落とす』を選択します。

(『右下に長い影』等は、今回扱いません)

すると、項目が新しく追加されます。
詳細は次の通りです。

前景色 影の色です。『アイテムの「FX→影→アウター」使う』ではただの「色」でしたが、これは性質が異なります。そのため、「前景色」という名称になっています。
ぼかし生成した画像をぼかします。ぼかすことで、影っぽくなります。
また、値を大きくするほどレイヤーが大きくなります。
方向 影を表示させる角度です。

( KLWPのバグかもしれませんが、生成した画像の位置はグループの右下あたりで固定のようです。『距離』と一緒に工夫する必要があります。)

距離 アイテム本体と影との間の距離です。上記で設定した方向に影の位置を変えられます

(少々クセがあるので、工夫が必要です)。

そもそも、この方法は何をしているのかというと、

グループ内にあるアイテムをコピーして画像として生成し、それに色をつけてぼかす(影に見立てる)

ということをしています。
ですので、 先ほど紹介した『アイテムの「FX→影→アウター」使う』 とは全く異なったアプローチで影を表現しています。

試した人はもうお分かりかと思いますが、設定しにくいです。
なかなか想定通りの結果にならないため、納得するまで何度か試行錯誤する必要があると思います。

『放射状のグラデーション』を影として使う

まずはスクリーンショットをば。

(少し影を強めにしていますが、より薄いともっと見映えが良くなるかもです)

少しUI&UX関連のデザインのお話になるのですが、
影を最大限までぼかして、まるでアイテムが浮遊している状態を表現するデザインがあります。

その具体例は著作権の都合上こちらではお見せできませんが、Pinterestにまとめておきました。