ちょっと工夫。ネットショップの時間帯指定や円グラフに使えるアイコンの作り方。



配達時間帯指定

ネットショップでよく使う配達の時間帯指定。
テキストだけでなく、アイコンを使ってわかりやすく表示するために時計のアイコンを使っているサイトをよくみかける。
ちょっと探してみたらいくらでもフリーで探せるけれど、
自分でもオリジナルで作ってみたいと思うので、
ここでは時間帯指定のアイコンを作る方法を解説する。

直角三角形のシェイプを作る

時間帯指定のアイコンのどこが難しいかというと、
時計の角度だと思う。
普通、時計は1周360°を12時間で区切るので、
1時間の角度は30°となる。
これを利用すると、簡単に正確な角度で時計を作ることが出来る。
その時に準備として作るのが、それぞれの各が30°、60°、90°になっている直角三角形。
この三角形の30°の部分がちょうど時計の1時間になるので、
この三角形を使えば、正確に時間を表すことが出来ることが予想できる。
とりあえず、この直角三角形を作る方法。
普通に作ると難しいのだが、ちょっと頭をひねって考えてみよう。
実はこの三角形、正三角形をまん中で切るだけでできる。
なぜか、小学生の図形の角度の勉強を思い出そう。
(正三角形の1つの角度は60°なのでまん中で切れば30°の角度が出来る)
それはともかく、これでとりあえず必要な三角形が準備できた。
直角三角形を作る

時間帯指定アイコンを作る

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

まずは直角三角形の部分を選択して、「シェイプから一部型抜」を適用
直角三角形の選択
シェイプから一部型抜
すると次のように、円から直角三角形がくり抜かれた状態になる。
円から直角三角形をくり抜く

次に、小さい扇形を作る。
レイヤーをコピーして、次は三角形と円の両方を選択状態にする。
そして「シェイプ範囲を交差」を適用
三角形と円を選択
シェイプ範囲を交差
すると次のように小さいほうの扇形が作られる。
小さいほうの扇形

最後にそれぞれ色を変えて組み合わせれば完成。
時間帯指定アイコン

色んな時間帯を作る

今作った時間帯は12時から1時の時間帯。
他の時間帯はこのアイコンを30°ずつ回転させるだけでいい。
いろいろな時間帯

では、2時間や3時間の連続の場合はどうするか。
これも簡単、直角三角形のみを選択してコピーして回転させるだけ。
複数時間の指定
複数時間の指定

いろいろやってみる

小さい扇形と大きい扇形が分かれているので色々な効果を使って、ちょっと変わった時間帯の表示を作ることが出来る。
円グラフを立体化
円グラフを分離
Related Posts Plugin for WordPress, Blogger...

Leave a Reply