ボタンや、背景など、いろいろな場面で活躍してくれるPhotoshopのグラデーション。

お気に入りのグラデーションファイルをダウンロードして登録しておけば、いつでも簡単にグラデーションをかける事が出来ますね。

このブログでも以前、『Photoshopのグラデーションファイルを日本の伝統色で作ってみた』でグラデーションファイルを公開させていただきました。

今回は、まだまだたくさんある無料で公開されているPhotoshopグラデーションファイルをまとめてみました。

Ladyoak – Photoshop Gradient

Ultimate Web 2.0 Gradients – FREE Download

Free Gradients | Thefreelogomakers.com

Adventsgeschenk Nr. 3 Pixey Web 2.0 Farbverläufe für Photoshop zum free download!

1000 Free Gradients – Web 2.0 Gradients

PS Gradients – Simple White by ~purple-graphics

130 Web 2.0 Gradient by ~WebMSTR

Monochromatic Gradients by ~purple-graphics

Sky gradient by ~Lucifer017

1000+ Gradient Pack by ~LeboGfx

Photoshop gradient fruit by ~Lucifer017

Gradient Halloween by ~Lucifer017

75 Photoshop Gradients by ~ElvenSword

Emerald Dragon Ps Gradients by ~ElvenSword

Gradient ocean by ~Lucifer017

Zonda’s GRADIENT PACK by ~Zonda333

Gradient valentines by ~Lucifer017

Gradient beach by ~Lucifer017

Gradient sky by ~Lucifer017

Skywalker PS by ~ElvenSword

Rosa Psp Gradients by ~ElvenSword

Candide Ps Gradients by ~ElvenSword

Coffe Ps Gradients by ~ElvenSword

Gradient palette by ~Lucifer017

50 Free Photoshop Gradient Sets

先日、バランスのよさ気なグラデーションの比率を考えていたところ、以前このブログでご紹介しました、『身近にちらばる黄金比のデザイン』を思い出しました・・・

グラデーションの比率を黄金比（1：1.618…）に設定してみたら、しっくりくるかな？っと思いまして。。。

実際に試してみたところ、結構いい感じだったのでご紹介。。

上部から中央に、中央から下部に垂直にグラデーションを2段階に分けてかけてみました。で、上部と下部のグラデーションの比率を黄金比に設定してみました。。（といっても、38%と62%と大雑把ですが・・・）

こんな感じ↓

いろんな色で作ってみました。。。

っちゅうわけで、同じように日本で古くから使われている白銀比でも試してみました。。

こんな感じ↓。。

せっかく作ったのでPhotoshopのグラデーションファイルをアップしておきました。。ダウンロードして試してみてくださいねぇ～。

これから、デザインの勉強を始める方、ちょっとデザインに興味がある方、プログラムはできるけどデザインの方はちょっと苦手な方々。。。

『Most common mistakes made by new designers』という記事を見つけました。。

っちゅうわけで、本日は、デザイン初心者の方が気をつけると良いかも？っという、ポイントとお手軽に使えそうなツールをあわせてご紹介。。

色の選択
色味って、人それぞれ好みがあるので、一概にどれが正しいとかって言い切るのは難しいですが・・・あまりにもドギツい配色のサイトは見ていて疲れますよね。。。

最近は、配色関連のツールがいろいろ充実してますね。。

kuler

COLOURlovers

以前、こちらでもご紹介した、『デザインの配色に迷ったときに使えるツールのまとめ』も参考になるかも。。。

フォントの選択
今では無料でかなりクオリティの高いフォントがダウンロードできるので、いろいろなフォントを試して、お気に入りのフォントを見つけてください。。

dafont.com

better fonts

日本語のフォントが使いたい～！って方は、
『無料で使える日本語フォント11選』も合わせてどうぞ～。

フォントのサイズ
あまりにも小さすぎたり、大きすぎるフォントサイズは読み難いですよね。。

こちらで、フォントとサイズを設定すれば、ブラウザ上でどんな感じで見えるのかお試しできます。日本語が使えるともっと良かったんですが…

Typetester

ドロップシャドウ・光彩
Photoshopなどを使えば、簡単にドロップシャドウや光彩などのエフェクトがかけられますが、使いすぎると逆にチープに見えてしまいますよね。。

↓のチュートリアルのように影のつけ方にもひと工夫してみると、また違った感じに見えていいですね。。

グラデーション
グラデーションもやりすぎに注意しましょう。。色決めに自信が無い方は、配色ツールなどであらかじめ色を決めてからの方がいいかも。。

↓こちらのツールは簡単にグラデーションを作ってくれるツール。。

Photoshopをお持ちの方は、『Photoshopのグラデーションファイルを日本の伝統色で作ってみた』こちらから、グラデーションファイルをダウンロードしてお試しください～。

まだまだ、ポイントはいっぱいあると思いますが・・・

Photoshopを使って、ボタンなどの素材を作ってみても、なかなかしっくり来ない・・・という方も多いのではないでしょうか。

グラデーションのバランスや色味などを調節するだけで、見た目もかなり向上します。

Deziner Folioというブログで、Photoshop用のグラデーションファイルを無料配布されていたので、試してみました。。

まずは、↓から無料のグラデーションファイルをダウンロード。きれいなグラデーションが多数登録されています。。

ファイルをダウンロードすると、『web_20_gradients_v2.grd』という名前のファイルが開きます。
Photoshopを起動して、ツールボックスから、グラデーションツールを選択。すると、上のメニューにグラデーションのプルダウンが表示されるので、右側の矢印をクリックして、ダウンロードした、グラデーションファイルを読み込みます。

ファイルの読み込みが完了すると、グラデーションファイルのサムネイルが↓こんな感じで表示されます。これで、準備完了です。。

角丸長方形ツールなどを使って、ボタンの形を描きます。

描いたボタンのレイヤーをダブルクリックして、レイヤースタイルウインドウを開きます。グラデーションオーバーレイをクリックします。

さきほど、インストールしたお好きなグラデーションを選択して完成！

ボタンだけじゃなくて、サイトのヘッダー部分の画像に使ったり、アイコン素材に使ったり。。いろいろと使い道がありそうですね。。