これを覚えるだけでも十分!小さくかわいいボタンをきれいに作る方法



かわいいボタンの作り方

バタバタと仕事が忙しく、久しぶりの記事になりました。
今回は小さくかわいいボタンをきれいに作る方法。
単純だけれど、ポイントを押さえながら解説します。

これさえ覚えておけばWEBを作る際にボタン作りは大丈夫。
簡単にきれいなボタンを作れます。
要点を覚えよう。

形を作る

まずはシェイプ機能を使ってボタンを作る。
多少は角が丸まってるほうがかわいらしい。
通常の矩形だとなんだかとがった感じになる。

ボタングラデーション

次にグラデーションをかける。
ここはボタン作りにはあまり関係ないので好きにすればいい。
でも、光の影響を受ける現実世界に完全なる単色は無いので軽くでもグラデーションを当てるとよい。
このさりげない部分が実は大事だったりする。

ボタンの枠を描く

今回はここが要点だと思う。
ボタンに限らず、縁にたった1ピクセルさりげなく濃い色を入れるだけでボタンを引き締める効果がある。

ボタンを引き締める

上が縁なし、下が縁あり
なんとなく上の縁なしはのべっとした感じでしまりがない。
下は縁がある分、引き締まった感じがある。
※サンプルほど縁は濃くなくてもいい、さりげなくでいい。

ボタンの影

最後にここもさりげなくドロップシャドウを入れる。
ドロップシャドウをきつくしすぎると、なんとなくゴツゴツした感じになる。
さりげなく入れることでかわいらしい控えめな印象になる。

ざっとこんな感じ。
簡単だと思う。

いろんなパターン

色を変えたり形を変えたりすると、
こんな感じで何にでも使える。
これを覚えておけば使えるでしょ。

Related Posts Plugin for WordPress, Blogger...

Leave a Reply