FireworksマニアTOP > Fireworksデザインレシピ > Fireworksを使って 3パーツで真珠を描いてみよう!【サンプルデータダウンロードつき】

Fireworksを使って 3パーツで真珠を描いてみよう!【サンプルデータダウンロードつき】

カテゴリー: Fireworksデザインレシピ

今日は円3つで書く、立体的な球体の書き方をご紹介します。
複数のパーツを重ねて、より立体的に作ってみましょう♪

mac版CS4でのキャプチャでご説明していますが、旧バージョンでも同じように作成できます。

最後にサンプルデータのダウンロードもあります☆

133-01

このような球体を作ります。一応パールのつもりです。見えるかな…

これまでのTipsのように、グレースケールでパーツを作り、
最後に色相・彩度の調整で好みの色に調整していく方法をとります。

これによってカラーバリエーションが簡単に作れます。

ですので、まず以下のようなグレーの球体を作っていきましょう。

133-02

レイヤーは3つです。

133-03

まず、ベースの円を書いてきます。

円ツールで、円を書きます。
shiftキーを押しながらドラッグするとキレイな円がかけます。

今回は25px×25pxの円を書きました。

133-04

この大きさの円を2つ使いますので、書いた円をコピーしてペーストしておきます。
キーボードてcommand(ctrl)+c → command(ctrl)+vしてください。

上の円は、レイヤーを非表示にしておきます。
(レイヤー右横の目玉をクリックして非表示に)

次に、下のレイヤーの円に色を付けていきます。

プロパティから円形のグラデーションを選択します。

133-08

グラデーションを設定します。

133-05

グレーから白になるグラデーションを設定します。

133-06

グレー部分の色は#999999に設定しました。

133-07

このように、真ん中より左斜め上から右下に向かってグラデーションをかけます。

133-09

こんな感じになりました。

輝いている感じを出すために、少しぼかします。

フィルタメニューから【ぼかし】→【ほかし(ガウス)…】を選択します。

133-10

ぼかしの半径は0.7に設定しました。

133-11

下の円の加工は完了です。

次に、先ほど非表示にしておいた上の円のレイヤーを表示させます。
(レイヤー左端のグレーの四角をクリックして目玉を表示させる)

上のレイヤーの円に
以下のようなフィルタを設定していきます。

【シャドウとグロー(windows版はシャドウと光彩)】→【シャドウ(内側)】

133-12

値は以下のように設定します。

ノックアウトにチェックをおわすれなく。

133-13

133-14

重ねるとこんな感じです。
下の部分は円のような反射ができてきました。

ちなみに上のレイヤーだけだとこんな感じ↓

最後に上の部分の反射を作っていきます。

133-15

円ツールで円を書きます(色は#ffffff)
今回は7px×7pxで書きました。

133-16

これをぼかします。

フィルタメニューから【ぼかし】→【ほかし(ガウス)…】を選択します。
値は1.4に設定しました。

133-02

立体感のある球体の完成です。

最後にこの3つのレイヤーをまとめてドラッグして選択し、右クリック→【グループ】をクリックして、ひとつにまとめます。

グループ化したオブジェクトに、フィルタメニューから【カラーを調整】→【色調・彩度】を設定します。

133-17

133-18

お好みで色味を調節してください。

サンプルのクリーム色のパールは、
色相:57、彩度:48、明度:14で設定しています。

以上、球体の作り方でした。

色を変えてピンっぽい表現に使ったりするのもおすすめです♪

光の表現のしかた、立体感の出し方は
アクアボタンなど、いろんなところに応用できる方法ですのでぜひ覚えてみてくださいね!

サンプルデータダウンロードできます。

↑上記のサンプルデータご用意しました。
Fireworks PNG形式

ダウンロードはこちらから

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/