レトロポップなパターンを使って品よく見せる
使いどころ 背景ビジュアルやワンポイントの装飾要素として使って印象づける！
制作・文 高橋としゆき（Graphic Arts Unit）
url http://www.interq.or.jp/ox/gau/
| “ジグザグ...”で左右対称な波形を作成する |
 |
| ●制作の要点 上下に伸びた波形が特徴的なパターン。ベースとなる長方形の上に縦長の長方形を重ねて、“ジグザグ...”でランダムに変形。さらに、ブレンドツールで縦のラインを多数つくって仕上げた。 .................................................. 使用ソフト Illustrator CS2/CS3 Photoshop CS2/CS3 |
波形のパターンを背景ビジュアルに使用して目を引かせる
ポスターをイメージして、縦長サイズの背景に波形のパターンを配置したデザイン。このように地紋として使用する場合は、配色が偏らないように全体のバランスに気を配ろう。ここでは、背景パターンにレトロな印象を与える配色を施して全体を仕上げた。なお、ブレンドツールを使用する際、ブレンドした線の線幅が太すぎると、文字の可読性を損なうことがある。前面にレイアウトする文字やグラフィックなどの要素を考えて、線幅を決めるようにしよう。
| 基本アイテムのつくり方 |
パターンを円形のオブジェクトと組み合わせてアクセントに
波形のライン上に円形のオブジェクトを加え、メニューボタンとして利用したデザイン。オブジェクトの配置をランダムにして画面に動きを出すことで、遊び心のある個性的なインターフェイスに仕上げている。なお、Webデザインの場合は、カラーモードをRGBとして作業することが多いため、元のデータが［描画モード：オーバーレイ］になっていると背景色が沈んで見えることがある。その場合は、［描画モード：ソフトライト］に変更するとよい。
長方形をランダムに重ねて［描画モード］を変更
まず、長方形ツールでベースとなる長方形を作成し、［C：45、M：75、Y：85、K：70］で着色する。次に、最初につくった長方形の上に塗りを白、線を黒とした縦長の長方形をランダムに配置 1-1 。これらの長方形に暖色系の色で着色したら、着色した長方形をすべて選択し、［描画モード：オーバーレイ］と設定する 1-2 。
1-1
1-2
“ジグザグ...”で長方形を変形させる
続いて、いちばん左に配置した長方形を選択し、フィルタメニュー→“パスの変形”→“ジグザグ...”を、 2-1 のような設定で実行し、長方形を波形に変形させる。同様にしてほかの長方形も“ジグザグ...”で波形に加工していく 2-2 。ここでは、［折り返し］の数値はすべて奇数にして、波形が左右対称になるようにした。
2-1
2-2
ブレンドツールでパスをブレンドして仕上げる
最背面にある長方形をコピーしたら前面にペーストし、最前面に移動。ここですべてを選択して、クリッピングマスクを適用する。次に、長方形の左辺をダイレクト選択ツールでクリックしたら、コピーして前面にペーストし、［線幅：0.3pt］、線色を工程1で最初に作成した長方形と同じ色にする。右辺にも同様の工程を行う。続いて、ブレンドツールで左辺の上端のアンカーポイントをクリックしたあと、右辺の上端のアンカーポイントをクリック 3-1 。最後に、ツールボックスのブレンドツールをダブルクリックして、［間隔：ステップ数：50］に設定すれば完成だ 3-2 。
3-1
3-2
