Webデザイン |
Lesson 9 | 繊細な手作り感のある パーツのデザイン |
制作・文 | 高村香奈子(株式会社アークフィリア) | |||
> | To Use | CSS | ||
> | Browser | IE 8over | Firefox 5over | Safari 4over |
雑貨などかわいいものが好きな女の子向けのテキストコンテンツを想定し、写真やスキャンデータ、イラストを使用した繊細な手作り風のデザインパーツをつくっていく。 |
01
【1-1】両方ともスモーキーな色合いにした
02
【2-1】レースペーパーは製菓店やラッピング用品売り場で購入できる
【2-2】隙間のひとつひとつがきちんと抜かれているかチェックしよう
【2-3】アナログ感のあるラフなアウトラインが出てきた
03
【3-1】フィルタの組み合わせは色々と試してみよう
【3-2】Photoshop CS5にはあらかじめブラシプリセットが登録されているので利用したい。「素材ブラシ」「ドライメディアブラシ」などアナログの質感があるブラシが登録されている
【3-3】右上の花には手描きの葉っぱのイラストを組み合わせた
04
【4-1】紙のタグにカテゴリーが書かれているデザインにしたい
【4-2】上:彩色前/下:彩色後線画から少しはみ出すように、ラフに彩色するのがポイント
05
【5-1】古い紙をスキャンしたり、紙の折れ部分に対してコントラストを出して素材をつくる
【5-2】
06
【6-1】
07
【7-1】
【7-2】ページのタイトルを画像にする場 合はCSSで指定する
【7-3】
【7-4】レースペーパーの隙間からもテキストが見える。透過しているので、ウィンドウサイズによってはメニューとフッターが重なる