透明ノイズと紙テクスチャ。
透明ノイズ

このサイトの背景にもうっすら敷かれているでおなじみ「透明ノイズ」。お手軽に導入できる、透明ノイズの作り方と使い方のまとめです。

ノイズ画像のつくり方

ざらざら質感のノイズ画像は、Photoshopのフィルター「ノイズを加える…」で、簡単につくることができます。
手順は以下の通り。

  1. 適当な大きさの新規ファイル(ここでは100px × 100px)をグレースケールで用意。

  2. 明度50%のグレー(#808080)で、全面塗りつぶし。

    下準備
  3. 「フィルター」→「ノイズ」→「ノイズを加える…」を適用(ここでは量を「100%」、分布方法を「均等に分布」で適用)

    ノイズを加える…

あっという間にノイズ画像ができました!ちょっと粗目なのは、透明ノイズにするための秘訣です;)
続いて、このノイズ画像を半透明にします。

ページトップへ戻る

ノイズを半透明にする

チャンネルレイヤーを使って、明るい部分だけのノイズと、暗い部分だけのノイズをつくります。

  1. チャンネルパネルのサムネイルをを押しながらクリック(これで、明るい部分だけが選択された状態になります)。 新規レイヤーを作って、選択範囲を白色(#ffffff)で塗りつぶし。

    明るい部分を抽出
  2. shiftIで選択範囲を反転(これで、暗い部分だけが選択された状態になります)。 新規レイヤーを作って、選択範囲を黒色(#000000)で塗りつぶし。

    暗い部分を抽出
  3. 2つのレイヤーを結合し、背景レイヤーを非表示にして、「不透明度」をお好みで調整(ここでは3%に設定)

    不透明度はお好みで

あとは、これをPNG-24で書き出したら、できあがり!

ページトップへ戻る

透明ノイズを使ってみる

できあがった透明ノイズを背景画像として使ってみると、こんな感じになります。
※下のサンプルでは、「不透明度」を1%〜5%にして書き出したものを並べてみました。

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください