Asial Blog

Recruit! Asialで一緒に働きませんか?

簡単に作るiBooks風の壁紙

カテゴリ :
デザイン・UI
タグ :
Tech
Fireworks
iBooks
iPhone
テュートリアル
こんにちは。和田です。

今回はiBooks風の壁紙を作成しようと思います。

今回も難しいことはいっさいしていませんし、木目のテクスチャも1枚しか使っていないので、簡単に出来ます。
どうか皆様もやってみてください。

↓出来上がりはこんなイメージです。


ではでは、

1.まず、テクスチャ(縦目)を用意します。
今回は、いいテクスチャが無かったので、とりあえずこれで作業します。
(木というよりは、ベニア板みたいな感じになりそうです。(泣))



2.上記で用意したテクスチャをコピーして90度回転して横目にします。
(これは、棚板の正面(側面?)部分に使うためです。



3.①棚板、②側板、③奥板を矩形ツールで書きます。



4.①−1棚板(正面)の作成
 ・棚板の正面の部分が一番明るいので、フィルターの「明るさコントラスト」で色を明るくしてください。


 ・「3」で作った棚板の正面部分の矩形オブジェクトを「線:なし、塗り:#FFFFFF、エッジ:エッジをぼかす:1px 」に設定して「2」で作成したテクスチャにマスクをかけます。
 「エッジをぼかす」を使用したのは、板の角の柔らかい感じを出すためです。

↑マスク未


↑マスク後


4.①-2棚板(上面)の作成
 ・「2」で作成したテクスチャを手前が広く、奥が小さくなるように変形します。(遠近感を出すためです)
 ・また、明るさも棚板の正面より暗くしてください。
 ・①−1と同じように矩形オブジェクトを「線:なし、塗り:#FFFFFF、エッジ:エッジをぼかす:1px 」に設定してマスクをかけます。
 ・そして、フィルターのPhotoshopライブエフェクトでドロップシャドウとシャドウ(内側)をかけます。
 


  シャドウ(内側)は棚板(上面)の濃淡(奥の方を暗い感じにするため)をつけるためです。

↑棚板の出来上がりです。


5.②側板は、「1」のテクスチャを遠近感を出して変形させます。棚板(上面)と同じ要領です。

↑マスク未状態です

 そして、フィルターのPhotoshopライブエフェクトでドロップシャドウとシャドウ(内側)を図の値でかけ、、反転してコピーして左側の側板を作ります。



 (棚板(上面)と同じ理由でかけています。ドロップシャドウは、側板、奥板の接しているところの陰用です。)

↑側板の出来上がりです。


6.奥板ですが、ここも側板同様一段ずつ作り、フィルターのPhotoshopライブエフェクトでシャドウ(内側)を図の値でかけます。
  これは、図のⅠ、Ⅱ、Ⅲ、Ⅳの部分を暗い感じにして、印象的な雰囲気を出すためです。
  (でも実際の棚は、ここまで暗い部分はないです。誇張です。)



↑こんな感じになります。


7.これで、1段ができたので、後はコピペで3段にします。




8.このままでもいいのですが、棚板の下にさらに陰を落とすと、より印象的な雰囲気にるのでドロップシャドウを実行します。



↑ドロップシャドウ未


↑ドロップシャドウ後
 どうでしょうか? 劇的に変化していませんが、より陰が強調されたかと思います。
 


↓で、出来上がるとこんな感じです。



↓そして、iPhoneに埋め込むとこんなイメージです。



今回も結局iPhoneネタだったので、次こそは他のネタにしようと思います。

それでは、また次回です。