フリーなイラレ試行―体験版、操作方法、イラスト作品など

トップ フリーのイラスト素材&描き方 ボタン

ホームページのボタン―フリー素材(オリジナル)&作成方法(イラストレーターなど)。

ホームページのボタン素材をフリーで公開しています。また、イラストレーターなどを使用したボタンの作成方法の例も紹介しています。

目次

この記事の目次です。

1. ホームページのHTML/CSSのボタン

2. ボタンの画像素材(フリー)

3. イラストレーターでの丸いボタンの作成方法

4. イラストレーターでの四角いボタンの作成方法

1. ホームページのHTML/CSSのボタン

ホームページのボタンのフリー素材(HTML/CSSコード)です。 カラーコードを調整を変更すれば好きな色のボタンが作成できます。

サンプル

サンプルです。

ボタン

CSS

CSSのコードです。

a {
	text-decoration:none;
}
.button-light-blue {
	font-size:1rem;
	background:	#0bd;
	color:	#fff;
	border-radius:5px;
	padding:10px 15px;
}
.button-light-blue:hover {
	background:#0090aa;
}

HTML

HTMLのコードです。

<a class="button-light-blue">ボタン</a>

2. ボタンの画像素材(フリー)

ホームページのボタンは画像を指定することもできます。

指定例

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

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

オリジナルの画像素材

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

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

3. イラストレーターでの丸いボタンの作成方法

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

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

作成手順

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

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

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

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

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

例 幅:100px 高さ:100px

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

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

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

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

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

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

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

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

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

4. イラストレーターでの四角いボタンの作成方法

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

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

作成手順

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―適当に切り抜いて大きさを調整

更新履歴

更新履歴になります。

戻る

イラストレーターとは

イラストレーターの使い方

フォトショップとは

フォトショップの使い方

アドビ関連知識

スポンサーリンク

フリーのイラスト素材&描き方

イラスト作品集

サイト内のページ

スポンサーリンク