Adobe Fireworks で Photoshop ブラシを使い、切り抜いたような立体感を作る方法（iPhone の壁紙を自作して遊ぶ）
iPhone 3GS を買ったのは先日書いたとおりですが、やっぱり自作の壁紙とか作って遊びたいですよね。
iPhone 用の壁紙サイトはまとめがたくさんあるので、他人が作ったやつでいい人はそっちを参考にしてもらうとして、今日は Fireworks で自作した壁紙と、その作り方を説明したいと思います。
必要なのは Adobe Fireworks と、Adobe Fireworks で Photoshop ブラシなどを使う方法（あくまでなんちゃって方式 - Office L テクニカルノート で説明したブラシの取り込み方法を理解していること（いつのまにかブックマークされててちょっとうれしいｗ）と、iPhone または Touch です。
iPhone の壁紙について
サイズ
iPhone の壁紙は縦画像しかあまり意味がない（壁紙はロック解除画面にしか表示されない。ロック解除画面で本体を横にしても画面は縦方向のまま。）ので、基本的に 横320px 縦480px の画像を作ればＯＫです。
一部のケースやスタンドで本機を横置きにしている、という人は横で作ってもいいでしょう。適宜読み替えてください。以降は縦置き基準、横320px 縦480px で説明します。
で、壁紙自体は320x480でちゃんと全て表示されるのですが、画面上部にステータスバーと日付表示部（これはラベルビュー？）、下部にロック解除スライダのついたアクションシートが表示されるので、実質、上から115pxの位置から270px分しかちゃんと見える部分がありません。普段から見てるはずなのですぐわかると思いますが、自作するならこのことを念頭に上手につくりましょう。見えにくい部分を手抜きするもよし、著作権表示などを入れ込むもよし、むしろわざと見えにくくするのもよし、ということで。
作成した壁紙（今回の作業例）
どうしてこの壁紙を作ったか
iPhone 用の壁紙サイトを見ていた時にちらっと見かけた壁紙が、こんな風に切り取ったような立体感を持った画像で、真似したいなぁと思ったから。
デザイン初心者はやっぱり立体感だよね、とかｗ
どうして作り方まで紹介するのか
最初はドキュメントの背景が透けて表示されているのかと思って、ブレンドモードの消去とかで消してみようとしたりしたんだけど、全然うまくいかなくて、すごく悩みました。デザインの勉強をしたわけでもないし、Fireworksの使い方も完全に独学だし、割といつも独りで悩んでいます。
で、ふと気がついたら、前述のブラシの記事がブックマークされていて、あ、やっぱり独りじゃないかも、みんな同じように悩んでたりするかも、と思いました。
そう考えたら、どうせ素人技なんだし、とりあえず記事にしてリリースして、誰かにつっこんでもらったりしたほうがいいかも、という風に思い至ったので、こんな記事にしてみました。
ですので、つっこみや応援やその他の方法の示唆など、リアクションがあるととても喜びますｗ
さて、じゃあ手順いきますか
- 新規ドキュメントは 320px × 480px で背景は白（なんでもいい）、解像度は 72ピクセル／インチ
- ドキュメントと同じサイズの矩形を用意
- 塗りの色は #242424
- テクスチャは狭い格子を10%程度
- ちょっと太さのある（お好みの）ブラシを読み込み、プロパティパネルのフィルタから
- 色相・彩度を適用。色をつける、にチェックを入れて、適当な色をつける。
- シャドウ（内側）を適用。幅を6、透明度70%、柔らかさ3、角度315度、色は黒（#000000）にする
- テキストツールでロゴ文字を入力
- このフォントは Agency FB、サイズは60、太字
- 色は先につけたブラシ（読み込んだからビットマップ）の色をスポイトで拾う
- シャドウ（内側）を適用。適用量はフォントに合わせて変える
出来上がりｗ
注意するところとか
- 矩形の塗りにグラデーションを適用すると Web2.0 っぽくはなるけど、板っぽくなくなるのであんまりよくないかも
- 使うブラシは、この例のように少し面積のあるものを選ばないと、うまい具合にシャドウ（内側）の効果が得られない
- 色相・彩度で色をつけるのがやりにくい場合は、他の方法で色をつけてもＯＫ
- ブラシもテキストも同じ色、同じシャドウがついていることで立体感を作っているので、違う色になってしまわないように注意する
- ブラシが画像の端で切れているほうが（この例の下の部分のように）より立体的
- jpegで書き出す場合、品質を100%にして、スムージングを１にすると、ほんのりボケた感じになって柔らかい感じになる（気がするｗ）
