このページの本文へ

DESIGN 特集:Photoshopで始めるカンタンWebデザイン

「センスがない……」とつぶやく前に

Webデザインにすぐ使えるPhotoshopグラデ339選

2008年10月07日 23時46分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

 ありきたりのテンプレートではなく、どうせWebサイトを作るならオリジナルのデザインにしたい――そんなときに悩むのが、“色”ではないだろうか。特にヘッダーやフッター、ナビゲーションバーなど、サイトのイメージを決める重要な要素の色使いは、サイト制作者の腕の見せ所だ。

 「でも、どうもセンスには自信がないし……」。それなら、Photoshopのグラデーションライブラリを使ってみよう。Photoshopには標準でもかなりの種類のグラデーションが用意されているが、ネット上ではさらに膨大な数のライブラリが配布されている。グラデーションライブラリを使えばあっという間にイメージどおりの色の組み合わせが手に入るし、うまく活用できればサイト全体の完成度もぐっと上がる。

 今回は、単純に「上から下に適用するだけ」でも十分カッコいい、シンプルで“使える”グラデーションライブラリをいくつかピックアップしてみた。なお、実際の利用にあたっては、各サイトの利用条件を確認してほしい。


「Ultimate Web 2.0 Gradients」

Photoshopグラデーション

 まずは、いまどきのサイトをデザインするのに使える「Ultimate Web 2.0 Gradients」から。よく見かけるWeb2.0風のパステルカラーの配色パターンが揃っているこのライブラリは、先週紹介したロゴ画像作成の記事でも使用したものだ(関連記事)。

 さっそく使ってみよう。はじめに、作者Navdeepさんのブログ「Deziner Folio」からファイルをダウンロードして解凍しておく。使用するのは、中に含まれている「GRD」という拡張子のファイルだ。

 次に、Photoshopを起動し、グラデーションツールをクリックしよう。グラデーション「グラデーションエディタダイアログボックス」を表示させ、[読み込み]をクリックする。あとは、先ほど解凍しておいたGRDファイルを指定すれば準備は完了だ。

Photoshopグラデーション
グラデーションツールから、グラデーションエディタダイアログを表示させる
Photoshopグラデーション
続いて[読み込み]でGRDファイルを指定

 読み込んだグラデーションは、グラデーションツールで塗りつぶしてもいいし、「レイヤースタイルダイアログボックス」→「グラデーションオーバーレイ」でも使える。ごくシンプルに文字を載せてみたのが下の画像だ。Ultimate Web 2.0 Gradientsを使うだけで、一気にそれっぽい画像に仕上がった。

Photoshopグラデーション
「Ultimate Web 2.0 Gradients」で作成したサンプル

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング