サイトマップ トップページに戻る

ホームページ制作時に便利なジュエリーボタン

ここではホームページ作成に便利なフォトショップ・イラストレーターの小技を紹介していきます。
今回は最近よく目にするジュエリーっぽいボタンの作成についてご紹介します。
まずはじめにイラストレーターで図1のように本体と光のパーツを準備します。
形はお好きに作っていただいて結構ですが光源の位置を考えて光の形を考えましょう。

図1

次にさっき作ったパーツをフォトショップに出力します。
今回は分かりやすいように色をつけていますがレイヤー効果で色を付けますので基本的に白でも結構です。図2

図2

次にグラデーションで好きな色をつけます。彩度が高い方が透明感が出ます。図3

図3

最初に作った光の部分をイラストレーターからフォトショップに持ってきます。図4

図4

光のベクトルスマートオブジェクトを1回ラスタライズして、輪郭(今回は左側のベジエ部のみ)をぼかします。図5

図5

最後に光の部分の不透明度を落として完成です。図6
基本的にはこれだけで充分ですがグラデーションなどを調整するとさらに見栄えよくできますよ。

図6

水晶玉のようなパーツ作り

今回は写真から水晶玉のようなパーツを作っていきます。
まず、加工したい写真を用意します。
そのイメージの縦横幅を揃えて正方形にしておきましょう。

フォトショップで「フィルタ→変形→極座標」を選び、
「極座標を直交座標に」を選択して実行します

次に画像を上下反転します。

そして先ほどと同じく「フィルタ→変形→極座標」を選び、
今度は「直交座標を極座標に」を選択して実行します。

出来上がった球に沿って背景を切り取ります。

今回は作った球体をこんな画像に合成してみました。
ぼんやりとした光はレイヤー効果やソフトライト重ねがけなどで出しています。

上記手順で球体をいろいろ作ってこんな風に一つに合わせても小さな宇宙みたいでいいかもしれませんね。