|
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-2】[幅：20px][高さ：40px]の長方形を作成し[線：なし][塗り：黒]に設定する](attach/images/201107/Webcre/parts/Lesson3/1-2.jpg)
【1-2】[幅：20px][高さ：40px]の長方形を作成し[線：なし][塗り：黒]に設定する
![【1-3】[シアーツール]で[シアーの角度：45°][方向：水平]で実行。その後、[変形パネル]を使ってX座標とY座標を切りのいい数字（整数）にしておく](attach/images/201107/Webcre/parts/Lesson3/1-3.jpg)
【1-3】[シアーツール]で[シアーの角度：45°][方向：水平]で実行。その後、[変形パネル]を使ってX座標とY座標を切りのいい数字（整数）にしておく
【1-1】
【1-2】[幅：20px][高さ：40px]の長方形を作成し[線：なし][塗り：黒]に設定する
【1-3】[シアーツール]で[シアーの角度：45°][方向：水平]で実行。その後、[変形パネル]を使ってX座標とY座標を切りのいい数字（整数）にしておく
02
ファイルメニュー→ " 書き出し..." を選択し、[ フォーマット：Photoshop（psd）]で書き出す【2-1】。このデータをPhotoshopで開き、レイヤー名を「斜線1」に変更する。さらに、このレイヤーを1つ複製してレイヤー名を「斜線2」に変 更する【2-2】。
【2-1】書き出し時のオプション設定
【2-2】
【2-1】書き出し時のオプション設定
【2-2】
03
「斜線2」レイヤーを選択し、フィルタメニュー→" その他" →" スクロール..." を【3-1】の設定で実行する。その後イメージメニュー→"カンバスサイズ..."を選択 してカンバスサイズを変更する【3-2】。編集メニュー→"パターンを定義..."を選択し、[パターン名：ストライプ]で[OK]をクリックする【3-3】。
![【3-1】[水平方向：-40pixel右へ][未定義領域：背景に設定する]と設定](attach/images/201107/Webcre/parts/Lesson3/3-1.jpg)
【3-1】[水平方向：-40pixel右へ][未定義領域：背景に設定する]と設定
![【3-2】[基準位置]を中段左に設定し、[幅：40pixel]に設定](attach/images/201107/Webcre/parts/Lesson3/3-2.jpg)
【3-2】[基準位置]を中段左に設定し、[幅：40pixel]に設定
【3-3】
【3-1】[水平方向：-40pixel右へ][未定義領域：背景に設定する]と設定
【3-2】[基準位置]を中段左に設定し、[幅：40pixel]に設定
【3-3】
04
Photoshopで新規書類を作成。新規レイヤーを作成し【4-1】、レイヤー名を「ストライプ」に変更する。編集メニュー→"塗りつぶし..."を選択し、[使用：パターン]で先ほど定義した「ストライプ」を選択して実行する。このレイヤーは[不透明度：20％]に設定しておく【4-2】【4-3】。
![【4-1】[幅：400pixel][高さ：400pixel]に設定し、[ 背景] を[R125 ／G190／B15]の色で塗りつぶす](attach/images/201107/Webcre/parts/Lesson3/4-1.jpg)
【4-1】[幅：400pixel][高さ：400pixel]に設定し、[ 背景] を[R125 ／G190／B15]の色で塗りつぶす
【4-2】
【4-3】
【4-1】[幅：400pixel][高さ：400pixel]に設定し、[ 背景] を[R125 ／G190／B15]の色で塗りつぶす
【4-2】
【4-3】
05
続いて、ストライプのパターンに合成するテクスチャを作成しよう。使用する画像をPhotoshopで開き、[長方形選択ツール]でShiftキーを押しながらドラッグ、画像の任意の範囲を正方形の形で選択する。その後、イメージメニュー→"切り抜き"を実行しておく【5-1】。
【5-1】今回はコンクリートの壁をデジカメで撮影したものを使用。選択する範囲は、できるだけ濃度にムラがない部分を選ぶのがポイントだ
【5-1】今回はコンクリートの壁をデジカメで撮影したものを使用。選択する範囲は、できるだけ濃度にムラがない部分を選ぶのがポイントだ
06
今回はパターンの1ユニットを400ピクセル四方にするので、先ほど切り抜いたテクスチャを半分の200ピクセル四方のサイズにしておく【6-1】。この画像を「テクスチャ1」という名前のレイヤーに変換しておく【6-2】。
![【6-1】イメージメニュー→「画像解像度...」を選択し、[画像の再サンプル]にチェックを入れ[幅：200pixel][高さ：200pixel]に設定](attach/images/201107/Webcre/parts/Lesson3/6-1.jpg)
【6-1】イメージメニュー→「画像解像度...」を選択し、[画像の再サンプル]にチェックを入れ[幅：200pixel][高さ：200pixel]に設定
【6-2】
【6-1】イメージメニュー→「画像解像度...」を選択し、[画像の再サンプル]にチェックを入れ[幅：200pixel][高さ：200pixel]に設定
【6-2】
07
「テクスチャ1」を選択し、水平方向に反転して複製。レイヤー名を「テクスチャ2」に変更する【7-1】。続けて、イメージメニュー→" カンバスサイズ..." を選択し、[基準位置]を中段左に設定。[幅：400pixel]にしてカンバスサイズを変更する【7-2】【7-3】。[移動ツール]で「テクスチャ2」の画像を右端まで移動し、2つのレイヤーを結合【7-4】。レイヤー名を「テクスチャ1」とする【7-5】。
【7-1】編集メニュー→「変形」→「水平 方向に反転」をoption（Alt）キーを押しながら実行する
【7-2】
【7-3】
【7-4】
【7-5】
【7-1】編集メニュー→「変形」→「水平 方向に反転」をoption（Alt）キーを押しながら実行する
【7-2】
【7-3】
【7-4】
【7-5】
08
「テクスチャ1」を選択し、垂直方向に反転して複製。レイヤー名を「テクスチャ2」に変更する【8-1】。「07」と同じ要領でカンバスサイズを［高さ：400pixel］、［基準位置］を上段中に設定する【8-2】。「テクスチャ2」を画像の下端まで移動させ、2つのレイヤーを結合する。これでシームレスなテクスチャの完成だ【8-3】。
【8-1】編集メニュー→「変形」→「垂直 方向に反転」をoption（Alt）キーを押しながら実行する
【8-2】
【8-3】
【8-1】編集メニュー→「変形」→「垂直 方向に反転」をoption（Alt）キーを押しながら実行する
【8-2】
【8-3】
09
テクスチャの画像を先に作っておいたストライプパターンの画像にペーストし、このテクスチャのレイヤーを[描画モード：ソフトライト]に変更【9-1】。すべてを統 合してJPEG形式で書き出す【9-2】。あとはこの画像をCSSで背景画像にrepeatで並べれば完成だ【9-3】。
【9-1】
【9-2】
【9-3】
【9-1】
【9-2】
【9-3】
