今このブログのリニューアルを検討していて、Photoshopをちまちまいじってます。その過程でちょっとした発見があったので、一応共有します。本当にあってるかどうか分かんないで、話半分に読んでください。
先日AppleからLionことMac OS 10.7が出ましたが、全体的にスクロールの挙動が変わり、ブラウザで限界までスクロールするとびよーんと動いて、ブラウザの裏地（という表現でいいのか）が見えるようになりました。
この裏地っぽいテクスチャはiOSでも使われていて、アプリケーションのフォルダを開くと見えたりします。これからAppleにとって「裏」とか「領域外」の表現はこれがスタンダードなのかなと。
僕もこれを真似しようと思ったんですが、なかなかこれだというのが見つからなかったので、自分で作ってみました。以下、そのやり方です。
一応、順を追って説明しますが、僕はデザイナーではないので、そのものズバリを再現するまでは行きません。「こんな感じ」というレベルです。
いったんテクスチャとして取得してしまえば、あとは乗算でブレンドするなり、強度を変えるなりして工夫すればそれなりに似たものはできると思います。
ステップ1. 裏地を観察する
パッと見、この裏地はなんかの布地なんじゃないかと思って、”Photoshop tutorial texture mac”で探したんですが、なかなか見つかりません。「テクスチャ」も「布地」も英語にしちゃうと一緒ですからね。
さらによく観察すると、これは布ではなく、引っかき傷みたいなものが縦横に走っているんだということがわかりました。引っかき傷といえば、Mac OS X 10.5まではアルミのすり切れたような表現（ヘアライン？）が随所に使われていました。あれからメタリックなてかりを覗いた感じですね。
ということで、「ヘアラインを垂直に重ねればできるんじゃないか」という考えに至りました。
ステップ2. ヘアラインを2つ作って重ねる
ヘアラインの作り方は以下のとおりです。
- ランダムな点を描く
- それを横に引き伸ばす
- 終わり
では、やってみます。
1. 新規ドキュメントを作ったら、真っ白なレイヤーに「フィルター > ノイズ > ノイズを加える」を選びます。点々が入ります。
2. ノイズが入ったら、「イメージ > 色調補正 > 色相・彩度」で色味を抜かします。
3. 続いて、「フィルタ > ぼかし > ぼかし（移動）」で適当に値を調整します。ヘアラインっぽいものができます。
4. 新規レイヤーを作って、1と2をもう一度繰り返します。そして、3のぼかしに入る前にレイヤーを回転させてからぼかします。ぼかしが終わったら回転もう一度回転させます。
5. できたら描画モードを「通常」から「乗算」に変更します。
これで一応完成です。そのものズバリという感じではありませんが、ノイズの量とかぼかしの強さをちょうせすれば、また色々と変わってくるかと思います。
ステップ3. テクスチャを調整する
これで一応テクスチャはできたわけなので、後はいろいろとやりようがあるんじゃないでしょうか。Appleのヤツのほうが、もっとメリハリがはっきりしてますね。
今のところはグレーなので、色の付いたものに重ねたりするといいでしょう。グラデーションとかで調整してください。
以上で終わりです。