Advertisement

appletutorial2

ウェブデザインの世界において、Apple(アップル)スタイルがトレンドのひとつになっていると思います。

たとえば、余白をたくさん使ったレイアウトや、ガラスに反射しているようなアイコン、使われているフォントなど多くのウェブサイトが取り入れているデザインとなっています。

先日ご紹介した、「フォトショップでApple(アップル)風でそっくりなメニューバーを作る方法」もそのひとつです。

今回はそんなAppleスタイルにまつわるさまざまなチュートリアルを20個まとめた「20 Apple-inspired Tutorials for Practice Web Designers」をご紹介します。

Apple風ボタンの作り方からアイコン、iPhoneなどの製品をフォトショップで作ったりすることができるチュートリアルが揃っています。

ダメ押しでApple社のホームページのレイアウトの作り方まで紹介されています。

その中から特に使いそうなチュートリアルをいくつかピックアップしてみました。

これさえおさえれば、アナタもAppleマスターです。(笑)

 

詳細は以下より。

 

Apple Tab Navigation

Appleホームページのタブつきメニューバーの作り方を紹介しています。

この微妙なグラデーションがAppleの特徴のひとつとも言えますね。

Apple Tab Navigation 

 

Making an Apple Button

少し前まで使われていた、ツルツルとした質感のボタンの作り方を紹介しています。

レイヤースタイルにちょっと手を加えるだけのお手軽チュートリアルです。

Making an apple button 

 

Mac Style Web Button

こちらが現行のAppleホームページで使われているボタンですね。

シンプルなつくりですが、質感の表現の仕方がやはり上手ですね、アップル。

Mac style web button

 

iPhone Style Icon

みなさんの周りでも必ず一人は持っているiPhone。

そんなツヤ感たっぷりなアイコンの作り方を紹介しています。 

iPhone Style Icon Tutorial 

 

Design the Mac OS X Leopard Folder

先日Snow Leopardが発売されましたが、こちらはLeopardで使われていたフォルダアイコンの作り方を紹介しています。

Design the Mac OS X Leopard Folder 

 

How To Create the iTunes Icon in Illustrator

イラストレーター用のチュートリアルですが、立体感をよくあらわしていて、お気に入りのひとつなんでアップしておきます。

How To Create the iTunes Icon in Illustrator 

 

Apple iMac – Photoshop tutorial

デザイン済みで簡単に編集可能なPSDファイルもありますが、デスクトップ型iMacをゼロから作ることもできます。

Apple imac tutorial 

 

Design a Shiny Photorealistic Apple Remote

本物と見間違うほどの高品質なAppleリモートの作り方も紹介されています。

ここまでいくとアートの世界ですね。

Design a Shiny Photorealistic Apple Remote

 

Apple iPhone Mobile Phone Design

「ゼロからオリジナルのiPhoneを作りたい。」

そんな人はこちらのチュートリアルを参照にしてみてはいかがでしょうか。

すべてのパーツをフォトショップでデザインしています。

Apple iPhone Mobile Phone Design 

 

Mac style template

こちらはApple社ホームページをベースにしたウェブレイアウトになっています。

グリッドを使っているため、シンプルで見やすいサイトに仕上がります。

サンプル用PSDファイルがダウンロードできるので、そちらに加工を施してもいいかもしれません。

free web template

 

こうやってApple関連のチュートリアルを集めると、どれもウェブサイトに使われているテクニックばかりなのに驚きです。

Photoshop VIPもサイトリニューアル中なんで参考にさせてもらいますよ。

参照元にはこれら以外にもたくさんのチュートリアルが掲載されています。

よろしかったら、あわせてどうぞ。

 

[参照元 : 20 Apple-inspired Tutorials for Practice Web Designers – Beautiful Life]