Tutorial

Home > Tutorial > Photoshopでざらざらのノイズテクスチャをデザインする方法

Photoshopでざらざらのノイズテクスチャをデザインする方法

2010年7月26日　　　　

Final Preview

noisetextureinphotoshop1

参照ホームページ : Noise Texture in Photoshop – Soh Tanaka

 

上記のホームページのヘッダーで使用されている、ざらざらとした質感の高いテクスチャ素材は最近よく利用されるデザイントレンドのひとつではないでしょうか。

以下のホームページ、ブログなどでも利用されており、個人的に参考にしたいデザインでもあります。

 

Billy Tamplin

billytamplin

 

dConstruct 2010

dconstruct

 

Dribble

dribbble

 

HeyIndy

heyindy

 

今回はPhotoshopでざらざらとした質感のノイズテクスチャの作り方をご紹介します。

簡単な手順のみですが、ホームページやブログなどの背景デザインとして利用してみてはいかがでしょうか。

 

 

詳細は以下から。

 

 

チュートリアル情報

 

 

 プログラム : Photoshop

バージョン : CS5で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 5分から10分ほど

 

 このチュートリアルから学ぶことのできるポイントとしては、

・　「ノイズ」フィルタを利用した質感の高いテクスチャ素材の作り方

となります。 

 

 

チュートリアルハイライト

 

 

Step 1　カンバスを塗りつぶす

 

 まずは新しいカンバスを開きましょう。今回は600×400pxの72px/inchのカンバスを使用します。

描画色を藍色(#142e51)とし、メインメニューより「編集」＞「塗りつぶし」でカンバス全体を塗りつぶしましょう。

ショートカットとしては、Ctrlキー+Aでカンバス全体を選択し、Altキー+BackSpaceキーをクリックすると描画色で選択範囲を塗りつぶしてくれますよ。

1-1

 

 

Step 2　ノイズ用レイヤーを作成する

 

メインメニューより「レイヤー」＞「新規レイヤー」を選択し、一番上に新しいレイヤーを作成します。（Ctrlキー+Altキー+Nでショートカット）

カンバスを白(#ffffff)で塗りつぶしたら、再度メインメニューより「フィルタ」＞「ノイズ」>「ノイズを加える」を選択し、「25%」で適用する。

2-2

 

 

Step 3　ノイズレイヤーをモノクロに変換する

 

メインメニューより「イメージ」＞「色調補正」＞「色相・彩度」を選択し、「彩度」を「-100」にすることでモノクロに変換することができます。

3-1

 

 

Step 4　テクスチャをブレンドさせよう

 

ノイズテクスチャを選択した状態で、メインメニューより「イメージ」＞「色調補正」＞「色調を反転」を適用させましょう。

これでレイヤー全体が真っ黒になったと思います。

続けてレイヤーの描画モードを「覆い焼き（リニア） – 加算」に変更し、不透明度を45%に変更したら完成となります。

4-1

 

 

完成　できあがり

 

単色では表現することのできない質感を簡単にデザインすることができました。

final

 

これまで個人的には背景レイヤーを塗りつぶした後に、直接「ノイズ」フィルターを適用していたのですが、レイヤーを別々にした方が仕上がりが良くなったと感じています。

以下のエントリーではざらざらとした質感のテクスチャを利用したウェブデザインをまとめていますので、ホームページ制作の参考にしてみてはいかがでしょう。

 

背景に粒状のざらざらテクスチャを使った、立体感のあるウェブサイトまとめ

graintextureweb



このファイルの詳細情報

オリジナルサイト：
http://www.sohtanaka.com/web-design/noise-texture-in-photoshop/
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...
 

この記事を読んだ人はこれらの記事も読んでいます