1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【Photoshop入門】グラデーションの基本操作と活用方法

Pocket

Photoshop(フォトショップ)のグラデーションツールは、その名前の通り、単色、もしくはいくつかのカラーでグラデーションを作ることができるツールです。今回は、グラデーションツールの基本操作と応用的な使い方について学びましょう。

グラデーションの基本的な使用方法

1.さまざまな形状のグラデーションを作る方法

Photoshopのグラデーションツールを使えば、以下の形状のグラデーションをカンタンに作ることができます。

  • 線形グラデーション
  • 円形グラデーション
  • 円錐形グラデーション
  • 反射形グラデーション
  • 菱形グラデーション

まずはグラデーションツールの基本操作を学びましょう。グラデーションの形状は違っても作り方や操作方法は同じです。いずれの場合も、クリック&ドラッグで描画色から背景色へ色が変化するグラデーションを作ることができます。

  1. グラデーションツールを選択し、作りたいグラデーションの色とタイプを選択しましょう。メニューバーの下部にあるオプションから形状を選べます。
  2. gradation001

  3. グラデーションを作りたい場所でクリック&ドラッグ
  4. さまざまなタイプのグラデーションを作って遊んでみましょう。
    グラデーションの形状の使い分け方一例

  • 円形グラデーション・・・立体的な球体を描きたいときに役立ちます
  • 反射形グラデーション・・・金属の光沢を表現したいときに便利です

2.複雑なグラデーションを作る方法

グラデーションツールを使うと、描画色と背景色の中間の色を自動で生成してくれます。グラデーションツールは描画色と背景色で描くことができるだけでなく、グラデーションエディタを使って色を何色も追加することができます。

カラーバーをクリックし、グラデーションエディタを開いて複雑なカラーのグラデーションを作成してみましょう。

gradation002

  1. グラデーションエディタに表示されているカラーバーの下部をクリックするとカラーの追加をするための分岐点があらわれます。カラーバーの上部をクリックすると透明度を追加することもできます。
  2. gradation003

  3. カラーバーの下をクリックして好きな色を追加してみましょう。追加した分岐点は、左右に動かして位置を調整することができます。

3.気に入ったグラデーションは登録しておこう

グラデーションエディタを使って設定したグラデーションは名前をつけて登録しておくことができます。気に入ったグラデーションやよく使用するグラデーションは「新規グラデーション」ボタンをクリックして登録しておきましょう。

gradation004

グラデーションツールを使用した効果の一例

1.透明なグラデーションを使って写真をだんだんとぼかすには

グラデーションツールとレイヤーマスクの2つを利用して、写真がだんだんとグラデーション状に半透明になっていく効果をつけてみましょう。

  1. 画像を開いたら、レイヤーを追加して透明度を100%から0%に設定したグラデーションを作成しましょう。レイヤーの名前は「半透明なグラデ」に変更しておきます。
  2. gradation005

  3. 1.で作った「半透明なグラデ」レイヤーの上で右クリック、「レイヤーの透明部分を選択」をクリックして選択範囲を作成します。
  4. 画像レイヤーを選択し、レイヤーマスクを追加してください。画像に写真が半透明にぼけていくような効果をつけることができました。

gradation006

2.写真に透明なグラデーション効果をつけられない場合は

  • グラデーションツールの透明度が間違って設定されていないか確認しましょう。
  • レイヤーマスクのみ、マスクに透明度を設定することが可能です。他の方法でマスクをかけていないか確認しましょう。

フリー素材からグラデーションを追加するには

Photoshopのグラデーションはフリー素材などからダウンロードすることが可能です。気に入ったグラデーション素材がみつかったら、グラデーションの追加をしてみましょう。

  1. グラデーション素材をダウンロードします。グラーデション・ファイルの拡張子は「.grd」です。
  2. グラデーションエディタを開き、読み込みボタンをクリックしてグラデーション・ファイルを選択すると、ダウンロードしたグラデーションが読み込まれます。

gradation007

まとめ

グラデーションツールはカンタンに使えるうえ、画像に印象的な視覚効果を与えることができるツールです。さまざまなデザインに応用できるため、使い方をしっかりと覚え、活用しましょう。

※元画像にpixabayの画像を使用
pixabay

おすすめ記事
【Photoshop入門】マスクの種類と基本操作方法のまとめ
【Photoshop入門】ブラシツールの基本操作方法

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る