こんにちは、株式会社キタオでWebデザイナーをしている辻本と申します。
今回はよりデザインに重点を置いたIllustrator・Photoshopの裏ワザを紹介させていただきます。
まずはこちらの画像をご覧ください。
実際に私がグラデーションを使って５分でボタンを作成してみました。
みなさんはどちらが見やすい、押したいと思ったでしょうか。
断然、左側のボタンだと思います。
グラデーションツールは手軽に要素を目立たせることの出来るものですが、
使い方を間違えると一気に素人の制作したものだと思われてしまいがちです。
そこで、今回は皆さんに簡単に、なんと５分でできる本格的なグラデーションの作り方を伝授したいと思います。
①HSBモードを使用して色相を統一
HSBモードというカラーモードは、H(色相)・S(彩度)・B(明度)という３つの要素で構成されています。
この要素の中の”色相”を固定することで、まとまったデザインを作成することができます。
②色の差を小さくする
色の差とは、先程説明したHSBモードにて、固定した色相を除く残り２つの要素、
彩度と明度の差のことです。
できるだけ最初に決めた色に近い色、ぱっと見てもあまりわからないぐらいでOKです。
最初に見ていただいた画像でわかるように、このぐらいの方が自然で美しいグラデーションになります。
下記が実際に最初に作成したボタンに使用している２色です。
同じ色相で、彩度と明度はあまり差がないことがわかると思います。
いかがでしたでしょうか。
グラデーションを上手く利用すると、簡単に本格的なサイトを制作することができます。
是非活用してみて下さい。
パソコン教室morimori Illustrator講座に興味を持っていただいた方
ぜひこの機会にどうぞ。
Illustrator講座の詳細はこちらになります。
パソコン教室morimoriは随時無料体験をやっております。
関連するブログ
パソコン教室morimori Illustrator講座紹介
Illustratorの仕事で使えるさまざまなオブジェクト効果
Illustratorで簡単に本格的なグラデーションを作成する裏ワザ
