Advertisement

iphoneappweb1

↑ クリックで拡大します。

 

今回は、フォトショップでプロ仕様のiPhoneアプリサイトを作る方法をご紹介します。

グリッドを使い、統一性のある色使いでシンプルでまとまったウェブレイアウトとなっており、メインであるiPhoneが目立ちます。

これからiPhoneアプリ用サイトを作成しようとしているひとは必読の内容です。

 

今回、このチュートリアルより学ぶことのできるテクニックは

グリッドを使ったすっきりとしたウェブレイアウト方法

型押し風ボタンの作成方法

絶妙なグラデーションのテキストエフェクト

立体的でクリックしたくなるボタンの作成方法

ロゴなどに使える、文字の一部をハートで表す方法

などがあります。

 

詳細は以下から。

 

iPhone画像にお好みの画像を挿入する方法は知っておくと便利ですよ。

iphone_screen

 

本当にボタンを押したような「型押し」ボタンの作り方も学ぶことができます。

sec_nav_placeholder_pattern_apply_2

 

原色そのままのテキストを使わずに、微妙なテキストエフェクトを加えることで、デザイン性が格段にあがります。

promo_hr

 

こんな魅力的なボタンの作り方はぜひ覚えておきたいところです。

arrow_final

 

このチュートリアルでは、型となる枠組みをFireworksを使って作成しているようです。

Build a Promotional iPhone App Website Wireframe in Fireworks