ちょっと工夫。ネットショップの時間帯指定や円グラフに使えるアイコンの作り方。
ネットショップでよく使う配達の時間帯指定。
テキストだけでなく、アイコンを使ってわかりやすく表示するために時計のアイコンを使っているサイトをよくみかける。
ちょっと探してみたらいくらでもフリーで探せるけれど、
自分でもオリジナルで作ってみたいと思うので、
ここでは時間帯指定のアイコンを作る方法を解説する。
テキストだけでなく、アイコンを使ってわかりやすく表示するために時計のアイコンを使っているサイトをよくみかける。
ちょっと探してみたらいくらでもフリーで探せるけれど、
自分でもオリジナルで作ってみたいと思うので、
ここでは時間帯指定のアイコンを作る方法を解説する。
直角三角形のシェイプを作る
時間帯指定のアイコンのどこが難しいかというと、
時計の角度だと思う。
普通、時計は1周360°を12時間で区切るので、
1時間の角度は30°となる。
これを利用すると、簡単に正確な角度で時計を作ることが出来る。
その時に準備として作るのが、それぞれの各が30°、60°、90°になっている直角三角形。
この三角形の30°の部分がちょうど時計の1時間になるので、
この三角形を使えば、正確に時間を表すことが出来ることが予想できる。
とりあえず、この直角三角形を作る方法。
普通に作ると難しいのだが、ちょっと頭をひねって考えてみよう。
実はこの三角形、正三角形をまん中で切るだけでできる。
なぜか、小学生の図形の角度の勉強を思い出そう。
(正三角形の1つの角度は60°なのでまん中で切れば30°の角度が出来る)
それはともかく、これでとりあえず必要な三角形が準備できた。
時計の角度だと思う。
普通、時計は1周360°を12時間で区切るので、
1時間の角度は30°となる。
これを利用すると、簡単に正確な角度で時計を作ることが出来る。
その時に準備として作るのが、それぞれの各が30°、60°、90°になっている直角三角形。
この三角形の30°の部分がちょうど時計の1時間になるので、
この三角形を使えば、正確に時間を表すことが出来ることが予想できる。
とりあえず、この直角三角形を作る方法。
普通に作ると難しいのだが、ちょっと頭をひねって考えてみよう。
実はこの三角形、正三角形をまん中で切るだけでできる。
なぜか、小学生の図形の角度の勉強を思い出そう。
(正三角形の1つの角度は60°なのでまん中で切れば30°の角度が出来る)
それはともかく、これでとりあえず必要な三角形が準備できた。

時間帯指定アイコンを作る
さて、ここから実際に時間帯指定のアイコンを作っていく。
用意するのはさきほどの直角三角形と円。
これらの組み合わせで時間帯指定アイコンを作る。
まずはベースとなる円を描く。

次にさっき作った直角三角形を重ねて配置。

この組み合わせでこれから2つの扇形を作っていく。
用意するのはさきほどの直角三角形と円。
これらの組み合わせで時間帯指定アイコンを作る。
まずはベースとなる円を描く。

次にさっき作った直角三角形を重ねて配置。

この組み合わせでこれから2つの扇形を作っていく。
まずは直角三角形の部分を選択して、「シェイプから一部型抜」を適用
すると次のように、円から直角三角形がくり抜かれた状態になる。
次に、小さい扇形を作る。
レイヤーをコピーして、次は三角形と円の両方を選択状態にする。
そして「シェイプ範囲を交差」を適用
すると次のように小さいほうの扇形が作られる。
最後にそれぞれ色を変えて組み合わせれば完成。
色んな時間帯を作る
今作った時間帯は12時から1時の時間帯。
他の時間帯はこのアイコンを30°ずつ回転させるだけでいい。
他の時間帯はこのアイコンを30°ずつ回転させるだけでいい。

では、2時間や3時間の連続の場合はどうするか。
これも簡単、直角三角形のみを選択してコピーして回転させるだけ。
いろいろやってみる
小さい扇形と大きい扇形が分かれているので色々な効果を使って、ちょっと変わった時間帯の表示を作ることが出来る。



