Advertisement

applestylewebsite1

↑ クリックすると原寸大表示になります。

 

今回はフォトショップでApple(アップル)風デザインのウェブレイアウトを作成する方法をご紹介します。

特長としては、余白スペースを大きくとり、グリッドで整理されたすっきりとしたシンプルなデザインになっています。

また、ボックス枠などにもグラデーションを加えることで、ウェブサイトに透明感をアップすることができます。

 

チュートリアル情報

プログラム : Photoshop

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

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

所要時間 : 1時間ほど

 

最近のウェブレイアウトの基本となっているのが、グリッドを使ったシンプルですっきりとしたウェブサイトです。

一度グリッドに関する知識を身につければ、オリジナルのウェブサイトを作るときにも枠組みの参考になります。

 

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

・ グリッドを使用したシンプルなウェブレイアウトの作成方法

・ グラデーションを使った奥行きのある背景の作り方

・ Apple風メニューバーの作り方(簡易版)

・ グラデーションがアクセントになったボックス枠の作り方

などがあります。

 

詳細は以下より。

 

背景に淡いグラデーションを使用することで、奥行きのある空間を作り出すことができます。

61

 

アップルのホームページでもっとも特徴的なグラデーションを使ったボックス枠の作り方も紹介されています。

181

 

アイコンなどをボックス枠からはみ出させることで、立体感もアップします。

ウェブトレンドのひとつでもありますね。

2211