[リニューアル] WEB2.0的デザインのパーツ作り

新たに作ったデザインですが、個人的趣味もありまして「WEB2.0的デザイン」なんつーものを取り入れてみました。何がWEB2.0的なのかイマイチ分かっていませんが、ま、流行ものということで＾＾；

でもこれ、結構見栄えがいいと言いますか、パッと見て人目を引き付ける力があるような気がするんですよね。

WEB2.0的デザインの特徴

WEB2.0云々は良く分かってないのでアレですが、WEB2.0的デザインとなるといくつかの特長が見えてきます。

• 明るめのカラー
• 同系色のグラデーション
• 角が丸い
• 斜線
• ドロップシャドーを多用
• 水面に映ったかのような反射
• よくわからないがギザギザの丸

などなど。この辺の要素を取り込みつつ作ったのが右にあります冒頭のヘッドライン部分の背景とタイトル画像、そしてメニューバーの背景。ね、なんかWEB2.0っぽいでしょ？（笑）

グラデーション背景の作り方 by Photoshop

見た目がキレイに映るので「作るの、面倒なんじゃないの？」と思われがちですが、Photoshopを使うとグラデーション付きの背景程度は簡単にできちゃいます。

まずはツールバーからグラデーションツールを選択。すると、グラデーションが表示されるのでそこをクリックすると「グラデーションエディタ」が開きます。

色のついた部分をクリックすると、下の「カラー」の部分にその色が表示されるのでそこをクリック。するとカラーピッカーが新たに表示されるので、そこから適当な色を選びます。

お好みのグラデーションができたら、背景を使いたい高さのカンバスを新規作成（ウチはヘッドライン部分にグラデーション背景を使ってるので高さ30px）して、マウスをべろべろーっと動かせば、その高さの範囲内でグラデーションが作られます。

で、縦にグラデーションさせた場合、背景は横に繰り返して使うことになるので、カンバスの横幅を1pxに縮小すれば完成です♪（後は、スタイルシートを作成する際に背景画像が横に繰り返して表示されるように設定すればOK）

斜線入り背景の作り方 by Photoshop

WEB2.0的デザインのもう一方の代表格・斜線入り背景画像の作り方は、ちょいとテクニックが必要です。といってもPhotoshopを使う上で通常やることの応用なので、コツさえ分かれば意外と簡単にできちゃいます。斜線にもいろいろあるんですが、今回は「線の太さ10px、線の間隔10px」という斜線背景を作ってみました。

まず、新規のレイヤーを作成します。ここでは、メニューバーの背景を作りますので、メニューバーと同じ高さになるようカンバスのサイズを指定します（幅は適当）。そして、新規のレイヤーを追加して適当な色で塗りつぶします。

続いて、四角のシェイプを作成します。この際、サイズは横幅＝斜線の太さとなるよう指定（ここでは10px、縦幅は適当）し、色は先にレイヤーを塗りつぶした色よりやや濃い（もしくは薄い）色にします。

次に、選択ツールを選択しバウンディングボックスを表示させ、角度を「45度」に指定します。すると、先に作った四角シェイプが45度の角度で傾きます。

今度は、45度に傾けたシェイプを数個複製、微妙な位置を調整しつつ10pxの間隔で並べます。これ、マウスで動かそうとすると難儀なのですが、キーボードの矢印ボタンを押して移動させると1px単位で動かせるので便利です。

並べたシェイプを全てレイヤーに統合すると、短い斜線背景ができます。で、これを繰り返し表示させたときにずらーっと斜線が並ぶように整えます。右の図のように一本目の斜線の上部左端から、次の斜線が始る直前までを選択し、カンバスを切り抜けば繰り返し表示させたときにキレイに並ぶようになります。

これで元となる背景画像の作成は完了。あとはCSSで背景を横の繰り返し表示にしていしてあげれば、右のような斜線背景ができあがり♪

ただこれ、1pxでもずれるとキレイに斜線が表示されなくなっちゃうのでご注意を。（その際は、ちょっとずつ修正していけばすぐ直せると思います＾＾）また、サイトに表示させる際はCSSで指定すればよいのですが、Photoshopの「パターン」に指定して塗りつぶせば、画像上でも斜線背景を作ることができます。

ま、こーゆーのは好みですし、面倒な作業をしてまでこんな背景つくらなくていいやと思えば使う必要もないんですが＾＾；、1つ2つこの手のパーツを作れるようになるとサイト作成の幅がグッと広がりますので、お手すきの際にでもお試しくださいませ♪