Lopan.jp

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

title

ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。
このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。
そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。

透明ノイズ。

「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。
Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてますね(下図)

Firefoxの「画像だけを表示」

CSSは下記のように記述されてました。

body { background: #222 url("chrome://global/skin/media/imagedoc-darknoise.png"); }

backgroundプロパティで、背景色を#222、背景画像にimagedoc-darknoise.pngというPNG画像を指定してます。
画像が半透明なので、背景色(上記では#222)を活かしたまま、ノイズを乗せることができてるんですね。
background-colorを変えるだけでどんな色でもノイズのテクスチャが乗るってわけです;)。

backgroundプロパティは、背景色の上に背景画像が乗る

ノイズ画像のつくり方

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

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

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

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

    ノイズを加える…

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

目次に戻る

ノイズを半透明にする

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

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

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

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

    不透明度はお好みで

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

はいできあがり

目次に戻る

透明ノイズを使ってみる

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

  • HTML
  • CSS
  • PREVIEW
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>透明ノイズ | Lopan.jp</title>
<link rel="stylesheet" href="css/noise.css">
</head>
<body>
<div id="noise_1" class="section">
<div class="inner">
<h1>1%</h1>
</div>
</div>
<div id="noise_2" class="section">
<div class="inner">
<h1>2%</h1>
</div>
</div>
<div id="noise_3" class="section">
<div class="inner">
<h1>3%</h1>
</div>
</div>
<div id="noise_4" class="section">
<div class="inner">
<h1>4%</h1>
</div>
</div>
<div id="noise_5" class="section">
<div class="inner">
<h1>5%</h1>
</div>
</div>
</body>
</html>
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #fff;
  font-family: "Heiti SC";
}
h1 {
  margin: 0;
  padding: 1em 0;
}
.section {
  float: left;
  width: 20%;
}
#noise_1 {
  background: #593869 url(../img/noise_1.png) center center;
}
#noise_2 {
  background: #593869 url(../img/noise_2.png) center center;
}
#noise_3 {
  background: #593869 url(../img/noise_3.png) center center;
}
#noise_4 {
  background: #593869 url(../img/noise_4.png) center center;
}
#noise_5 {
  background: #593869 url(../img/noise_5.png) center center;
}
.inner {
  height: 1000px;
  border-right: 1px rgba(255,255,255,.3) dashed;
  text-align: center;
}
#noise_5 .inner {
  border-right: 0;
}

目次に戻る

紙テクスチャ。

そんな訳で、下図のようなテクスチャを用意してみました。
画用紙に水彩絵の具で着彩したものをモノクロでスキャンしたものです。

画用紙に水彩絵の具で着彩した画像

この画像を、透明ノイズと同じように、背景色が透ける「透明テクスチャ」にしてみたいと思います!

リピート画像にする

とはいえこのままでは背景画像として使えそうにないので、まずはこれを、シームレスに繋がるように加工します。
適当なサイズでトリミング後、左に続く模様を右側へ持ってきて、内側をグラデーションで上手くなじませれば、左右が継ぎ目なく繋がるようになりますよね(下図)

左右にリピートさせる方法

上と下も同じ方法で繋げば、背景にタイル状に並べて使える「リピート画像」になるって寸法です!
ここでは、300px × 300pxのリピート画像をつくってみます。手順は以下の通り:)。

  1. 長方形ツールで、正方形(ここでは300px × 300px)をつくる。
    コピーした背景を、クリッピングマスクoptionGして、いい感じの場所をトリミング。

    使用するサイズでトリミング
  2. 背景をもう一個複製して、右へ300px(正方形の幅分)移動し、右側を残すようにグラデーションでレイヤーマスクする。

    左右の模様を繋げる
  3. 背景のコピー2つを結合したレイヤーを作成optionEして、クリッピングマスクoptionGする。

    上下を繋げる用のレイヤーを用意
  4. 下へ300px(正方形の高さ分)移動して、下側を残すようにグラデーションでレイヤーマスクする。

    上下の模様を繋げる

ここまででほぼ完成ですが、念のため、ちゃんと綺麗にリピートしてるかどうか、結合レイヤーを移動させてみて、継ぎ目をチェックします。

継ぎ目チェック

大丈夫そうだったら、テクスチャ部分のみを切り抜いて、リピート画像できあがりです!

リピート画像できあがり

目次に戻る

テクスチャを半透明にする

ノイズの時と同じように明るい部分と暗い部分を抽出します。
明るい部分だけ、暗い部分だけを、より抽出しやすいように、トーンカーブで調整しながら行います。

  1. 明るい部分を抽出しやすいように、トーンカーブで暗めに調整。

    上のポイントを出力50まで、下のポイントを出力25まで移動
  2. チャンネルレイヤーの「グレー」のサムネールを、を押しながらクリック(これで明るい部分だけが選択された状態になります)
    新規レイヤーを作成して、選択範囲を白で塗りつぶす。

    明るい部分を抽出
  3. 暗い部分を抽出しやすいように、トーンカーブで明るめに調整。

    上のポイントを出力75まで、下のポイントを出力50まで移動
  4. チャンネルレイヤーの「グレー」のサムネールを、を押しながらクリック後、選択範囲を反転shiftI(これで暗い部分だけが選択された状態になります)
    新規レイヤーを作成して、選択範囲を黒で塗りつぶす。

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

    不透明度はお好みで

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

よっしゃできあがり

目次に戻る

透明テクスチャを使ってみる

できあがった透明テクスチャを背景画像として使ってみると、下のサンプルのようになりました。
紫色の画用紙みたいですよねーXD!

  • HTML
  • CSS
  • PREVIEW
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>透明テクスチャ | Lopan.jp</title>
<link rel="stylesheet" href="css/watercolor.css">
</head>
<body>
<h1>透明テクスチャ</h1>
</body>
</html>
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #fff;
  background: #593869 url(../img/watercolor.png) center center;
  font-family: "Heiti SC";
}
h1 {
  margin: 0;
  padding: 1em;
}

目次に戻る

応用編。

透明ノイズや透明テクスチャを使って何ができるのか、3つだけサンプルを作ってみました。
どうぞご覧くださいまし;)。

写真やイラストや動画に重ねる

下記サイトでは、透明ノイズを動画の上に重ねてました!

POOL inc.

ノイズ画像の配置位置を動かす事でテレビの砂嵐みたいな表現になるんですねー。なんだかレトロな雰囲気で素敵です:)。
こちらのサイトに倣って、サンプルをつくってみました!

  • HTML
  • CSS
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>写真やイラストに重ねる | Lopan.jp</title>
<link rel="stylesheet" href="css/sample1.css">
</head>
<body>
<h1>透明ノイズを写真やイラストに重ねる</h1>
<img src="img/lopan_cafe.jpg" alt="Lopan cafe">
<div class="noise"></div>
</body>
</html>
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Heiti SC";
}
h1 {
	z-index: 1;
	position: relative;
	margin: 0;
	padding: 1em;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0,0,0,.2)
}
.noise,
img {
	position: absolute;
	top: 0;
	left: 0;
}
.noise {
	position: fixed;
	width: 100%;
	height: 100%;
	background: url(../img/noise_5.png);
  animation: noise_anima 1s steps(10) infinite;
  -webkit-animation: noise_anima 1s steps(10) infinite;
}
img {
	width: 100%;
	height: auto;
}
@keyframes noise_anima {
  from { background-position: 0 0; }
  to { background-position: 123px 456px; }
}
@-webkit-keyframes noise_anima {
  from { background-position: 0 0; }
  to { background-position: 123px 456px; }
}

目次に戻る

Google マップに質感をプラス

Google maps APIを使えば、Google マップにも透明テクスチャを乗せることができます:)。

 <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Google マップに質感をプラス | Lopan.jp</title>
<link rel="stylesheet" href="css/sample2.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample2.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
body {
  margin: 0;
  line-height: 1.6;
  font-family: arial, sans-serif;
}
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}
/*
 * sample2.js
 */

function TextureMapType(tileSize) {
  this.tileSize = tileSize;
}
TextureMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.background = 'url(./img/watercolor.png)';
  div.style.backgroundSize = '256px 256px';
  return div;
};

function initialize() {
  var latlng = new google.maps.LatLng(35.361972, 136.616036);
  var myOptions = {
    zoom: 15,
    center: latlng,
    disableDefaultUI: true,
    zoomControl: true,
    mapTypeControl: true,
    mapTypeControlOptions: { mapTypeIds: ['mono', google.maps.MapTypeId.ROADMAP] },
    scrollwheel: false
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* オーバーレイ マップタイプを挿入 */
  map.overlayMapTypes.insertAt(0, new TextureMapType(new google.maps.Size(256, 256)));
  
  /* スタイル付き地図 */
  var styleOptions = [
    { 'elementType': 'geometry', 'stylers': [{ 'gamma': 0.8 }, { 'saturation': -100 }, { 'lightness': 20 }] },
    { 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
    { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'lightness': 30 }, { 'visibility': 'on' }] },
    { 'featureType': 'poi.attraction', 'elementType': 'labels.icon', 'stylers': [{ 'visibility': 'on' }] },
    { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'lightness': -5 }] },
    { 'featureType': 'road', 'stylers': [{ 'lightness': 100 }] },
    { 'featureType': 'transit.line', 'elementType': 'geometry', 'stylers': [{ 'lightness': 30 }] },
    { 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [{ 'lightness': -3 }] }
  ];
  var monoType = new google.maps.StyledMapType(styleOptions, { name: 'モノクロマップ' });
  map.mapTypes.set('mono', monoType);
  map.setMapTypeId('mono');
}
google.maps.event.addDomListener(window, 'load', initialize);

目次に戻る

いろんなテクスチャを透明にしてみる

シームレスで使えるテクスチャ画像っていろんなサイトで紹介されてますよね!これを利用しない手はないです。

ということで、上記の記事で紹介されてるテクスチャの中から、試しにいくつか透明にしてみましたー。

  • HTML
  • CSS
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>いろんなテクスチャを透明にしてみる | Lopan.jp</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/sample3.css">
</head>
<body>
<div id="texture_1" class="section">
<div class="inner">
<h1>texture1</h1>
<p><a href="http://lil-plunkie.deviantart.com/art/Crumpled-Paper-Texture-166956233" target="_blank">Crumpled_Paper_Texture.jpg</a></p>
</div>
</div>
<div id="texture_2" class="section">
<div class="inner">
<h1>texture2</h1>
<p><a href="http://lostandtaken.com/blog/2012/1/4/30-free-seamless-background-textures.html" target="_blank">seamlesstexture1_500.jpg</a></p>
</div>
</div>
<div id="texture_3" class="section">
<div class="inner">
<h1>texture3</h1>
<p><a href="http://lostandtaken.com/blog/2012/1/4/30-free-seamless-background-textures.html" target="_blank">seamlesstexture6_500.jpg</a></p>
</div>
</div>
<div id="texture_4" class="section">
<div class="inner">
<h1>texture4</h1>
<p><a href="http://crazykira-resources.deviantart.com/art/Patterns-36-149418100" target="_blank">crazykira-resources_016.jpg</a></p>
</div>
</div>
<div id="texture_5" class="section">
<div class="inner">
<h1>texture5</h1>
<p><a href="http://crazykira-resources.deviantart.com/art/Patterns-36-149418100" target="_blank">crazykira-resources_017.jpg</a></p>
</div>
</div>
</body>
</html>
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #fff;
  font-family: "Heiti SC";
}
h1 {
  margin: 0;
  padding: 1em 0 0;
}
p {
  margin: 10px 0;
  font-size: 10px;
}
a {
  color: #fff;
}
a:hover {
  text-decoration: none;
}
.section {
  float: left;
  width: 20%;
  animation: gradation 20s linear infinite;
  -webkit-animation: gradation 20s linear infinite;
}
#texture_1 {
  background: #348b41 url(../img/wrinkled_paper.png) center center;
  animation-delay: -20s;
  -webkit-animation-delay: -20s;
}
#texture_2 {
  background: #744180 url(../img/seamlesstexture1.png) center center;
  animation-delay: -16s;
  -webkit-animation-delay: -16s;
}
#texture_3 {
  background: #ea4141 url(../img/seamlesstexture6.png) center center;
  animation-delay: -12s;
  -webkit-animation-delay: -12s;
}
#texture_4 {
  background: #ff8b41 url(../img/crazykira-resources_016.png) center center;
  animation-delay: -8s;
  -webkit-animation-delay: -8s;
}
#texture_5 {
  background: #1b5f97 url(../img/crazykira-resources_017.png) center center;
  animation-delay: -4s;
  -webkit-animation-delay: -4s;
}
.inner {
  height: 1000px;
  border-right: 1px rgba(255,255,255,.3) dashed;
  text-align: center;
}
#texture_5 .inner {
  border-right: 0;
}
@keyframes gradation {
  0% { background-color: #348b41; }
  18% { background-color: #348b41; }
  20% { background-color: #744180; }
  38% { background-color: #744180; }
  40% { background-color: #ea4141; }
  58% { background-color: #ea4141; }
  60% { background-color: #ff8b41; }
  78% { background-color: #ff8b41; }
  80% { background-color: #1b5f97; }
  98% { background-color: #1b5f97; }
  100% { background-color: #348b41; }
}
@-webkit-keyframes gradation {
  0% { background-color: #348b41; }
  18% { background-color: #348b41; }
  20% { background-color: #744180; }
  38% { background-color: #744180; }
  40% { background-color: #ea4141; }
  58% { background-color: #ea4141; }
  60% { background-color: #ff8b41; }
  78% { background-color: #ff8b41; }
  80% { background-color: #1b5f97; }
  98% { background-color: #1b5f97; }
  100% { background-color: #348b41; }
}

※上のサンプルで使っているテクスチャを透明にした時のPSDはこちらからダウンロードできるようにしておきますね;)。

下記サイトではそんな透明テクスチャを使った、いろんなリピート画像がダウンロードできます;D。便利素敵ー!

Transparent Textures

目次に戻る

あとがき

あんまり使いどころがなくて困りました…。
けどもっと、いろんなテクスチャを使って、いろんなところに重ねていったら、楽しくなるやもしれませんね…。フラットなデザインに飽きてきたなと思った時とかに、ちょっと試してみてもいいかもです:)。
他になにか使いどころがあったらこっそり追記しますねー。
以上、透明ノイズと紙テクスチャでしたX)!

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

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

  1. Pingback: Googleマップのカスタマイズ その2 / yuheijotaki.com

コメントを残す

*がついている欄は必須項目です。