Lesson 08 光沢のあるポップなイメージのアイコン - Webデザイン表現&技法の新・スタンダード・デザインパーツ編 | デザインってオモシロイ -MdN Design Interactive-

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

2019.6.25 TUE

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


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

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


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


01

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

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

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

02

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

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

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

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

【2-4】 【a】[不透明度:100%]、[位置:0%]【b】[不透明度:0%][位置:100%] 【c】 [カラー:白]、[位置:0%] 【d】 [カラー:白]、[位置:100%]
【2-4】 【a】[不透明度:100%]、[位置:0%]【b】[不透明度:0%][位置:100%] 【c】 [カラー:白]、[位置:0%] 【d】 [カラー:白]、[位置:100%]

【2-5】
【2-5】

03

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

【3-1】
【3-1】

【3-2】
【3-2】

04

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

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

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

【4-3】
【4-3】

05

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

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

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

06

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

【6-1】
【6-1】

【6-2】
【6-2】

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

07

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

【7-1】
【7-1】

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

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

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


twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

6.17-6.23

MdN BOOKS|デザインの本

Pick upコンテンツ

現在