PhotoshopでWebデザインをする時のグラデーションの使い方

公開日: 2010.9.28 | 最終更新日: 2010.10.15
このエントリーをはてなブックマークに追加
大層なタイトルですが、デザインをやり始めた方はグラデーションでつまづくことが多いと思いますので、恥ずかしながらこんな記事でも書いてみます。

時と場合によりますが、グラデーションは強めにかけると汚くなることが多いです。

下が悪い例ですが、左のような彩度の強い色に、真ん中はオーバーレイ100%のグラデーション、右は乗算100%のグラデーションがかかっています。

少し説明を付け加えると、グラデーションは二つの色を別々に指定すると結構な時間がかかり大変ですが、レイヤースタイルの描画モードと不透明度で設定するとベースの色を変更するだけで色の変更ができるので楽です。

デザインをやり始めたばかりの方は、しっかりと色を選ばなかったり、Photoshopのグラデーションの初期設定を使ったりすることで、このようなグラデーションになっているのではないかと思います。

自分もまだまだ低レベルなデザインをしている身で恥ずかしいのですが、最近同じようなデザインばかりしてる気がするので、今後はいろいろなデザインをするためにもここで自分のよく使うグラデーションを公開します。

説明

まず準備として、角丸長方形ツールのシェイプで角丸を書きます。(ここでは丸みは3pxにしてます)

これが完成形ですが、右からベタ塗り、グラデーション、さらにシャドウ(内側)を追加したものになります。この四色はグラデーション・シャドウ(内側)ともすべて同じ設定にしてあります。

グラデーションの設定

※グラデーションはグラデーションツールではなくレイヤースタイルで設定します。

  • 描画モード: オーバーレイ
  • 不透明度: 25%

シャドウ(内側)の設定

  • 描画モード: 乗算
  • 不透明度: 20%
  • 角度: -90
  • 距離: 1px
  • チョーク: 0%
  • サイズ: 0px

不透明度は色の濃さによっては100%に近くなることもありますし、描画モードもオーバーレイ以外にもいろいろありますので、いろいろ試してみるといいと思います。

また、グラデーションよりベタ塗りの方がいい場合も多々ありますので、その辺もよく考えてグラデーションを使った方がいいと思います。


このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

関連記事

« »

Trackback URL

Comments : 0

Comment Form

PAGE TOP