6

【Illustrator】光彩(内側)の機能を使って、立体的なアイコンを作ってみよう!


光彩(内側)を使って簡単に立体感を出すことが出来るのをご存知ですか?
オブジェクトの輪郭から内側にかけて、もしくは反対にシャドウをつけることのできる効果です。
活用の仕方は色々ありますが、手順は簡単なので是非やってみてくださいね。
今回はiphoneサイズの簡単なアイコンで作り方を見ていきましょう。
まずはベースになるアイコンを作っていきます。
今回は立体感が分かりやすいように、四角っぽいアイコンを作っていきます。

 

アイコンの作り方

1

【長方形ツール】で【縦横:114px】の正方形を作ります。
2

好きな色を設定してください。

3

四角の角に丸みをつけます。
【効果】→【スタライズ】→【角を丸くする】で【半径:20px】を設定すると上のような形になります。
半径の値を大きくすると角がより大きめに丸くなります。好みで調節してくださいね。

4-1

【グラデーション】パネルを使ってグラデーションをかけていきます。

4-4
最初に設定した色を左側のグラデーションスライダーに
最初に設定したよりも少し暗い色を右側のグラデーションスライダーに設定します。
【角度:-90°】に設定すると上に明るい色、下に暗い色がくるように
グラデーションをかけることができます。

5-1-L

【効果】→【スタイライズ】→【光彩(内側)】を選択します。
【光彩(内側)】パネルで
【不透明度:25%】、【ぼかし:15px】を境界線にかけます。
プレビューにチェックを入れて好みに調節します。色は黒を選択します。

 

51不透明度とぼかしの値を色々変えてみると、大分印象が違ってきます。
簡単にまとめてみたので参考にして見てくださいね。

6

【アピアランス】パネルで先ほど光彩(内側)をつけた塗りの部分を選択してコピーします。
選択する場所は【光彩(内側)】の部分ではなく、塗りの部分を選択してくださいね。
コピーした塗りから【光彩(内側)】の効果だけ消して、色の設定のみを残します。

7-1

【グラデーション】パネルを開いて右側のグラデーションスライダーを選択します。
グラデーションスライダーを選択した状態で【不透明度:0%】に設定します。
左のスライダーは【不透明度:100%】、右のスライダーは【不透明度:0%】になっているので、
最初に設定した【塗り】に設定されている【光彩(内側)】が
下の方だけ透けて見えている状態になります。

11

アイコンの中に簡単な文字を置いてみましょう。
今回は適当にテキストをおいてあります。

11-2
色を設定します。白い文字に効果をつけたようにしたいので白に近い灰色にします。

9-L

テキストを選択して【効果】→【スタイライズ】→【光彩(内側)】を開きます。
【描画モード:通常】【不透明度:100%】【ぼかし:2px】色は白です。

10-L

【効果】→【パスの変形】→【変形】ダイヤログボックスを開きます。
【移動(垂直方向):2px】【パターンの変形】のみにチェックを入れると
テキストの上の部分が白く、下部分が白に近い灰色になり立体感がでます。

14-L

白だとわかりにくいので、【光彩(内側)】の効果に使う色を黒にしてみました。
光彩(内側)の効果をかけたあとの状態と、パスの変形をした状態です。

L

【効果】→【スライライズ】→【ドロップシャドウ】で
【不透明度:40%】、【Y軸オフセット:3px】【ぼかし:2px】に設定すると
シンボルが浮き上がったように見えます。

いかがでしたか?

基本的な作り方をご紹介しました。
文字やイラスト、色々なオブジェクトでも作ることが出来ますのでぜひ試してみてくださいね。
【光彩(内側)】の効果は【光彩(外側)】の効果と合わせてネオンっぽい文字をつくったり、
へこんだような効果を追加したりすることもできます。
設定値を変えるだけでも印象の違うアイコンを作ることが出来ますよ。
是非試して見てくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


趣味はDIYやハンドメイド。興味引かれたものは分野を問わずチャレンジしています。

Next Article【LINE】Illustratorでクリエイタースタンプを作る手順