しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

Fireworksでゴールドの円を作成する

Fireworks CS3で次のようなボタンを作ってみました。

f:id:llcc:20170813175400p:plain

こちらですが作り方は非常に簡単です。
円を描いてスタイルタブの金色のテクスチャを選択するだけです。

f:id:llcc:20170813175437p:plain

テクスチャの再現

今回はこのデザインを参考に、同じものを自分で1から作ってみようと思います。

まずは画面に白い円を描きます。

f:id:llcc:20170813175628p:plain

次は、下のような線形グラデーションを追加します。

f:id:llcc:20170813175802p:plain

次はフィルターで色相・彩度を選びます。

f:id:llcc:20170813175847p:plain

パラメータは下の通りです。

f:id:llcc:20170813181725p:plain

色がゴールド系になりました。

f:id:llcc:20170813180022p:plain

次はフィルターのカーブを追加します。
こちらはトーンカーブと呼ばれるものの調整ができます。

f:id:llcc:20170813180230p:plain

少し複雑ですが、トーンカーブは次のように設定します。

f:id:llcc:20170813180518p:plain

かなりカラフルな円になりました。

f:id:llcc:20170813180526p:plain

次は明るさ、コントラストのフィルターを追加します。

f:id:llcc:20170813180652p:plain

パラメータは下の通りです。

f:id:llcc:20170813181405p:plain

同時にフィルターの順番を下のように変更します。

f:id:llcc:20170813181001p:plain

少しゴールドに近づいてきました。

f:id:llcc:20170813181024p:plain

グラデーションの方向を、上下反対にします。

f:id:llcc:20170813181314p:plain

次はフィルターの最上部に下のような内側のシャドウを追加します。

f:id:llcc:20170813181601p:plain

角度が60のシャドウも追加します。

f:id:llcc:20170813181711p:plain

かなり金属風になりました。

f:id:llcc:20170813181815p:plain

フィルターのカーブの下にも次のようなシャドウを追加します。

f:id:llcc:20170813182020p:plain

続けてエッジをぼかす処理を値を3にして追加します。

f:id:llcc:20170813182117p:plain

最後に、次のような白線を追加します。

f:id:llcc:20170813182240p:plain

以上でゴールドの円の完成です。

f:id:llcc:20170813182303p:plain