Home >  未分類 > (海外記事) フォトショップでApple(アップル)風デザインのウェブサイトを作る方法
 
 
(海外記事) フォトショップでApple(アップル)風デザインのウェブサイトを作る方法

applestylewebsite1

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

 

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

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

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

 

チュートリアル情報

プログラム : Photoshop

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

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

所要時間 : 1時間ほど

 

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

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

 

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

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

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

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

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

などがあります。

 

詳細は以下より。

 

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

61

 

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

181

 

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

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

2211

BOOKMARK, MAYBE?

いかがでしたでしょうか、この記事のブックマークはこちらからどうぞ。

RELATED ENTRY/関連記事

このエントリーに関連する記事は以下になります。

GOT COMMENT?/この記事についてコメント

以下のソーシャルメディアよりログインできるようになっています。

  • http://twitter.com/photoshopvip/status/4831439353 Photoshop VIP

    (海外記事) フォトショップでApple(アップル)風デザインのウェブサイトを作る方法 http://ff.im/-9IWqr

  • http://twitter.com/lmk_yuhki/status/28960599862 yuhki

    (海外記事) フォトショップでApple(アップル)風デザインのウェブサイトを作る方法 RT: http://photoshopvip.net/archives/8680