イラストレーターで立体的なボタン

質問

イラストレーター１０を使用しています。
下記のサイトの右の「全講座の一覧へ」「資料請求」のような
ボタンを作るにはどうすれば良いでしょうか？
立体的なボタンの作り方が載っているサイトを
教えていただければ助かります。
よろしくお願いします。
http://www.u-can.co.jp/index.html

回答No.3

ohirugohan · ベストアンサー

イラストレータで簡単にできます。
なにも考えずに下記の手順を試してください。

・角丸長方形ツールで『W40H10R2』の四角を書く。
・塗りを『R255G100B20→R255G153B0、角度90の
　グラデーション』に、線を『透明』に設定。
・「パスのオフセット」で『-1、マイター、比4』の
　一回り小さな四角を作る。
・「移動」で『水平-0.6、垂直-0.6』ずらしてコピー。
・一回り小さな四角二つを選択して「パスファインダ」
　『前面のオブジェクトで型抜き』
・できた鉤括弧形のオブジェクトの塗りを
　『R255G200B50→R255G100B20、角度-85のグラデーション』に設定。

これで近いものが出来たと思います。
（構造がわかりやすいようにオブジェクトの間隔や
グラデ幅を多めに取っていますのでそのままではありません）
あとはお好みで色やサイズを調節してください。
美しさを求めるのであれば、「ブレンド」をお勧めしますが
説明が複雑になりますので簡易立体ボタンです。
イラストレータの基本ですので、どうぞ活用なさってください。

※グラデーションの設定、パスのオフセット等のコマンドの場所が
わからないときはイラストレータのヘルプを見てください。

回答No.2

softbankHawks

例に出されているサイトのような単純なボタンじゃありませんが、
こちらのサイトにきれいなボタンの作り方があります。

AQUA風？ボタン
http://www.detarame.jp/ex-31-40/example37.html

文字は、レイヤーで入れればいいだけです。
あとはドロップシャドウでも何でも好きに出来ます。

上記サイトは「デタラメPhotoshop」という、解説本を出している方のサイトです。
http://www.detarame.jp/
他にも立体的な文字の作り方なども具体的に解説してあります。

でも、適当な素材集などから拾ってきて、それをベースにPhotoshopなどで加工した方が楽かもしれません。

ジャギーを気になさっていますが、GIFにしろPNGにしろ、最終出力は結局ラスターデータになりますから。（ボタンにFLASHを使うというならまた別ですが。）
拡大してみるようなものではありませんので、気にならないと思いますよ。

回答No.1

showta

WEB製作の仕事していますが
自分たちは、イラストレーターでは
素材加工とかしないですよ
基本的には、フォトショップを使っていますよ
最終段階のGIFの色減しとかWEB用に
簡単にできるようになっています。
レイヤー分けで、同じボタンのベース素材に
いろんな文字を重ねてＯＮ・ＯＦＦすれば、
切り替えて、ボタンを作成しやすいですし
最新のものは、WEB素材作りやすく
プログラムが構成されています。

お礼

なるほど、フォトショップですね。
フォトショップで作るとギザギザな感じが出るので
遠慮していたのですが・・・

フォトショップでの参考サイト等ありますでしょうか？