Lesson 03 パターン+テクスチャで雰囲気を高める - Webデザイン表現&技法の新・スタンダード・デザインパーツ編 | デザインってオモシロイ -MdN Design Interactive-

Lesson 03 パターン+テクスチャで雰囲気を高める - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

2019.3.23 SAT

Webデザイン
表現&技法の
新・スタンダード


Lesson 3 パターン+テクスチャで
雰囲気を高める

制作・文 高橋としゆき(Graphic Arts Unit)
To Use Photoshop | Illustrator
Browser IE | Firefox | Safari


ストライプなどのシンプルなパターンにノイズのテクスチャを加え、全体の雰囲気を高める。スタイリッシュかつ手触り感のあるイメージに仕上げることが可能だ。 ストライプなどのシンプルなパターンにノイズのテクスチャを加え、全体の雰囲気を高める。スタイリッシュかつ手触り感のあるイメージに仕上げることが可能だ。


01

まずは基本となるストライプのパターンから作成しよう。Illustratorを起動して[モード:RGB]で新規書類を作成する。【1-1】[長方形ツール]で長方形を描画し【1-2】、シアーツールで斜めに傾ける【1-3】。

【1-1】
【1-1】

【1-2】[幅:20px][高さ:40px]の長方形を作成し[線:なし][塗り:黒]に設定する
【1-2】[幅:20px][高さ:40px]の長方形を作成し[線:なし][塗り:黒]に設定する

【1-3】[シアーツール]で[シアーの角度:45°][方向:水平]で実行。その後、[変形パネル]を使ってX座標とY座標を切りのいい数字(整数)にしておく
【1-3】[シアーツール]で[シアーの角度:45°][方向:水平]で実行。その後、[変形パネル]を使ってX座標とY座標を切りのいい数字(整数)にしておく

02

ファイルメニュー→ " 書き出し..." を選択し、[ フォーマット:Photoshop(psd)]で書き出す【2-1】。このデータをPhotoshopで開き、レイヤー名を「斜線1」に変更する。さらに、このレイヤーを1つ複製してレイヤー名を「斜線2」に変 更する【2-2】。

【2-1】書き出し時のオプション設定
【2-1】書き出し時のオプション設定

【2-2】
【2-2】

03

「斜線2」レイヤーを選択し、フィルタメニュー→" その他" →" スクロール..." を【3-1】の設定で実行する。その後イメージメニュー→"カンバスサイズ..."を選択 してカンバスサイズを変更する【3-2】。編集メニュー→"パターンを定義..."を選択し、[パターン名:ストライプ]で[OK]をクリックする【3-3】。

【3-1】[水平方向:-40pixel右へ][未定義領域:背景に設定する]と設定
【3-1】[水平方向:-40pixel右へ][未定義領域:背景に設定する]と設定

【3-2】[基準位置]を中段左に設定し、[幅:40pixel]に設定
【3-2】[基準位置]を中段左に設定し、[幅:40pixel]に設定

【3-3】
【3-3】

04

Photoshopで新規書類を作成。新規レイヤーを作成し【4-1】、レイヤー名を「ストライプ」に変更する。編集メニュー→"塗りつぶし..."を選択し、[使用:パターン]で先ほど定義した「ストライプ」を選択して実行する。このレイヤーは[不透明度:20%]に設定しておく【4-2】【4-3】。

【4-1】[幅:400pixel][高さ:400pixel]に設定し、[ 背景] を[R125 /G190/B15]の色で塗りつぶす
【4-1】[幅:400pixel][高さ:400pixel]に設定し、[ 背景] を[R125 /G190/B15]の色で塗りつぶす

【4-2】
【4-2】

【4-3】
【4-3】

05

続いて、ストライプのパターンに合成するテクスチャを作成しよう。使用する画像をPhotoshopで開き、[長方形選択ツール]でShiftキーを押しながらドラッグ、画像の任意の範囲を正方形の形で選択する。その後、イメージメニュー→"切り抜き"を実行しておく【5-1】。

【5-1】
【5-1】今回はコンクリートの壁をデジカメで撮影したものを使用。選択する範囲は、できるだけ濃度にムラがない部分を選ぶのがポイントだ

06

今回はパターンの1ユニットを400ピクセル四方にするので、先ほど切り抜いたテクスチャを半分の200ピクセル四方のサイズにしておく【6-1】。この画像を「テクスチャ1」という名前のレイヤーに変換しておく【6-2】。

【6-1】イメージメニュー→「画像解像度...」を選択し、[画像の再サンプル]にチェックを入れ[幅:200pixel][高さ:200pixel]に設定
【6-1】イメージメニュー→「画像解像度...」を選択し、[画像の再サンプル]にチェックを入れ[幅:200pixel][高さ:200pixel]に設定

【6-2】
【6-2】

07

「テクスチャ1」を選択し、水平方向に反転して複製。レイヤー名を「テクスチャ2」に変更する【7-1】。続けて、イメージメニュー→" カンバスサイズ..." を選択し、[基準位置]を中段左に設定。[幅:400pixel]にしてカンバスサイズを変更する【7-2】【7-3】。[移動ツール]で「テクスチャ2」の画像を右端まで移動し、2つのレイヤーを結合【7-4】。レイヤー名を「テクスチャ1」とする【7-5】。

【7-1】編集メニュー→「変形」→「水平 方向に反転」をoption(Alt)キーを押しながら実行する
【7-1】編集メニュー→「変形」→「水平 方向に反転」をoption(Alt)キーを押しながら実行する

【7-2】
【7-2】

【7-3】
【7-3】

【7-4】
【7-4】

【7-5】
【7-5】

08

「テクスチャ1」を選択し、垂直方向に反転して複製。レイヤー名を「テクスチャ2」に変更する【8-1】。「07」と同じ要領でカンバスサイズを[高さ:400pixel]、[基準位置]を上段中に設定する【8-2】。「テクスチャ2」を画像の下端まで移動させ、2つのレイヤーを結合する。これでシームレスなテクスチャの完成だ【8-3】。

【8-1】編集メニュー→「変形」→「垂直 方向に反転」をoption(Alt)キーを押しながら実行する
【8-1】編集メニュー→「変形」→「垂直 方向に反転」をoption(Alt)キーを押しながら実行する

【8-2】
【8-2】

【8-3】
【8-3】

09

テクスチャの画像を先に作っておいたストライプパターンの画像にペーストし、このテクスチャのレイヤーを[描画モード:ソフトライト]に変更【9-1】。すべてを統 合してJPEG形式で書き出す【9-2】。あとはこの画像をCSSで背景画像にrepeatで並べれば完成だ【9-3】。

【9-1】
【9-1】

【9-2】
【9-2】

【9-3】
【9-3】


twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

3.11-3.17