iOSMac OS

この投稿は5年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2011 年 8 月 8 日 2,057日前)
1,586文字 (読了時間3分)

SPONSORED LINK

Safariの裏地はこんなの
Safariの裏地はこんなの

今このブログのリニューアルを検討していて、Photoshopをちまちまいじってます。その過程でちょっとした発見があったので、一応共有します。本当にあってるかどうか分かんないで、話半分に読んでください。

先日AppleからLionことMac OS 10.7が出ましたが、全体的にスクロールの挙動が変わり、ブラウザで限界までスクロールするとびよーんと動いて、ブラウザの裏地(という表現でいいのか)が見えるようになりました。

iOSのフォルダにも裏地
iOSのフォルダにも裏地

この裏地っぽいテクスチャはiOSでも使われていて、アプリケーションのフォルダを開くと見えたりします。これからAppleにとって「裏」とか「領域外」の表現はこれがスタンダードなのかなと。

僕もこれを真似しようと思ったんですが、なかなかこれだというのが見つからなかったので、自分で作ってみました。以下、そのやり方です。

一応、順を追って説明しますが、僕はデザイナーではないので、そのものズバリを再現するまでは行きません。「こんな感じ」というレベルです。

いったんテクスチャとして取得してしまえば、あとは乗算でブレンドするなり、強度を変えるなりして工夫すればそれなりに似たものはできると思います。

ステップ1. 裏地を観察する

パッと見、この裏地はなんかの布地なんじゃないかと思って、”Photoshop tutorial texture mac”で探したんですが、なかなか見つかりません。「テクスチャ」も「布地」も英語にしちゃうと一緒ですからね。

さらによく観察すると、これは布ではなく、引っかき傷みたいなものが縦横に走っているんだということがわかりました。引っかき傷といえば、Mac OS X 10.5まではアルミのすり切れたような表現(ヘアライン?)が随所に使われていました。あれからメタリックなてかりを覗いた感じですね。

ということで、「ヘアラインを垂直に重ねればできるんじゃないか」という考えに至りました。

ステップ2. ヘアラインを2つ作って重ねる

ヘアラインの作り方は以下のとおりです。

  1. ランダムな点を描く
  2. それを横に引き伸ばす
  3. 終わり

では、やってみます。

1. 新規ドキュメントを作ったら、真っ白なレイヤーに「フィルター > ノイズ > ノイズを加える」を選びます。点々が入ります。

フィルタ > ノイズ > ノイズを加える
フィルタ > ノイズ > ノイズを加える

2. ノイズが入ったら、「イメージ > 色調補正 > 色相・彩度」で色味を抜かします。

イメージ > 色調補正 > 色相・彩度
イメージ > 色調補正 > 色相・彩度

3. 続いて、「フィルタ > ぼかし > ぼかし(移動)」で適当に値を調整します。ヘアラインっぽいものができます。

フィルタ > ぼかし > ぼかし(移動)
フィルタ > ぼかし > ぼかし(移動)

4. 新規レイヤーを作って、1と2をもう一度繰り返します。そして、3のぼかしに入る前にレイヤーを回転させてからぼかします。ぼかしが終わったら回転もう一度回転させます。

90°回転させてからフィルタ
90°回転させてからフィルタ

5. できたら描画モードを「通常」から「乗算」に変更します。

とりあえず完成
とりあえず完成

これで一応完成です。そのものズバリという感じではありませんが、ノイズの量とかぼかしの強さをちょうせすれば、また色々と変わってくるかと思います。

ステップ3. テクスチャを調整する

色とグラデーションを入れたもの
色とグラデーションを入れたもの

これで一応テクスチャはできたわけなので、後はいろいろとやりようがあるんじゃないでしょうか。Appleのヤツのほうが、もっとメリハリがはっきりしてますね。

今のところはグレーなので、色の付いたものに重ねたりするといいでしょう。グラデーションとかで調整してください。

以上で終わりです。

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2011 年 8 月 8 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

文学と同じく、音楽も、感情を揺さぶり引っくり返し、そして、まったき悲しみや陶酔を生み出すものと定義することができる。文学と同じく、絵画も、感嘆の思いや世界に向けられた新たな視線を生み出す。しかし、ただ文学だけが、他の人間の霊と触れ合えたという感覚を与えてくれるのだ。その魂のすべて、その弱さと栄光、その限界、矮小さ、固定観念や信念。魂が感動し、関心を抱き、興奮しまたは嫌悪をもよおしたすべてのものと共に。

— ミシェル・ウエルベック

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。