Lesson 09 繊細な手作り感のあるパーツのデザイン - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

2011.9.22 THU

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

Lesson 9

繊細な手作り感のある
パーツのデザイン

	制作・文	高村香奈子（株式会社アークフィリア）
＞	To Use	CSS
＞	Browser	IE 8over \| Firefox 5over \| Safari 4over

雑貨などかわいいものが好きな女の子向けのテキストコンテンツを想定し、写真やスキャンデータ、イラストを使用した繊細な手作り風のデザインパーツをつくっていく。

01

手でちぎったクラフト紙をスキャンする。重なりを表現するため、背景を透明にしたいので、マスクをかける。紙のエッジはブラシツールで細かく消していく。Photoshopで色調補正し、色みを2パターンつくっておく【1-1】。

【1-1】パスのみ使用するので、「パス」を選択

【1-1】両方ともスモーキーな色合いにした

02

レースペーパーをスキャンする【2-1】。穴の空いた部分を色域指定で選択し、背景を透明に抜く【2-2】。白いレースペーパーの場合は、背面に黒い紙などを敷いてスキャンすると、色域指定がしやすい。スキャンしたままでは質感がリアルすぎるので、コントラストを調節して細かな影を飛ばし、レースペーパーのエッジが少し濃く出るくらいにする。真っ白だと背景に溶け込みすぎてしまうので、色調補正でベージュの色合いに調節する【2-3】。

【2-1】レースペーパーは製菓店やラッピング用品売り場で購入できる

【2-2】隙間のひとつひとつがきちんと抜かれているかチェックしよう

【2-3】アナログ感のあるラフなアウトラインが出てきた

03

花の写真を撮影し、パーツとして使用できそうな部分をトリミングする【3-1】。マスクをかけて切り抜き、「ドライブラシ」や「塗料」などのフィルタを利用して、マットな質感にする。また、ドライ系のブラシで花びらが重なった部分をなぞったり、ランダムにぽんぽんと押すように描画し、手描きのイラストのようなアナログ感を出す【3-2】。今回は3種類の花のパーツを作成した【3-3】。

【3-1】フィルタの組み合わせは色々と試してみよう

【3-2】Photoshop CS5にはあらかじめブラシプリセットが登録されているので利用したい。「素材ブラシ」「ドライメディアブラシ」などアナログの質感があるブラシが登録されている

【3-3】右上の花には手描きの葉っぱのイラストを組み合わせた

04

メニューのタグ部分をつくる【4-1】。タグが掛かっている枝の部分は手描きのイラストをスキャンし、Photoshopで色を付ける【4-2】。タグの部分は、長方形と丸を組み合わせてつくり、紙の質感を表現するテクスチャを[描画モード：乗算]で合成する。タグのエッジが直線的すぎると不自然なので、ブラシで少しデコボコした質感をつけて紙らしい雰囲気を出そう。

【4-1】紙のタグにカテゴリーが書かれているデザインにしたい

【4-2】上：彩色前／下：彩色後線画から少しはみ出すように、ラフに彩色するのがポイント

05

作ったパーツや手描きのイラストを組み合わせて画面のデザインをつくっていく。全体の背景に古い紙の折れ目や日焼けなどの質感を与えると、よりアナログ感が増す【5-1】。コラージュをするような感覚で、密度のメリハリを意識しながらパーツを配置する【5-2】。

【5-1】古い紙をスキャンしたり、紙の折れ部分に対してコントラストを出して素材をつくる

【5-2】

06

【5-2】のようにデザインを全面に出し、テキストはヘッダーとフッターの紙に挟まれてスクロールするようにしたい。重なり感のあるデザインのため、透過パーツはすべてPNG32で、ヘッダー、フッター、メニュー、全体の背景をそれぞれ書き出す。HTMLは、ヘッダーとフッターにテキストエリアとメニューを挟むかたちで記述する【6-1】。

【6-1】

07

CSSを記述する。テキストエリアがレイヤーの一番下の階層、ヘッダーとフッターが中間の階層、メニューが一番上の階層になるように、positionで指定していく。ヘッダーとフッターにそれぞれ書き出した画像を指定し、position:fix;で位置を指定する【7-1】。テキストは画面の中央にくるように、余白などを調整する【7-2】。メニューは一番上の階層にし、タグの背景画像を指定する。最後にタグに乗るカテゴリーの文字のスタイルを指定する【7-3】。これでパーツの繊細な重なりが表現されたデザインの完成だ【7-4】。