【Illustrator】分割とグラデーションで作る星アイコンのメイキング

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator（イラストレーター）の分割とグラデーションで作る星アイコンのメイキングをイラレ初心者の方に詳しく解説します。

対象オブジェクトを特定の部位で分割し、各パーツにグラデーションを適用して複雑な塗りを再現できます。ゲームUIでこの手の質感のアイコンを見かけますが、簡単に自作できます。
これからIllustratorを始められる方、更にイラレを学習されたい方にオススメのコンテンツですよ。

この記事の目次

何が作れるの？

Illustratorの分割とグラデーションを使って左図の様な星形アイコンをゼロから作る事ができます。作り方は簡単なのでイラレ初心者の方でも再現可能ですよ。

分割とグラデーションで質感付与

それではIllustratorで質感のある星形アイコンを作成していきましょう。
イラレを使ったクリエイティブ全般に応用できるテクニックが身に付きますよ。

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はAdobe公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

星オブジェクトを作成

[ スターツール ] でお好みの星形オブジェクトを作成します。

[ グラデーション ] で塗りを設定します。
カラー①：#eeaa3d
カラー②：#f8df2d

線：無し

STEP.2

新規レイヤーを作成

レイヤーパネルを開き、新規レイヤーを作成します。
※レイヤーパネルは [ F7 ] で表示・非表示が可。

星オブジェクトの選択は解除、空っぽの新規レイヤーをアクティブにしておきましょう。

STEP.3

分割線を描く

[ ペンツール ] で星の頂点、中心のアンカーポイントに合わせて分割用の直線を描きます。[ ポイントにスナップ ] を有効化しておくとピッタリとアンカーポイント上に追加できます。

分割線は分かりやすく色を変えておきましょう。
塗り：無し
線：お好みで

動画のイメージです。元の星形アイコンは選択されていない状態、そして空の新規レイヤー内で星のアンカーポイント上をクリックすると星アイコンに影響せず新たな線が描けます。

STEP.4

分割する

[ 選択ツール ] で星アイコンと分割線を選択。[ パスファイダー ] → [ 分割 ] を実行しましょう。

[ ダイレクト選択ツール ] で分割した個所を動かすといい感じで分割できている事が確認できます。[ Ctrl + Z ] (Mac：⌘ + Z) で移動させる前に戻ってください。

同時に新規レイヤー側にオブジェクトが移動しているのが確認できます。

STEP.5

2つ目の分割線を作成

分割を適用するとレイヤー内でオブジェクトの移動が行われます。選択ツールで星アイコンを選択後、レイヤーの右にある小さな点をドラッグ＆ドロップして下部のレイヤーに移動させ、選択を解除。

空の上部のレイヤーをアクティブにしておきましょう。

再び [ ペンツール ] で分割線を描きます。

STEP.6

次々と分割する

分割線と星アイコンを選択し、[ 分割 ] しましょう。それを左図のエリアで複数回繰り返します。

※一気に分割線を描くよりも分割線を1つ作成したら星を分割、また分割線を1つ描いてから分割…の方がミスが起きません。

最終的にこんな感じでバラバラの細長い三角形オブジェクトの集合体に出来たらOKです。（分かりやすくする為にオブジェクト同士を離していますが、話す必要はありません。）

[ Ctrl + Shift + G ] (Mac：⌘ + Shift + G) でグループ解除しておきましょう。

FINISH

完成

最後に分割した各パーツにグラデーションを設定しましょう。グラデーションの角度は各パーツで変えています。

単なる1つのグラデーションだけでなく、分割したオブジェクトにグラデーションを適用する事で複雑な表現ができます。
[ ライブコーナーウィジェット ] で角丸にした星形アイコンを分割したり、星形アイコンに土台を追加したりするとまた違った表現ができますよ。

高品質なゲームUI素材

ゲームUI制作を加速させるワンランク上の素材を厳選して紹介します。
全て商用利用可能！
手間のかかるゲームUI制作の手間と劇的に軽減できます。

全48点の厳選ゲームUI素材はコチラで紹介しておりますので、是非ご覧ください！
（※背景素材はコチラ）

#01 Illustration of the fairy forest at night with flashlights and e

妖精の森がテーマのUIテンプレートです。
ウィンドウ、ボタン、アイコン、ゲージなど、UI制作でよく使う素材は一通り含まれているので初心者の方にもオススメ！

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

#02 User interface the playing field for a computer game

タイトルロゴだけ追加したらグラフィックの仕事は終わり！みたいなUIテンプレート一式です。
そのままパズルゲームとして使えるレベルですね。

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

#03 Radar screen. Vector illustration for your design. Technology background. Futuristic user interface. HUD.

SF系で使う素材が一通り収録されたUIキットです。
一部に赤っぽい色味を加えるだけで全く違った印象の絵になりそうですね。

ダウンロード

#04 Sci-fi Game GUI Pack

カジュアルなSF系ゲームに適したUIテンプレートです。
ウィンドウ、アイコン、ボタン、ゲージ等、よく使う素材は網羅されているので使い勝手が抜群！

ダウンロード
※この作者のその他ゲームUI素材はコチラ。

#05 background and buttons for mobile game development, ui design kit

そのままパズルゲームの素材として使えそうなUIキットです。
追加するのはカットイン用のキャラくらいですね。

ダウンロード

#06 Sunset in fantasy forest

非常にハイクオリティな森のが描かれた背景素材です。RPGによくあるはじまりの森にピッタリなイメージですね。

ダウンロードする
昼間はコチラ

#07 Fantasy art landscape with giant statue - digital illustration

ロードオブザリングに登場しそうなスケール感のある背景イラスト素材です。
フィールドマップの遠景にうっすらと見える巨像にようやく近づけた時の感じがあります。

ダウンロードする

#08 knight fighting dragon

ドラゴンと剣士が戦っているイメージのイラスト素材です。
非常にハイクオリティです。

ダウンロードする

#09 Fantasy Traditional Japanese House - Day

和風の伝統的な日本家屋の背景イラスト素材です。
和風、和風ファンタジーには必須素材ですね。

ダウンロードする
夜はコチラ

#10 Fantasy natural environment

幻想的なファンタジー世界の自然環境を描いた背景素材です。手前にキャラの立ち絵を置いてセリフを配置するといい感じのゲーム画面が作れます。

ダウンロードする

ゲームUI制作を300%加速させるテンプレート

下記でゲームUI制作を劇的に加速させるテンプレートや背景素材を紹介しています。
全て商用利用が可能、高品質な素材でゲーム制作を効率化させましょう！

【商用可】ゲームUIで使える高品質なテンプレート素材48選【AI形式】

【商用利用可能】ゲームやイラストの背景素材85選【高品質】

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！

AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能！
様々なフライヤーのテンプレート50選

デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

ロゴ作成とIllustratorの相性は抜群！
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選

単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選

継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK！作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Illustrator（イラストレーター）の分割とグラデーションを使って星型アイコンに質感付与を行う方法についてでした。この手の質感はゲームUIのアイコン等でよく使われています。

アイコン素材をイラレで作成し、Photoshopにスマートオブジェクトでペーストしてレイアウトするなど。ゲームUI制作の基本テクニックとして使えるので覚えておくと便利ですよ！

Illsutratorを使ってワンランク上の質感付与を行う際に是非お試しください。

ではまた！

InDesignは活用されていますか？

Illustratorだけでなく、InDesign（インデザイン）も活用されているでしょうか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート42選はコチラ！

Illustratorの操作方法

イラレ基本操作