↑ クリックすると原寸大表示されます。
今回は、フォトショップを使って透明感のあるカラフルなウッド系のウェブレイアウトを作る方法をご紹介します。
現在、海外ブログを中心にスタンダードとなりつつあり、グリッドを使ったすっきりとしたデザイン。
メニューボタンなどは半透明に透けていて、黒を使ったダーク系デザインでもイメージは重たくありません。
またPhotoshop(フォトショップ)で編集可能なサンプルPSDファイルが公開されており、無料ダウンロードできます。
詳細は以下から。
サンプル用PSDファイルダウンロード
英語表記でのチュートリアルのため、途中で分からなくなった場合があるかもしれません。
そんなときは、サンプル用PSDファイルをダウンロードしてみてください。
あらかじめデザインされているので、作り方の参考になりますよ。
ダウンロード詳細
ファイルサイズ : 2.1MB
ファイル形式 : psdファイル
チュートリアル情報
プログラム : Photoshop
バージョン : CS4で作成 （古いバージョンでも可能）
難易度 : 初級者から中級者
所要時間 : 1時間ほど
このチュートリアルから学ぶことのできるポイントとしては、
・ グリッドを使って整ったウェブデザインの作成
・ 半透明のメニューバーの作り方
・ ウッドテクスチャに自然な色合いでペイントする方法
・ レイヤースタイルのみを使った「お手軽」ボックス枠の作り方
などがあります。
チュートリアルハイライト
フォトショップでウェブレイアウトをデザインする時は定規を表示しておきましょう。
そうすることで、ガイドを的確に挿入することができます。
両端のピクセルを手動入力することで横幅960pxのレイアウトを作成します。
ちなみにshiftキーを押しながらガイドを引くと、5pxずつ移動します。
この小技はウェブデザインでよく使います。
ウッド系の木材テクスチャに色付けをしたいときは、レイヤーのブレンドモードを使いましょう。
テクスチャとは別に用意したレイヤーにお好みの色でペイントしましょう。
つぎにそのペイントしたレイヤーの「描画モード」を「ソフトライト」に変更するだけでいいんです。
ダーク系のウェブデザインの場合は、ボックス枠とのコントラストも重要になってきます。
今回は、ボックス枠をレイヤースタイルのみで設定してしまうお手軽バージョンです。
レイヤースタイルを保存しておけば、いつでも簡単にダーク系のボックス枠を作ることができます。
最近のトレンドのひとつとして、半透明の材料を使ってウェブデザインを仕上げる場合があります。
今回は、メニューバー部分が半透明になっています。
実はこれ、レイヤーの不透明度を70％に下げるだけの手抜きデザインです。
詳しいチュートリアルをご覧になりたい方は、参照元サイトにて確認してみてください。
分かりやすく解説サムネイルつきで紹介されています。
