サイトアイコンサイトアイコン 北の国ウェブ工房

Photoshop – レイヤーマスクにグラデーションを適用しよう

PhotoshopPhotoshop

仕事ではずっとパソコンを使用して、プライベートではスマホのゲームをすっとやっていて、眼精疲労と偏頭痛がヤバイ雪乃です。

ここ数日のブログで、Photoshopのレイヤーマスクについて紹介していますが、また今回もレイヤーマスクです。

※紹介する内容はPhotoshop CS5 で作成したものです。

レーヤーマスクにグラデーションをかける

Step1 ドキュメントを新規作成

メニューバー「ファイル」→「新規」を選択する。またはCtrlキー+Nキーをクリックして、下の画像の新規作成画面が開くので、適当な設定でドキュメントを新規作成します。

Step2 画像を配置する

ウェブ上で手に入れた画像や、自分で撮影した画像など加工したい画像を、Photoshopに取り込み、先ほど作成したファイル名:レイヤーマスク_グラデーションの背景の上に配置します。レイヤーを『花』リネームします。

Step3 レイヤーマスクを作成

『花』レイヤーを選択し、メニューバー「レイヤー」→「レイヤーマスク」→「すべての領域を表表示」を選択する。または、レイヤーパネルの下部にある「レイヤーマスクを追加」ボタンをクリックすると『花』レイヤーレイヤーマスクが追加されます。

Step4 レイヤーマスクにグラデーションをかける

  1. 『花』レイヤーレイヤーマスクを選択
  2. ツールパネルグラデーションツール(描画色「黒」、背景色「白」を選択
  3. 線形グラデーションを選択し、レイヤーマスクに画像の右から左にグラデーションをかけます。

「描画色から背景に」のグラデーションを選択すると、レイヤーマスクに1つのグラデーションをかけることができます。

「描画色から透明に」のグラデーションを選択すると、レイヤーマスクにグラデーションを重ねて、かけることができます。

Step5 画像を追加

『花』レイヤーがグラデーションで透過されていますが、わかりやすいように、『花』レイヤーと背景の間に、別画像のレイヤーを追加します。

これで『花』レイヤーが透過しているのがわかりますねぇ

今回紹介した方法は、サイトで使用する画像や、デザインなどで使用する機会が多い技法です。更に応用していろいろ試してみてくださいねぇ!
モバイルバージョンを終了