Archive for the ‘ボタン’ Category

[Photoshopチュートリアル]ほんのちょっとこだわるだけで、さらに良くなるグラデーションデザイン

デザインをキレイに見せるグラデーション、
ボタンのデザインや壁紙、世の中にあるものは全てなんらかの光の影響を受けるので、デザインにグラデションは欠かせない。

ちょっとしたデザインでも、グラデーションをさりげなくつけられるようになったら、
デザイン力がさらにアップすると思う。

さりげないグラデーション

この2つ正方形は、右側が少しだけグラデーションさせている。
本当にすこしだけれど、なんとなく左側はべたっとした印象がないだろうか。
よく見ないとわからない、でもこのさりげない違いが、見る人の無意識の美的感覚には大きく働く。

パッと見ではそんなに変わらないような部分でも、細かい配慮があったりする。

では、今回の主題の、グラデーションの色について。

通常、ボタンのような光の具合を表現する場合のグラデーションを作るときにどのようにするだろうか。
多くの人は、オーバーレイグラデーションでスクリーンやソフトライトを使って、簡単に光沢を表現してるんじゃないだろうか。

簡単なグラデーション

簡単にキレイなボタンが作れるので、僕もこれでいいやと思ってしまうけれど、
ちょっとこだわる場合は、やっぱり自分で色を決めて作ろう。
つまり、明るい部分も暗い部分も自分で色を決める。
現実世界では、明るい部分は白っぽくなるというそんな単純なものではないよね。
日陰と日向では、単純に明るさだけで決まっているのだろうか?
いや、明るい部分は彩度も併せて上がっているはず。
だから、単純に白や黒を被せるだけのグラデーションはやめて、次のようにこまかく色を指定してみよう。

色を使ったグラデーション

やってることは単純。
グラデーションにそのまま色を使っているだけ。
だけれど、単純に白や黒を被せた場合とは明らかに違う。

キレイなグラデーションを作る

左側が、スクリーンで白を被せたグラデーション、
右側がきちんと色を指定したグラデーション。
明らかに右側のボタンの方が鮮やかなグラデーションではないかと思う。
もちろん、あえて彩度を抑えたボタンを作る事も可能。
だけど、スクリーンやソフトライトで生成された色ではなく、
全く同じだとしても意図的に色を指定したという点で大きく違ってくる。
指定する色によってもボタンの表情はどんどん変化する。
オーバーレイ効果に頼らずに、自分で色を表現できるともっとデザインの幅が広がって質が上がるだろう。

予算の関係や、納期までの時間がない場合には、使うこともあるかもしれないけれど、
良いデザインを作る場合は、こういった細かい部分までこだわりたい。
面倒かもしれないけれど、もっとデザインを上手くなりたい!というデザイナーは必ず意識して欲しい。

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

かわいいボタンの作り方

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

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

形を作る

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

ボタングラデーション

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

ボタンの枠を描く

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

ボタンを引き締める

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

ボタンの影

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

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

いろんなパターン

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

さりげない光沢感のシンプルだけどきれいなボタンの作り方

さりげない光沢感のボタン

さりげない光沢感のあるシンプルなボタンの作り方。
特に難しいことをするわけではないけれど、
デザインの1つのパターンとして覚えておけば役に立つでしょう。

Read the rest of this entry »

ちょっとした工夫でかっこいいボタンが簡単に作れてしまう

簡単にカッコいいボタン

ボタン一つでもちょっとした工夫でぐっとデザインセンスが良くなる。
いいデザインをする人ほど、細かい部分にこだわってデザインする。
だから、見た目は同じように見えても全体としてなぜだかプロのデザインって格好良かったりする。
さて、今回のボタンも見た目シンプルだけれど常に心がけておくだけでデザインがかなり向上するので、
今回の内容もメモして覚えておいて欲しい。

Read the rest of this entry »

シンプルだけどクールでかっこいいボタンをPhotoshopで簡単に作る方法

色んな形のボタン

最近凝ってるボタンのデザイン。
内側にさりげなく1本の線が入ったデザイン。
簡単だけど、これを使うだけでなんとなくプロっぽくてイケてるデザインになる。
あまり使いすぎるとよくないけど、
ちょっとデザインに迷ったらこれ使っとけばとりあえず格好良く見えると思う。

Read the rest of this entry »

こんなに簡単!きれいなガラス玉風ボタンを作る方法

今回はグラス風のボールボタン。
やることはスクエア風とほぼ同じ、そんなに難しくない。

これだけ覚えておけば大丈夫。Web2.0風のボタンを作る方法。  Web2.0風の輝くボタン

Read the rest of this entry »

簡単だけどカッコいい!!メタル風ボタンの作り方(Photoshop)

メタル風のボタンアイコン

ちょっと仕事でボタンを作らないといけなかったので、せっかくなのでここで作り方も公開する。
今回、特に新しいテクニックがあるわけではないが、
これらのボタンは簡単に作れるし、そこからバリエーションを増やせば簡単にカッコいいものがたくさん作れる。
今回大切なのはこれらのボタンの形をどうやって作るか。
シェイプの使い方がわかっていれば簡単。

Read the rest of this entry »

光沢のある綺麗なボタンを作る

今回も前回とよく似た光沢のあるボタンを作ってみる。
今回はボタンを作るのがメインではなく、光沢感を出すためのグラデーションの一つとしていつでも使えるようになってもらうのが目的。
ではどうぞ。。

Read the rest of this entry »

これだけ覚えておけば大丈夫。Web2.0風のボタンを作る方法。

Web2.0風の輝くボタン

いわゆるWeb2.0風って言われるようなボタンなどの素材。
既にいろんなところで頻出だけれども、これを知ってるだけで簡単にかっこいいデザインが出来るのでぜひ覚えておこう。

Read the rest of this entry »

Related Posts Plugin for WordPress, Blogger...