Lesson 01 ドット柄の抽象的なメインビジュアル - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

2011.9.22 THU

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

Lesson 1

ドット柄の抽象的な
メインビジュアル

	制作・文	奥山寿史（ユルユラデザイン.）
＞	To Use	Photoshop \| Illustrator
＞	Browser	IE \| Firefox \| Safari

制作を効率的に行う上で覚えておきたいセレクタの1つが、CSS3で定義された:nth-child()疑似クラスだ。これを使いこなすことで、リストをゼブラ模様にすることも簡単になり、煩雑なclass付けも必要なくなる。

時間と予算がなくイメージ画像などを用意できない場合、ここで紹介する手法で手軽に抽象的なイメージを作り、少しの加工でメインビジュアルに仕上げることができる。元絵の工夫でいくつものパターン出しが可能だ。

01

今回作成するメインビジュアルのサイズを900×400 ピクセルとする。まずPhotoshopで1/100となる9×4ピクセルの新規ファイルを作成する【1-1】。

【1-1】解像度は72dpi、カラーモードはRGBを選択

02

[ツール]から[鉛筆ツール]を選択し、[マスター直径：1px]、[硬さ：100%]、[モード：通常]、[不透明度：100%]に設定する【2-1】【2-2】。

【2-1】

【2-2】

03

仕上がりをイメージして、色を配置していく【3-1】。今回は赤系と緑系の補色を使用して、クールで、かつ目立つビジュアルに仕上げてみる。隣り合う色がすべて違いすぎると模様らしく見えないので、ある程度のかたまりで同系色を配置していくのがポイントだ。

【3-1】[鉛筆ツール]は四角くなり、1ブロック毎にクリックして色を置いていくイメージ。最大拡大倍率の3200%で表示して作業しよう

04

イメージメニュー→"画像解像度..."で、[ピクセル数]を[幅：900／高さ：400pixel]にし【4-1】、[画像の再サンプル]を[バイキュービック法 - 滑らか（拡大に最適）]に設定する【4-2】。モザイク状だった画像が、グラデーションが混ざり合うぼやけたイメージになった【4-3】。レイヤーメニュー→"新規調整レイヤー"→"色相・彩度..." で、色相・彩度の調整レイヤーを作成し、[色相]のスライダを調整すると、イメージの印象が変わる【4-4】。ここで数値は[色相：-150]に設定している【4-5】

【4-1】

【4-2】ピクセル数を変更する際は[縦横比を固定]にチェックを入れておくと【4-2】、サイズの数値がリンクして幅の数値を入力したときに自動で高さが適切な数値になる

【4-3】

【4-4】

【4-5】[彩度][明度]を調整したり、サイトのイメージによっては[色相の統一]にチェックを入れて、色相で均一化してみてもおもしろい

05

Photoshopで作成したイメージ画像を、Illustratorで配置する。[ツール]から[長方形ツール]を選択し、900×400ピクセルの黒い長方形を描画する。長方形のオブジェクトとイメージ画像をそれぞれ複製し、上から交互に重ねて同じ座標に合わせる。作業しやすいようにレイヤーを分けておくとよい【5-1】。「オブジェクト（上）」を選択した状態で、オブジェクトメニュー→ " パス" → " 段組設定..." を選択【5-2】。[行]を[段数：44 ／間隔：1]、[列]を[段数：99 ／間隔：1]に設定する。[行]の[高さ]、[列]の[幅]は自動で変わる数値でよいが、できるだけ近い数値になるように段数などを調整する【5-3】。

【5-1】分かりやすく（上）（下）とレイヤー名を設定しておく

【5-2】

【5-3】[高さ]と[幅]がぴったり同じ数値になることは難しいので、できるだけ近い数値になるよう調整する

06

格子状になった「オブジェクト（上）」を選択したままフィルタメニュー→"スタイライズ" →"角を丸くする..." を選択、[半径：10px]に設定する【6-1】。さらにオブジェクトメニュー→" 複合パス" →"作成"を実行しておく【6-2】。「オブジェクト（上）」と「イメージ画像（上）」を選択し、オブジェクトメニュー→"クリッピングマスク" → " 作成" を選択【6-3】すると、「イメージ画像（上）」が丸いドットでマスクされる【6-4】。