Lesson 08 光沢のあるポップなイメージのアイコン - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

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

Lesson 8

光沢のあるポップな イメージのアイコン

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

スマートフォンなどで使用されるような光沢がありカラフルでPOPなアイコンは、絵となるデザインオブジェクトをIllustrator、ボタンの効果をPhotoshopと分けて制作するとよい。

Photoshopで[解像度：72dpi][カラーモード：RGB]の新規ファイルを作成する。ここではサイズを500×500ピクセルとした。アイコンのベースとなる角丸長方形を描画するが、このような幾何学的なパーツはIllustratorのほうが手軽に描画できる。Illustrator上で[ツール]から[角丸長方形ツール]を選び、[幅：300px][高さ：300 px][角丸の半径：40px]の角丸長方形を描画する。このパスをコピーし、Photoshopのファイルに[ペースト形式：パス]でペーストする【1-1】。ペーストしたパスは、パスパレットで「作業用パス」となっているので、名前を変えて保存しておく。パスが選択された状態でレイヤーメニュー→"新規塗りつぶしレイヤー"→" べた塗り..." を実行して、適当な色を設定する【1-2】。


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


【1-2】#003894で塗りつぶした例

べた塗りレイヤーにレイヤーメニュー→" レイヤースタイル" → " レイヤー効果..."を設定する。「ドロップシャドウ」を【2-1】 、「光彩（内側）」を【2-2】、「グラデーションオーバーレイ」を【2-3】【2-4】の設定にする【2-5】。 


【2-1】「シャドウのカラー」は黒


【2-2】「光彩のカラー」は黒


【2-3】グラデーションは【2-4】を参考に設定


【2-4】 【a】［不透明度：100%］、［位置：0%］【b】［不透明度：0%］［位置：100%］ 【c】 ［カラー：白］、［位置：0%］ 【d】 ［カラー：白］、［位置：100%］


【2-5】

【01】で登録したパスを選択した状態で、再度べた塗りレイヤーを新規作成し、カラーを白 に設定する。[楕円形選択ツール]で【3-1】のように円弧のサイズと位置を調整して選択範囲を作成し、そのままレイヤーマスクを作成すると【3-2】のようになる。


【3-1】


【3-2】

このレイヤーに「グラデーションオーバーレイ」のレイヤー効果を【4-1】【4-2】の設定で追加し、レイヤーパレットで[塗り：30%]に設定する【4-3】。


【4-1】グラデーションは【4-2】を参考に設定


【4-2】【a】［不透明度：100%］、［位置：0%］【b】［不透明度：0%］［位置：30%］ 【c】 ［カラー：白］、［位置：0%］ 【d】 ［カラー：白］、［位置：30%］


【4-3】

Illustratorで用意した電話のイラストをコピーし、【01】の要領でパスとしてペース ト。パスが選択された状態でべた塗りレイヤーを作成し、カラーを白にして、「光彩（外側）」のレイヤー効果を【5-1】の設定で追加する【5-2】。これでアイコンが1つ完成だ。背景レイヤーを削除するか非表示にし、ファイルメニュー→"Webおよびデバイス用に保存..."で[PNG-24]形式で保存しよう。


【5-1】「光彩のカラー」は黒


【5-2】各レイヤー効果のプロパティ（特にぼかし具合）は、好みの仕上がりになるように調整しよう

完成したアイコンをベースに違うアイコンも作っていこう。まず、一番上のレイヤーの「ベクトルマスクサムネール」をクリックしてアクティブにし、[パスコンポーネント選択ツール]でパスを選択して、deleteキーで削除する。【6-1】のダイアログが表示されるので、「ベクトルマスクの内容のみ」で実行。ベクトルマスクが アクティブな状態で、Illustratorからデザインパーツをパス形式でペーストすると、光彩（外側）のレイヤー効果が再現される【6-2】。【01】で作成したべた塗りレイヤーのカラー設定を変更すればアイコンの色も変えられる【6-3】。


【6-1】


【6-2】


【6-3】#FE7C08 で塗りつぶし直した例

円形のアイコンにする場合は【03】の『白のべた塗りレイヤーを作成』まで同じ作業を進める。【06】の要領で、白い円のパスを選択し、編集メニュー→"パスを自由変形" で【7-1】 のような楕円に変形して配置する。このレイヤーに、【4-1】 のレイヤー効果を設定する【7-2】。あとはイラストをペーストして【05】の要領でレイヤー効果を設定して色をつければよい。「光彩（外側）」の設定は、べた塗りレイヤーのカラーにあわせて、効果を強調するために【7-3】のように変更した【7-4】。


【7-1】


【7-2】
【7-1】【7-2】各レイヤー効果は、「スタイル」として登録しておくと、別の形にした時などに簡単に同じ設定を適用


【7-3】「構造の不透明度」と「エレメントのサイズ値」を上げた。このように色によって調整レイヤーの値を微調整していこう


【7-4】イラストは、絵文字フォントやフリーの素材集を活用するのも手だ