イラレで立体的なボタンを作る方法を教えて下さい

Question

webのデザインの制作初心者です。
立体的な問合せボタンを作ろうと考えているのですが、下記URLの画像のようなイメージで、ボタンアイコンを、イラストレーターで作る方法を教えてください。

完成イメージURL
http://www.gizmodo.jp/upload_files2/121210apple_tv1.jpg

参考URL
http://ameblo.jp/ca-1pixel/entry-11424360340.html
※こちらのようなボタンを作りたいのですが、初心者のため細かい作り方がわかりません。

環境はイラストレーターcs5(mac)です。
よろしくお願いします。

hiroleta · Accepted Answer

http://firestorage.jp/download/a5c3997e2b64ee40f08967882420cc66aa5afc55
文字部分にも「砂岩」を使ってみました（ブレンドした文字に「砂岩」を適用）。
こちらの方が良いかも？
グラデーションの設定は、角丸の台形だけを選択して、グラデーションツールをクリックすれば、表示されたグラデーションバーで確認出来ます。
グラデーションツールで、下からやや右方向上にドラッグしてます。
グラデーションパネル内のスライダーも移動してます。

hiroleta · Answer

http://firestorage.jp/download/7489365a95ec65de1efb4dd7f42a1b7a0b64eae8

データを編集してみました。
角丸の台形と、文字の上下関係が逆でした。
文字がブレンドされてませんでした。
角丸の台形のグラデーションの設定を変更しました。
ザラザラ感を出す為に、効果＞テクスチャ＞テクスチャライザ＞「砂岩」を使いました（判り易い様に多めにしてますが、もう少し控目が良いかも？）。

hiroleta · Answer

こんな感じなら。
角丸の四角＋マーク＋文字（アウトライン化）を配置して、全体を選択ツールで選択＞オブジェクト＞複合パス＞作成＞塗りをＫ１００％・線無しにする＞効果＞３Ｄ＞回転＞「Ｘ軸を中心とした回転角度を指定」欄に、４５°を入力・下の２項目は０・「遠近感」欄に、７５°を入力＞ＯＫ＞オブジェクト＞アピアランスを分割＞オブジェクト＞クリッピングマスク＞解除＞オブジェクト＞パス＞パスの削除＞ＯＫ＞オブジェクト＞グループ解除＞オブジェクト＞グループ解除＞オブジェクト＞グループ解除＞オブジェクト＞複合パス＞解除＞角丸の台形だけを選択ツールで選択＞Ｃｔｒｌ（Ｃｏｍｍａｎｄ）＋２キーを押す＞全体を選択ツールで選択（マークと文字を選択）＞オブジェクト＞複合パス＞作成＞塗り黒・線無しにする＞編集＞コピー＞↓キーで少し下に移動＞編集＞背面へペースト＞塗りをＫ６０％にする＞全体を選択ツールで選択＞オブジェクト＞ブレンド＞作成（綺麗なグラデーションにならない場合は、ブレンドツールをダブルクリックして、間隔欄で「ステップ数」を選択・右の数値を１００にして、ＯＫ）＞編集＞前面へペースト＞全体を選択ツールで選択＞オブジェクト＞クリッピングマスク＞作成＞オブジェクト＞すべてをロック解除＞編集＞コピー＞塗りをＫ３０％とＫ９０％の円形グラデーションにする＞グラデーションツールで下から上にドラッグして、グラデーションの中心を移動＞効果＞スタイライズ＞ぼかし＞半径を、０．５ｍｍにして、ＯＫ＞Ｃｔｒｌ（Ｃｏｍｍａｎｄ）＋２キーを押す＞編集＞背面へペースト＞塗りをＫ４０％にする＞編集＞背面へペースト＞塗りをＫ１００％にする＞↓キーで下に移動＞自由変形ツールをバウンディングボックスの左下の角に合わせて←→に変化したら、Ｓｈｉｆｔ＋Ｃｔｒｌ（Ｃｏｍｍａｎｄ）＞Ａｌｔ（Ｏｐｔｉｏｎ）を押したまま少し右にドラッグ（縦横が同じ大きさになる程度）＞編集＞コピー＞背面のＫ４０％とＫ１００％の図形を選択＞オブジェクト＞ブレンド＞作成＞編集＞背面へペースト＞塗りをＫ７０％にする＞↓→キーで少し右下に移動＞効果＞ぼかし＞ぼかし（ガウス）＞半径を設定して、ＯＫ＞オブジェクト＞すべてをロック解除。

イラレで立体的なボタンを作る方法を教えて下さい

こんな感じなら。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング