Illustratorのアピアランスで「変更に強い」ロングシャドウアイコンを作る(サンプルデータ ダウンロードあり)

  • 公開:
  • 更新:
  • 制作/編集:
Illustratorのアピアランスで「変更に強い」ロングシャドウアイコンを作る(サンプルデータ ダウンロードあり)

概要

ウェブのデザインでアイコンの影が斜めに長くついたものをロングシャドウアイコンと言いますが、このロングシャドウアイコンの作り方は様々なものがあります。

今回は、Illustratorのアピアランスを使うことで「変更や修正がしやすい」ロングシャドウアイコンの作り方を解説します。

吉田印刷所メールマガジン ご登録はこちら

アピアランスでロングシャドウを作るための手順

まずアイコンにしたいオブジェクトを配置します。今回はFont Awesomeに収録されている「いいね!」的なアイコン文字を使用します。

Illustratorのアピアランスでロングシャドウアイコンを作る


アピアランスの準備をする

以下のようなイメージで塗りや線を追加します。

Illustratorのアピアランスでロングシャドウアイコンを作る


ロングシャドウを作る

ブラシパネルのメニューから「新規ブラシ」を選択します。

Illustratorのアピアランスでロングシャドウアイコンを作る


ブラシの種類は「カリグラフィブラシ」を選択します。

Illustratorのアピアランスでロングシャドウアイコンを作る


カリグラフィブラシオプションは以下のように設定します。

  • 角度:135°
  • 真円率:0%
  • 直径:100pt(ベースのアイコンのサイズに合わせて調整してください/ここではベースのアイコンのサイズの約1.5倍にしています)

Illustratorのアピアランスでロングシャドウアイコンを作る


アピアランスの線に先程作成したカリグラフィブラシを適用すると、以下のようになります。

これがロングシャドウになります。

Illustratorのアピアランスでロングシャドウアイコンを作る


ロングシャドウの位置がずれているので、アピアランスでカリグラフィブラシを適用した「線」にフィルターで「パスの変形」→「変形」を適用します。

Illustratorのアピアランスでロングシャドウアイコンを作る


プレビューを見ながら「移動」の数値を調整します。

Illustratorのアピアランスでロングシャドウアイコンを作る

Illustratorのアピアランスでロングシャドウアイコンを作る


同じ線にフィルターで「パスファインダー」→「追加」を適用します。

Illustratorのアピアランスでロングシャドウアイコンを作る

Illustratorのアピアランスでロングシャドウアイコンを作る

※以下のスクリーンショットにはアピアランスの「追加」が含まれていませんが、あるものとして考えてください。


のカラーを作る

のカラーの「塗り」を選択して、フィルターから「形状に変形」→「長方形」を適用します。

Illustratorのアピアランスでロングシャドウアイコンを作る


形状オプションでは「値を指定」にして幅と高さを指定します。(ベースのアイコンのサイズに合わせて調整してください/ここではベースのアイコンのサイズの2倍にしています)

Illustratorのアピアランスでロングシャドウアイコンを作る

Illustratorのアピアランスでロングシャドウアイコンを作る


切り抜く

今回は丸く切り抜く前提で説明します。



アピアランスの一番上にある透明な塗りを選択します。

Illustratorのアピアランスでロングシャドウアイコンを作る


フィルターから「パスファインダー」→「切り抜き」を選択します。

Illustratorのアピアランスでロングシャドウアイコンを作る


切り抜き」をドラッグして一番下にします。

Illustratorのアピアランスでロングシャドウアイコンを作る


塗りのフィルターから「形状に変形」→「楕円形」を適用します。

Illustratorのアピアランスでロングシャドウアイコンを作る


形状オプションでは「値を指定」にして幅と高さを指定します。(ベースのアイコンのサイズに合わせて調整してください/ここではベースのアイコンのサイズの1.5倍にしています)

Illustratorのアピアランスでロングシャドウアイコンを作る

Illustratorのアピアランスでロングシャドウアイコンを作る



丸形に切り抜かれました。

Illustratorのアピアランスでロングシャドウアイコンを作る


アイコンのカラーを変更する

アイコンの塗りのカラーを白に変更して完成です。

Illustratorのアピアランスでロングシャドウアイコンを作る


グラフィックスタイルに保存しておくと、他のアイコンを作る時に便利です。

Illustrator でのグラフィックスタイルの操作

切り抜く形を変更する場合は

切り抜く形を変更するには、透明な塗りの形状を変形します。

アピアランスで変形できるものであれば、どんな形でも切り抜けます。

Illustratorのアピアランスでロングシャドウアイコンを作る


サンプルデータのダウンロード

今回のIllustratorデータのダウンロードはこちら。Illustrator CC形式です。

アピアランスでロングシャドウを作る


参考

ロングシャドウ(ロングドロップシャドウ)の方法は樋口泰行さん(@higuchidesign)のツイートを参考にいたしました。

掲載の許可をいただきありがとうございました。

関連情報・参考資料

このページをシェア

カテゴリ

Illustrator Illustrator CC Illustrator CS3 Illustrator CS4 Illustrator CS5 Illustrator CS6

吉田印刷所メールマガジン登録はこちら

吉田印刷所の新しい情報やDTP情報などをメールにて無料でお送りします。メールアドレスだけで簡単に登録できます。(会社名・お名前は任意)

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