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

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

  • Posted by: HAKK
  • 2008年4月12日 23:13

立体感のある画像の作り方を書きます。

こういうの。

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

にほんブログ村 経営ブログ モチベーションへ    フィードメーター - WebbyRock

人気ブログランキング参加

Facebookアカウントでのコメントはこちら

Comments:0

Comment Form

(※入力していただいたメールアドレスは公開はしません。
漏らしません。迷惑メールしません。悪用しません。
スパムコメント対策のため必要ですのでお気軽に!)

Trackbacks:0

TrackBack URL for this entry
http://www.webbyrock.com/cgi-bin/mt/mt-tb.cgi/64
Listed below are links to weblogs that reference
グラデーション画像(ボタン・アイコンなど)の作り方〈初心者向け〉 from WebbyRock

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

Search
Feeds

Return to page top