IlustFreeTrial―イラストのフリー素材&ソフト試行方法

トップ 描き方 ボタン

ボタン素材の作り方
~Illustrator(イラストレーター)を使用したボタンのイラスト素材の作り方~

Illustrator(イラストレーター)を使用したボタンのイラスト素材の作り方を紹介しています。このページで掲載しているボタン素材はフリーでホームページなどにご利用いただけます。

▲記事トップへ

目次

この記事の目次です。

1. ボタンとは
2. 「ボタンのイラスト」のフリー(無料)素材
3. Illustrator(イラストレーター)を使用したボタンのイラスト素材の作り方
イラストレーターを使用した丸いボタンの作り方
イラストレーターを使用した四角いボタンの作り方

更新履歴

1. ボダンとは何か

ボタンは、ポルトガル語の「botão」に由来する言葉で、洋服などに用いられる留め具や押すことによって動作するスイッチ、今ぴゅたーの画面上で押しボタンのように動作するUIなどのことを言います。

洋服のボタン素材の種類

基本となる洋服のボタン素材の種類としては、現在はプラスチックが主流ですが、ブラスやメッキを活用した金属製、七宝、貝、水牛の角、ヤシ、木、皮などがあります。

2. 「ボタンのイラスト」のフリー(無料)素材

ボタンのイラストのフリー(無料)素材です。 ホームページのボタンは画像を指定することもできます。 ボタンの画像素材としてフリー(無料)でご利用いただけます。

ボタンの素材一覧です。フリーですのでご自由にご利用いただけます。画像をクリックすると大きな画像が見れます。

ボタンその1―中央が浮き出た丸いボタン ボタンその2―中央が沈んでいるボタン ボタンその3―赤色の四角いボタン ボタンその3―青色の四角いボタン

ボタンをテーマにしたイラスト

ボタンをテーマにしたイラストです。

詳細

指定例

たとえば、aタグのリンクのテキストを画像に置き換える例です。

<a href="リンクURL" ><img src="画像URL"></a>

3. Illustrator(イラストレーター)を使用したボタンのイラスト素材の作り方

Illustrator(イラストレーター)を使用したボタンのイラスト素材の作り方を解説していきます。

イラストレーターを使用した丸いボタンの作り方

イラストレータを使用して描画する丸いボタンの作り方です。

丸いボタンの完成イメージ

新規画像作成

100px:100pxで新規画像を作成します。

丸いボタンの描画方法1―新規画像を作成(設定)
丸いボタンの描画方法2―新規画像を表示

楕円形ツールへ切り替え

長方形ツールのところを長押しして楕円形ツールに切り替えます。

丸いボタンの描画方法3―楕円形ツールに切り替え
ツールバー>楕円形ツール

イラストレーターの楕円形ツールは、正円や楕円のオブジェクトを描くツールです。

詳細

楕円形ダイアログの設定

画面を選択して、楕円形ダイアログを表示し設定します。

例 幅:100px 高さ:100px

丸いボタンの描画方法4―楕円形ダイアログを表示し設定
丸いボタンの描画方法5―○オブジェクト作成

線を0ptにする

丸を中央によせて、線を0ptにします。

シンプルな丸いボタンの描画方法6―丸を中央に
シンプルな丸いボタンの描画方法7―線を0ptに
シンプルな丸いボタンの描画方法8―線を0ptにした後

グラデーションを設定

円対してグラデーションを設定します。

シンプルな丸いボタンの描画方法9―円対してグラデーションを設定

ボタンの形を作る

丸オブジェクトをコピーアンドペーーストでもう一つ作成し、全面の丸オブジェクトを変形→拡大・縮小で小さくします。

シンプルな丸いボタンの描画方法10―丸オブジェクトをコピーアンドペーースト
シンプルな丸いボタンの描画方法11―変形→拡大・縮小
シンプルな丸いボタンの描画方法12―全面の丸オブジェクトを小さく
シンプルな丸いボタンの描画方法13―全面の丸オブジェクトを小さくした後

調整して完成

後は、適当に切り抜いて大きさを調整すれば完成です。

丸いボタンの描画方法14―適当に切り抜いて大きさを調整

イラストレーターを使用した四角いボタンの作り方

イラストレーターを使用して描画する四角いボタンの描画例を紹介しています。

四角いボタンの完成イメージ

100px:100pxで新規画像を作成します。

四角いボタンの描画方法1―新規画像を作成(設定)
四角いボタンの描画方法2―新規画像を表示

長方形ツールに切り替えて、枠線0ptで50pt×50ptの正方形を作成します。

四角いボタンの描画方法3―長方形ツール選択
四角いボタンの描画方法4―長方形設定
四角いボタンの描画方法5―正方形表示

正方形をコピー&ペーストして、4つ作成し、大きな正方形になるように並べます。

シンプルな四角いボタンの描画方法6―正方形をコピー&ペーストして、4つ作成

左上:一番薄い、左下:二番目に薄い、右下:一番濃い、右上:二番目に濃い 色をつけます。

シンプルな四角いボタンの描画方法7―色つけ

すべてのオブジェクトを選択し、変形→回転で-45度回転し、 ダイレクト選択ツールを使用して4つの正方形を三角形にして、4色の小さい正方形にします。

シンプルな四角いボタンの描画方法8―変形→回転
シンプルな四角いボタンの描画方法9―-45度回転
シンプルな四角いボタンの描画方法10―ダイレクト選択ツール
シンプルな四角いボタンの描画方法11―4つの正方形を三角形に
シンプルな四角いボタンの描画方法12―4色の小さい正方形

中央に正方形を作成し、全体のサイズを調整したら作成完了です。

四角いボタンの描画方法13―中央に正方形を作成
四角いボタンの描画方法14―適当に切り抜いて大きさを調整

更新履歴

更新履歴です。

戻る

スポンサーリンク

知識

使い方

描き方

フリー素材

サイト内のページ

スポンサーリンク