- 2008年4月12日 23:13
立体感のある画像の作り方を書きます。
こういうの。
![]()
ボタンやアイコンを作るときにも十分応用できるので、
形や色を変えて、いろいろ作成してみると良いです。
制作環境は
Apple Mac OS X(10.4.11)
Adobe Illustrator CS
dobe Photoshop CS
とちょっと古め。
内容は超初心者向けに、
ちょっと細かい書き方をします。
わかりにくければ、コメントください!
「角丸長方形ツール」で
細長い角丸の長方形を描きます。

この角丸長方形ツールを選択後に、
任意の場所をクリック。
角丸長方形のオプションが表示されるので、
サイズは幅450px、高さ18px、角丸の半径は「高さの半分」で9px。

次は着色します。
色はちょっと濃いゴールドにしようかと。
立体感を出すために、
グラデーションを使います。
※表示されていない場合は
〈ウィンドウ〉→〈グラデーション〉
で表示されます。
「グラデーション」で「線形」を選択します。
そして角度を90度に指定。
そして次はグラーデーションの色を修正。
右側の小さい■をクリックして選択し、
カラーでRGB16進数で#996600(R:99、G:66、B:00)を入力。
10進数で入力するとR:153、G:102、B:0です。

※表示されていない場合は
〈ウィンドウ〉→〈カラー〉
で表示されます。
グラデーション左側の■にも同じ色を着色し、
左側のこの色を薄めます。
手順は色の指定をHSBに変更しBを100に、Sを60くらいかな。
そうすると程よくグラデーションがかかってますね。
![]()
さて、グラデーションのバランスを整えますか。
右の■を選択して位置を50くらいにしましょう。
スライドさせても良いし、数値を入力しても良いです。

さて、それからちょっとした小細工をしましょうか。
作った素材をクリックし選択し、
〈オブジェクト〉→〈パス〉→〈パスのオフセット〉
を選択します。

オフセットの「-3」を入力しOK。

そうすると素材の上にもうひとつ
全体が-3px小さいもう一つの素材が出来ます。
素材の上にラインを敷きます。
![]()
その敷いたラインを「整列」で
縦横それぞれ中央に寄せます。

ラインと小さいほうの素材を選択し、
「パスファインダ」の「分割」を選択します。

そうすると小さいほうの素材は縦に2分割されます。
右クリックで「グループ解除」。
(またはコマンド+クリック)

そしてその下側を削除します。
上側のものをクリックして選択、
グラデーションの角度を270度に。
下に敷いてある素材は90度のままで良いです。
そして角度を270度にした
上の素材のグラデーションを調整します。
右の■を75度くらいに設定。
これでほぼOKですが、上の素材を選択し、
矢印キーで上に2ピクセル分(↑を2回押す)移動して、
これで完成です!
![]()
- Newer: ひとつのことをやるという集中力
- Older: いきなり大量のことをやろうと考えるのではなく、まずは積み上げる心構えで
