グラデ


先日、新しく、Twitterのアカウントを作りました。

昔から、とても短い小説を書くことが好きなので、創作お題botを作ろうと思ったんです。

こういう場面の小説を書きたいなあ、なんていうものを、短文にまとめて、ツイートしています。

後から、小説のネタを考えるときに、引き出しの代わりになるように、とも考えて、作りました。

と、それは今回の記事の主題ではありません。





フリーのグラデーションツールで、あっという間に綺麗なグラデーションが作れる

ネット上のサイトに組み込まれているツールを使って、簡単に綺麗なグラデーションを作ることができるんです。

IMG_9217


こんな風に、シンプルなグラデーションが簡単に作れます。




グラデーション画像メーカー


46
グラデーション画像メーカー



こちらのサイトで作りました。
とっても簡単です。

拡大すると、画質は荒いですが、Twitterのヘッダーに使うくらいの用途なら、十分です。


高画質で、丁寧な配色をしたいのなら、Photoshopなどのソフトを使うべきですが、今回の目的は、手軽にパパッと無料でシンプルなグラデーション画像をゲットすることです。
 


上記の、グラデーション画像メーカーは、2色を指定して、パレットで微調整しながら、グラデーションをカスタムするツールです。

しかもです。
縦横のピクセル比を自由に設定できます。

さらにです。
グラデーションの方向を縦と横から選択できます。


ところで、2色を自分で選べることはいいのですが、素人なので、色の組み合わせの、良し悪しがわかりませんよね。


そんな場合は……


shade

57
shade


このサイトが、断然おすすめです。

ベースの色を選ぶと、その色と、もっとも相性のいい色とのグラデーションが、自動で作られます。

もちろん、好きな2色を選ぶことができますが、パレットが表示されず、スライドバーでの調整なので、ピンポイントで、この色!と選ぶのが難しいです。


ですが、素晴らしいことに、彩度や明度、グラデーションの左右の方向を、ゲージをスライドさせることで、かなり細かく調整できます。

「グラデーション画像ツール」よりも、こだわって作ることができす。


どちらかというと、こちらの「shade」の方が機能は充実していますが、手軽さでは、「グラデーション画像メーカー」が、やや便利です。




色を選ぶのに困ったら、『WEB色見本 原色大辞典』


27
WEB色見本 原色大辞典


WEB用のカラーが見やすくまとめられているサイトです。

原色、和色、洋色、パステル…etc.

系統別に分けられているので、好きな色が、簡単に見つかります。


全ての色の見本に、カラーコードが記載されているので、それをコピペして、先ほどの、グラデーションツールの、色を指定する場所に貼り付ければ、好きな色を、ピンポイントで指定できます。

コードは「#000000」という部分です。
このサイトは、webのデザインを作る際には、とっても役に立ちますので、ぼくはブックマークしています。

よく使うんです。意外に。

シンプルで、気に入っています。


こんな風に使ってみました

29
@dokokaraka


ぼくは、個人的に、Twitterのヘッダーは、シンプルな方がいいと思っています。

アイコンが、主役なので、ホーム画面をみたときに、アイコンとヘッダーの印象が、両方強い画像だと、お互いを打ち消しあってしまいます。

だから、どちらかはシンプルにするのがいいです。

そういう意味で、グラデーションをヘッダーにするのは、ありですね。

相性が良かったら、両方強い画像でもいいとは思うのですが。