(海外記事) フォトショップでキャラクターを使った、立体的なウェブレイアウトをつくる方法

by HV-Design

 

今回は、ブログなどに最適な、キャラクターをつかったシンプルで、立体的なウェブレイアウトをフォトショップでつくる方法をご紹介します。

チュートリアル情報

プログラム : Photoshop

バージョン : CS4で作成　(古いバージョン可)

難易度 : 初心者から中級者

所要時間 : 30分から1時間ほど

 

 

どこかApple(アップル)社のウェブレイアウトを連想させるような、白を基調とした透明感のあるメニュー部分がデザイン性高いです。

また、サイドバーとメイン部分に立体的なデザインを加えることでユニークなオリジナリティーの高いデザインに仕上がっています。

 

このチュートリアルから学ぶことのできるポイントは、

・ 白を基調とした透明感のあるウェブレイアウトのグラデーションのかけ方

・ 型押し風の透明ボタンのつくり方

・ キャラクターアイコンの効果的な配置の仕方

・ 立体的な折り込みデザインのつくり方

などがあります。

 

詳細は以下より。

 

すっきりとした、プロ仕様のメニューバーを作成する方法が紹介されています。

淡い色のグラデーションを適用すると、透明感のあるウェブレイアウトが仕上がります。

 

ヘッダー部分に配置されたキャラクターもうまく立体的に見せています。

ボックスの枠組みからはみ出ることで、キャラクターの存在感がグッとアップします。

 

グリッドを使って、すっきりとデザインされたレイアウトはお手本にしたいものです。

また影をうまく使うことで、立体的な枠組みをデザインすることが簡単にできます。

ウェブサイト作成をするひとなどは覚えておきたいテクニックのひとつです。