Archive for the ‘素材作り’ Category

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

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

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

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

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

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

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

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

簡単なグラデーション

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

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

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

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

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

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

たった3ステップで作れる!! webデザインで必須の手書きのラインを作る方法

今回はwebデザイン制作で超人気のテクニック、手書きラインをご紹介します。ええ
どんなものかというと、

このような手書き風のラインです。

案外作り方がわからなかったり、素材を探して時間がかかってました。
しかし、

とっても簡単に3ステップで作れるんです!

それではご紹介します。

 

1ステップ

photoshop長方形ツールで、横500px、縦1pxの線を描く。

 

 

2ステップ

 

描いた長方形を複製する。

 


3ステップ



フィルター>ノイズ>ノイズを加える
を選択。
ノイズを図のように150%を選択する。

完成です。後は不透明度、レイヤースタイルを変えたりすれば
手書き風ラインにより近づきますよ。

 

フローや流れ図を作るのに必須!Photoshopで完璧な円環チャートを作る方法

久しぶりの投稿です。
デザイナーを雇ってから、自分がデザインすることが減ってしまってこのチュートリアルもしばらく書かないでいたのですが、
全く更新していないこの間にもアクセスは順調に増えておりまして、
月に15000PV以上も見ていただいています。

未だ仕事が多いときなどヘルプでデザインに入ったりしていますので、
そんな中でチュートリアルとして出せそうなものをこれからも出していければと思っています。

Read the rest of this entry »

Photoshopでおしゃれなリボン風ラベルを作る方法

かわいらしいリボン風ラベル

かわいらしいリボン風のラベルを作ってみる。
複雑に見えるけど、やってることは難しくないのでやってみてください。

Read the rest of this entry »

Photoshopで作る、左側がふわっと浮いたオシャレなラベル素材

左側がふわっと浮いたラベル素材

ホームページのデザインに使えるオシャレなラベル。
単なるドロップシャドウではなくて、ちょっと工夫してオシャレな感じのラベルにしてみる。

Read the rest of this entry »

Photoshopで点線を使った縫い目風デザインを一から作る方法

縫い目風のデザイン

前回は点線の描き方をやってみた。
点線を描くことが出来れば、簡単に縫い目風のデザインを作ることが出来る。

Read the rest of this entry »

フリー素材に頼らない。テープ素材を自分で好きなように作ってみよう。

テープ素材の作り方

テープをぺたっと貼った素材を自分で作ってみる。
自分で作れると、好きな形に作れるのでとても便利。
そんなに難しいものではないのでさくっと作ってみてほしい。

Read the rest of this entry »

Related Posts Plugin for WordPress, Blogger...