グラデーション画像(ボタン・アイコンなど)の作り方〈初心者向け〉

立体感のある画像の作り方を書きます。
こういうの。
14.jpg
ボタンやアイコンを作るときにも十分応用できるので、
形や色を変えて、いろいろ作成してみると良いです。
制作環境は
Apple Mac OS X(10.4.11)
Adobe Illustrator CS
dobe Photoshop CS
とちょっと古め。
内容は超初心者向けに、
ちょっと細かい書き方をします。
わかりにくければ、コメントください!


角丸長方形ツール」で
細長い角丸の長方形を描きます。
01.jpg
この角丸長方形ツールを選択後に、
任意の場所をクリック。
角丸長方形のオプションが表示されるので、
サイズは幅450px、高さ18px、角丸の半径は「高さの半分」で9px。
02.jpg
次は着色します。
色はちょっと濃いゴールドにしようかと。
立体感を出すために、
グラデーションを使います。
※表示されていない場合は
〈ウィンドウ〉→〈グラデーション〉
で表示されます。
グラデーション」で「線形」を選択します。
そして角度を90度に指定。
そして次はグラーデーションの色を修正。
右側の小さい■をクリックして選択し、
カラーでRGB16進数で#996600(R:99、G:66、B:00)を入力。
10進数で入力するとR:153、G:102、B:0です。
03-3.jpg
※表示されていない場合は
〈ウィンドウ〉→〈カラー〉
で表示されます。
グラデーション左側の■にも同じ色を着色し、
左側のこの色を薄めます。
手順は色の指定をHSBに変更しBを100に、Sを60くらいかな。
そうすると程よくグラデーションがかかってますね。
03.jpg
さて、グラデーションのバランスを整えますか。
右の■を選択して位置を50くらいにしましょう。
スライドさせても良いし、数値を入力しても良いです。
5-1.jpg
さて、それからちょっとした小細工をしましょうか。
作った素材をクリックし選択し、
〈オブジェクト〉→〈パス〉→〈パスのオフセット〉
を選択します。
06.jpg
オフセットの「-3」を入力しOK。
オフセット -3
そうすると素材の上にもうひとつ
全体が-3px小さいもう一つの素材が出来ます。
素材の上にラインを敷きます。
ライン敷く
その敷いたラインを「整列」で
縦横それぞれ中央に寄せます。
イラストレーター 整列
ラインと小さいほうの素材を選択し、
「パスファインダ」の「分割」を選択します。
パスファインダ 分割
そうすると小さいほうの素材は縦に2分割されます。
右クリックで「グループ解除」。
(またはコマンド+クリック)
グループ 解除
そしてその下側を削除します。
上側のものをクリックして選択、
グラデーションの角度を270度に。
下に敷いてある素材は90度のままで良いです。
そして角度を270度にした
上の素材のグラデーションを調整します。
右の■を75度くらいに設定。
これでほぼOKですが、上の素材を選択し、
矢印キーで上に2ピクセル分(↑を2回押す)移動して、
これで完成です!
14.jpg

SNSでもご購読できます。