Advertisement

ipadtutorial1

↑ クリックすると参照元サイトに移動します。

 

ついに発売されましたね、iPad

Apple公式ホームページにおいても、製品を詳しく確認できるようになっています。

>> Apple公式ホームページ

 

 

  すでにいくつかのipad周辺機器アクセサリーなども公開されており、店頭発売が待ち遠しいところです。

こちらがレザー素材を使用した収納ケースになります。

手帳の代わりとして使うのによさそうです。

100128elan-passport-ipad_1

>> 洒落たケースが続々登場! 早くもiPadに対応アクセサリーの宝の山 from Gizmodo

 

 

 

ついでにこんな別売りキーボードなんかも発売されるようで、使いやすさもよさそうです。

keyboard_dock_1_20100127

>> AppleタブレットiPadの別売キーボードドックとケースがおしゃれ from Tech Wave

 

 

 

iPadついての詳しいハードウェアとアプリの説明はGizmodoさんがわかりやすくまとめていますので、参考にしていただくとよいかもしれません。

>> Apple iPadについて知っておくべき全てのこと(動画あり) from Gizmodo

 

 

 

今回はそんな話題沸騰中のiPadをPhotoshop(フォトショップ)を使ってデザインする方法をご紹介します。

基本的にiPhoneを大きく拡大しただけのデザインですので、チュートリアルもお手軽に作成できるようになっています。

 

 

ディスプレイにはダウンロードしたイメージ画像を使ってデザインするので、オリジナルデザインのiPadを作ることも可能ですね。

 

 

 

詳細は以下から。

 

 

 

チュートリアル情報


 

プログラム : Photoshop

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

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

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

 

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

・ 角丸長方形ツールを用いたiPad本体のデザイン方法

・ レイヤースタイルを適用し、作成する立体感のあるディスプレイ画面のつくり方

・ 床に映り込みを表現する方法

・ 自然な風合いの影をデザインする方法

などがあります。

 

 

 

チュートリアルハイライト


 

まず最初にiPadの特徴でもある丸っこいインターフェース部分をデザインします。

「角丸長方形ツール」を使うことで、角の丸みを表現することができます。

今回はカンバスの大きさが1280x1024pxとなっていますが、この場合角の丸みを「25px」に設定しています。

03_apple_ipad_tutorial

 

 

 

先ほどよりもやや小さい角丸長方形を描画色「ダークグレイ」(#2e303)で描きます。

出来上がった2つのレイヤーを結合しておきましょう。

04_apple_ipad_tutorial

 

 

 

次にディスプレイとなる部分をペイントします。

このディスプレイ用レイヤーには、レイヤースタイルを適用することでうまく光の反射を表現しています。

「グラデーションオーバーレイ」を適用だけなのですが、立体感が増します。

またはめ込み用のイメージ画像はAppleよりキャプチャしているので、オリジナルの画像を使りたい場合はこちらで変更することが可能です。

10_apple_ipad_tutorial

 

 

 

さらにデザインに立体感を与えるために、一番外側の灰色レイヤー部分に「ブラシツール」を使って描画色「白」(#ffffff)でペイントします。

このときに右上から光が当たっている事を念頭において加工を加えるようにしてください。

16_apple_ipad_tutorial

 

 

 

角丸部分の微妙なガタガタ具合を修正するために、軽く「ぼかし」エフェクトを適用することで滑らかに仕上げます。

19_apple_ipad_tutorial

 

 

 

こちらが「ぼかし」エフェクトを適用した後。

細かい部分なのですが、完成したときの質感が変わってきます。

20_apple_ipad_tutorial

 

 

 

ホームボタンもレイヤースタイルをいじるだけの簡単設定です。

「グラデーションオーバーレイ」を適用するだけですね。

24_apple_ipad_tutorial

 

 

 

適用するとこんな立体的なボタンを作ることができました。

26_apple_ipad_tutorial

 

 

 

完成図はこんな感じとなります。

確かに本物と間違えるほどうまくデザインされています。

27_apple_ipad_tutorial

 

完成したデザインに床への映り込みと影をデザインすることで、さらに立体的で本物らしく仕上げることができます。

 

 

 

映り込みのデザインする方法はたくさんあると思いますが、今回は長方形ツールを使って不要な部分を切り取っているようですね。

選択範囲のぼかしを「30px」くらいにするとちょうど良いようです。

30_apple_ipad_tutorial

 

 

さいごに影をデザインします。

まず新しいレイヤーを作成した後、「楕円形ツール」を用いて以下のようなシェイプを作ります。

31_apple_ipad_tutorial

 

 

 

次に「ぼかし」フィルタを「4px」で適用し、レイヤーの不透明度を「10%」に下げるとこのようになります。

32_apple_ipad_tutorial

 

 

最終的にはこのようになりました。

final (1)

 

 

 

参照元では、チュートリアル用のサムネイル画像もたくさん使って説明されているので、英語サイトですが比較的わかりやすいのではないでしょうか。