ぐるっと回るグラデーションでリサイクルマークのような回転した矢印を作ってみる。



グラデーションを使ったリサイクルマーク

今回は上の画像のようなぐるっと回った矢印のデザインを作ってみる。
このぐるっと回った矢印を作るのが目的ではなくて、そこに使われるグラデーションの作り方。
単方向のグラデーションではこういったものは実現できないはず。
どうやって作っているだろう。

リサイクル風のぐるっと回った矢印を作る

まずはくるっと回った矢印を作る。
これは実は円と三角形だけで作れる。
どんな組み合わせになっているかというとこんな感じ。

リサイクルマーク

ここではシェイプの型の切抜きや追加を使う。
やり方が良くわからない人は先に
Photoshopのシェイプを自由に組み合わせていろんな形のシェイプを扱う
を読んで欲しい。
先ずは円を2つ組み合わせて輪っかを作る。
大きい円の中を小さい円でくり抜く。

リングの作り方

次に矢印の始点と終点の間の空白を作る。
色んなやり方があるけれど、円の中心を頂点とした三角形をくり抜く。

輪っかから三角形をくり抜く

最後に矢印の先を追加すると、リサイクルっぽい矢印の完成。

リサイクルマーク

矢印にグラデーションをかける

種明かしすると難しいことではない。
たった1行で解説が終わってしまうそうなほど。
グラデーションは次のようなものを使う。

グラデーションの設定

スタイルを「角度」にするのがポイント、というかここだけ。
始点の位置を決めるのに角度の度数を0にしている。
グラデーションの方向なんかも関係する。
とにかく、画像のように指定すればいい。
通常は次のようなグラデーションになるが、

グラデーション結果

それをさっきつくったリサイクルマークでくり抜くとうまく円を描きながらグラデーションしているようなものが作れる。

グラデーションを使ったリサイクルマーク

Related Posts Plugin for WordPress, Blogger...

Leave a Reply