Illustrator(イラストレーター)で中心がへこんだボタン

Illustrator(イラストレーター)で中心がへこんだボタンを作成してみました。 作り方 ①線形のグラデーションを適用した円形オブジェクトを作成し、「効果」メニューから「スタイライズ」→「光彩(外側)」を適用して影のようにします。 ②その上から一回り小さい円を作成し、好きな色で円形グラデーションを適用します。 ③その円を選択したまま、「効果」メニューから「スタイライズ」→「光彩(内側)」で中心から光っている感じを出します。(「境界線」でなく「中心」にチェックを入れ、色は明るめにします) ④最後に半円を作成して、白黒のグラデーションを適用し描画モードを「ソフトライト」にして重ねます。

続きを読む

Illustrator(イラストレーター)で光沢感のあるボタン2

Illustrator(イラストレーター)で光沢感のあるボタン2 久しぶりにボタンでも作ってみました。最近流行りのボタン。 ①赤のグラデーションの角丸長方形を作成し、上下反転して上に重ねる方を若干、小さくしぼかして重ねます。 ②その上部に角丸長方形を半分にした白とグレイのグラデーションのオブジェクトを描画モード「オーバーレイ」で重ねます。(透明度50%) ③さらに下部には半円の白と黒のグラデーションのオブジェクトを描画モード「スクリーン」で重ねます。(透明度60%) ④コピーして選択し、オブジェクトを再配色ボタンをクリックします。 ⑤「編集」の方をクリックして、「ハーモニーカラーをリンク」でリンク状態にしてカラーホイール上をドラッグして色を変更します。 制作時間10分

続きを読む

Illustrator(イラストレーター)でクリックされたボタン

Illustrator(イラストレーター)でクリックされたへこんだボタンの簡単な作成方法です。 ①円形オブジェクトに円形のグラデーションを適用し、コピーします。コピーしたオブジェクトを少し小さくし、方向を逆にしたグラデーションを適用しておきます。(または180度回転) ②重ねたオブジェクトを選択のまま、「オブジェクト」メニューから「スタイライズ」→「ぼかし」で境界をぼかします。 ③へんこんだ感じは出ましたがさらにコピーして同じようにグラデーションの方向を逆にして境界をぼかした一回り小さい円を重ねます。 ④文字をのせて完成です。ボタンをクリックした時や、マウスオーバーした時など使えると思います。

続きを読む

Illustrator(イラストレーター)でべベルなボタン

Illustrator(イラストレーター)の3D効果でべベルボタンを作成してみました。 CSからの機能の3D効果を使用します。 FireworksやPhotoshopと同じくらい手軽に作成できました。 作り方 ①べベルを適用したいオブジェクトを作成します。 ②「効果」メニューから「3D」→「押し出し・べベル」をクリックします。 ③「位置」を「前面」にします。 ④「べベル」の種類を選択します。ここでは「標準」にしました。 ⑤べベルの高さを調整します。 ⑥OKボタンをクリックして完成です。 ※大きさを変更しても効果の値は変化しません。 ※「べベル」の種類も多数用意されています。

続きを読む

Illustrator(イラストレーター)でキーボードをボタンにする

Illustrator(イラストレーター)でキーボードの写真をトレースしてボタンを作成してみました。 元写真はこちらの普通のキーボードの写真です、これをリアルトレースしました。 サンプル2 ノートパソコンのキーボード サンプル3 斜めから撮影されたキーボードの写真をトレース ※ 文字なし

続きを読む

Illustrator(イラストレーター)のスタイルライブラリの編集

Illustrator(イラストレーター)のスタイルライブラリを編集してオリジナルのボタン・テクスチャを作成します。スタイルライブラリをそのまま使用するのはいかにもイラストレーターで作ったという感じでなかなか抵抗があります。 例えばこの「雨滴」などはIllustrator10を使ったことがある人ならば、見覚えのあるものでしょう。今回はこれを少し編集します。 編集するにはアピアランスパレットを見ます。 この中の項目を削除したり、編集したり、または追加してオリジナルのものにしてしまいます。 ここではこのハデな迷彩の塗りを削除したいので、項目をゴミ箱にドラッグ&ドロップします。 雨滴だけ残した状態になります。 これを元に背景を変えたり、文字をのせれば綺麗なボタンの出来上がりです。

続きを読む

Illustrator(イラストレーター)で光沢感のあるボタン

Illustrator(イラストレーター)で光沢感のあるボタンです。 久しぶりにボタンです。 アクア風ほどクリアではないですが、少しツルツルした感じのボタンを手軽に作成する方法です。 作り方は単純です。 ①まず円形オブジェクトを作成します。 ②その上に楕円形のオブジェクトをのせ、白と黒のグラデーションを適用します。 ③楕円形オブジェクトをぼかします。「効果」メニューから「ぼかし」→「ぼかし(ガウス)」で全体的にぼかします。(数値はオブジェクトの大きさによりますのでプレビューで確認します) ④「描画モード」はスクリーンにします。 ⑤下図のような2つの円形オブジェクトを作成し、パスファインダパレットで「形状エリアから前面オブジェクトで型抜き」をクリックします。(横に長い方が前面オブジェクトです) ⑥「オブジェクト」メニューから「アピアランスを分割」をクリックして型抜きで使用したオブジェクトを削除しておきます。このオブジェクトを同じようにぼかして描画モードを「スクリーン」にして円の下の方にのせます。 ⑦影を付けて完成です。

続きを読む

Illustrator(イラストレーター)でクリアなボタン

Illustrator(イラストレーター)でクリアなボタンの作り方です。クリアボタンまたはアクア風ボタンとも言われているようです。1年くらい前に同じような記事を書きましたが今回の方が簡単です。 ①まず下地のオブジェクトを作成し少しグラデーションを適用します。 ②上部の輝いている部分を作成します。下地のオブジェクトをコピーして少し小さくしアンカーポイントを追加したり削除したりして作成しました。そのオブジェクトに白と黒のグラデーションを適用して描画モードを「スクリーン」にします。 ③下部の方も同じように作成し、下図のようなグラデーションを適用します。下部の方は「効果」メニューから「スタイライズ」→「ぼかし」で少しぼかします。 ④文字を入れて完成です。 ※色を変更 ※背景を配置して本体の描画モードも「スクリーン」に

続きを読む

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成 その4

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成 その4 Illustrator(イラストレーター)のリアルトレースの手法でボタン作成します。 「Illustrator リアルイメージ・レクチャーブック」のリアルトレースの手法を使用すればリアルなWEB用ボタンを簡単に作ることができます。放射状グラデーションをあらかじめ作成しておいて使いまわすと便利です。 ■思わずクリックしたくなるボタンのサンプル8 何かの機械製品のボタンの写真を見つけたのでトレースしました。 単純な放射状グラデーションメッシュ2つです。 ■思わずクリックしたくなるボタンのサンプル9 水滴をトレースしてメッシュを調整し色づけ。 フォトショップでアレンジ Illustrator(イラストレーター)aiファイル リアルイラストダウンロード販売中

続きを読む

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成 その3

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成 その3 Illustrator(イラストレーター)のリアルトレースの手法でボタン作成します。 「Illustrator リアルイメージ・レクチャーブック」のリアルトレースの手法を使用すればリアルなWEB用ボタンを簡単に作ることができます。放射状グラデーションをあらかじめ作成しておいて使いまわすと便利です。 ■思わずクリックしたくなるボタンのサンプル5 アウトライン。放射状グラデーションを2つ重ねただけです。 効果は光彩(外側)を適用しています。 アレンジ ■思わずクリックしたくなるボタンのサンプル6 アウトライン。放射状グラデーションを1つと残りは線状グラデーションです。 ■思わずクリックしたくなるボタンのサンプル7 これはカメラのレンズをトレースして色をつけたものです Illustrator(イラストレーター)aiファイル リアルイラストダウンロード販売中

続きを読む

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成 その2

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成 その2 Illustrator(イラストレーター)のリアルトレースの手法でボタン作成します。 「Illustrator リアルイメージ・レクチャーブック」のリアルトレースの手法を使用すればリアルなWEB用ボタンを簡単に作ることができます。放射状グラデーションをあらかじめ作成しておいて使いまわすと便利です。 ■思わずクリックしたくなるボタンのサンプル3 アウトライン 一番下のオブジェクトのみ放射状グラデーションで上は普通の円形グラデーションと白のオブジェクトで光っている部分を再現。 ■思わずクリックしたくなるボタンのサンプル4 元写真 完成品 フォトショップでアレンジ アウトライン こちらは全てグラデーションメッシュを使用したオブジェクトで構成。 Illustrator(イラストレーター)aiファイル リアルイラストダウンロード販売中

続きを読む

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成

Illustrator(イラストレーター)のリアルトレースの手法でボタン作成します。 「Illustrator リアルイメージ・レクチャーブック」のリアルトレースの手法を使用すればリアルなWEB用ボタンを簡単に作ることができます。放射状グラデーションをあらかじめ作成しておいて使いまわすと便利です。 ■思わずクリックしたくなるボタンのサンプル1 このボタンは写真をトレースしています。 単純な放射状グラデーションです。 文字はアウトライン化してワープさせています。(アーチ) ■思わずクリックしたくなるボタンのサンプル2 元写真はこちら。 それをトレースしたものがこちら。 2つの放射状グラデーションを重ねてあります。 Illustrator(イラストレーター)aiファイル リアルイラストダウンロード販売中

続きを読む

Illustrator(イラストレーター)でアクア風ボタンを作る

Illustrator(イラストレーター)だけでアクア風ボタンを作る方法です。アクア風ボタンと言えばPhotoshopのようですがイラストレーターで何とか作ってみました。方法は簡単です。 ①まずは塗りが黒の円を描きます。 ②その円をコピーします。塗りはグラデーションで種類は「円形」にしてグラデーションツールで中心を円の下の方に修正します。グラデーションスライダはだいたい下図のようになっていればよいと思います。基本的なグラデーションの使い方はIllustrator(イラストレーター)の基本的なグラデーションの使い方 を参照してください。 ③全体の不透明度を85%くらいに落とし最初に作った黒の円の上に重ねます。 ④今度はまた一つ先ほどより若干小さめの円を一つ作成します。グラデーションで種類は「線形」です。(あるいはこの円は白の塗りでもよい) もう一つ長方形のオブジェクトを一つ作成します。これもグラデーションで種類は「線形」です。図のようなグラデーションに調整してください。 ⑤二つを下図のように重ね合わせます。(長方形が上です) ⑥二つを選択したままの状態で透明パレットから「不透明マスクを作成」をクリックします。 ⑦図のような感じになればよいです。 ⑧これを重ね合わせればアクア風ボタンの完成です。 色を変えるには不透明マスクを一度解除しないといけないのが多少面倒でしょう。 試行錯誤で何とかできました。

続きを読む

Illustrator(イラストレーター)で簡単WEB用ボタン作成(2)

Illustrator(イラストレーター)で簡単WEB用ボタン作成(2) 今日のボタンは背景に埋まっているように見えるボタンです。 完成がこちら。 ①まず円形のグラデーションを作成します。種類は「円形」です。 グラデーションの詳しい作成方法は基本的なグラデーションの使い方を参照してください。 ②もう一つ円形のグラデーションを作成します。種類は「線形」です。 ③さらにもう一つ円形を下図のようなグラデーションで作成します。そしてその円よりも少し大きな塗りが「白」の円を作成します。 ④整列パレットでぴったりに重ねます。(大きな白の円を後ろにして) ⑤ブレンドを作成するので「オブジェクト」から 「ブレンド」→「ブレンドオプション」をクリックします。 ⑥ステップ数を「8」でOKをクリックします。 ⑦二つの円を選択したままの状態で「オブジェクト」メニューから「ブレンド」→「作成」をクリックします。 ⑧後は3つのオブジェクトを重ねます。

続きを読む

Illustrator(イラストレーター)で簡単WEB用ボタン作成(1)

Illustrator(イラストレーター)で簡単WEB用ボタン作成(1) 今日からイラストレーターで作るボタンのサンプルのカテゴリーも増やしたいと思います。 今日の完成目標はこちら オーソドックスなボタンです。 ①まず楕円形ツールで正円を描きます。(「Shift」キーを押しながらドラッグします) 色はなしにしてグラデーションボタンをクリックします。 ②円を選択状態にしてグラデーションツールボタンをクリックしオブジェクトの左上から右下へドラッグします。 ③円をコピーして貼り付けます。貼り付けた円を選択し若干縮小します。縦横比を固定で縮小したいので「Shift」キーを押しながら縮小するようにドラッグしてください。 ④2つの円を整列させたいので整列パレットで垂直方向へ整列と水平方向へ整列のボタンをクリックして重ねます。 ⑤次に上の円を選択して「オブジェクト」メニューから「変形」→「回転」をクリックします。 ⑥角度を180度にして「OK」ボタンをクリックします。 ⑦あとはグラデーションの色を調整して完成です。(ここでは上の円のグラデーションの色を明るくしています。)

続きを読む