僕が良く使うウェブデザインテクニック的な色々(サンプルPSD有)

WEBデザイン

Photoshopの使い方が分からない!」なんてお話を聞くことがありますが、大半の方は実際にはPhotoshopというツール自体は使うことが出来ていて、分からないと言っているのは表現の仕方だったり、「他のデザイナーのサイトみたいにいい感じにする方法~」、みたいなのを知りたがっている人が多いように感じています。

僕もたまに聞かれることがありますが、デザインするとき意識してることとか、デザインテクニックだとか、そういうのを自分なりに説明したい時って、作り方を一から話すより、やっぱり既に作ってあるPSDのサンプル等を見ながら説明する方が断然早かったりするんですよね(僕が口下手だということもありますが)。サンプルがあって話をするのと、ゼロから作り方をお話するのとでは、教える側の時間も、教わる側の理解力も違ってくるんじゃないかと思うのです。

そこで今回は、僕が良く使うPhotoshopでのデザインテクニックと合わせて、数あるデザインメソッドを紹介してるサイトの中から参考になりそうな物も合わせてご紹介(PSDダウンロード有り)。

今回、説明用に作ったサンプルもPSDで配布させて頂きますので、何かの参考になれれば嬉しい限りです!

 

微妙なグラデーション

とにかく多いと思うのが、この分かるか分からないかくらいで表現している超微妙なグラデーションを使ってるサイト。サンプルでは、ボタンを例に上げていますが、これも本当に微妙なグラデーションを使ってちょっとリッチな感じに見せています。黒にしたのは僕の好みです。

参考になるPSD

 

微妙な二本の境界線

ナビゲーションなんかで使う境界線についても、ただ線を引くのでは無く2本の微妙に異なる色の線を使って、ちょっとリッチっぽさを出すことが多いですね。

参考になるPSD

 

微妙なテクスチャ

背景などに微妙なテクスチャを使ってちょっとしたアクセントをつける方法もすごく多いです。モニタによっては見えないんじゃないかってくらい微妙なテクスチャを使っていて、気にしてないと見逃してしまうこともありますが、有るのと無いのとでは受ける印象が大分違って見えることがあります。

参考になるPSD

参考になるサイト

 

ここまでのノウハウで作る色々

ここまでの微妙なグラデ微妙な二本の境界線微妙なテクスチャ等の表現方法を使って、今時のリッチな感じのエレメントを色々作ることが可能です。最後は参考までにいろいろぱぱっと作ってみました。(ちょっと手抜き臭が漂うのは頑張ってPSD作ったので許してください><)

 

 

もちろん、今回紹介した物以外にも様々なデザインテクニックは存在しますし、上のサンプルでもシャドウとか光彩とか紹介してない方法を色々使っていますが、その中でも最近僕がよく使うデザインテクニックを中心にまずはご紹介させて頂きました。もちろん僕の癖みたいなのも見え隠れしていると思うので、参考程度に見てもらえれば嬉しいです。

今回僕が作成したサンプルのPSDに関しては商用、改変はもちろん自由です。何かの参考になれたならコメント等残してくれると泣いて喜びます。また、念のためご紹介させて頂いた素材やPSDを配布しているサイトのライセンスはご自身で確認いただくようお願い致します。

デザインテクニックって、人によって意識していることは色々あると思いますが、こうやって自分の良く使う物をまとめたりすると、他の人のデザインテクニックも気になってきて、この記事を書いているだけでも色々な発見がありました。

これからも、自分が意識していることは出来る限りアウトプットしていければなと思います。

日々、収集している情報はFacebook Pageの方に流しているので、こちらも合わせてよろしくお願いします!

Pagetop