無料の配色ツールを使いセンスの良いアイキャッチやバナーを制作しよう

ヘッダーやアイキャッチを初め画像を制作するときに、色の組み合わせに苦労します。

好きな色は見つけたけど、それを画像作成で使うにはどうしたら良いのか分からないことがありませんか？

 

その色にマッチする色を２～３つ知りたいのに、良くわからないって事があったりします。

そのような時は、無料の配色ツールを使うと簡単に解決することがあるので紹介します。

 

 

画像を作成する時に使う無料ソフトとして、GIMPが最も有名です。

GIMPを初めとして、Inkscapeもよく使われています。

 

 

両方のソフトを使っていましたが、高機能でも時間がかかるというデメリットがあります。

 

できるだけヘッダーやバナーを作る時間は節約をして、記事を書くことに注力したいものですよね。

 

 

そのために、私はブログやサイトのバナー制作専用の有料のバナープラスを使っています。

このバナープラスは、短時間で高品質のバナーが作れるソフトです。

誰でも簡単に使えるのでおすすめです。

 

 

そういうツールを使う時には、色の表現法である「RGB」や「6桁の16進法で表されるカラーコード」を使います。

 

この２つの「RGB」⇔「6桁の16進法で表されるカラーコード」の相互変換ができるツールが必要になることがあります。

 

 

 

https://www.peko-step.com/tool/tfcolor.html

このPEKO STEPには、透過画像が作れるツールや他の便利なツールがあるので、とても使い勝手の良いツール集です。

 

 

 

 

 

http://colorblender.com/

 

 

自分の使いたい色があれば、RGBの値にそれぞれ入れれば、その色に合う色が５つ表示されます。

 

例えば次の色を使いたいとします。

 

 

colorblenderのRGB　37/219/186を記入すると、次のように合う色の組み合わせが表示されます。

 

 

 

 

 

https://www.materialpalette.com/

 

 

19色が表示されています。この中からメインカラーとアクセントカラーの2色を選びます。

すると右下にそれに合った8色のパレットを表示します。

 

右上にパレットを使ったサイトのプレビューが表示されるため、イメージが掴みやすいですよ。

気に入ったパレットは、CSS、XML、PNGなど7つのフォーマットでのダウンロードができます。

 

 

http://hue360.herokuapp.com/

 

 

シンプルで使いやすいツールです。メインカラーを決めるだけで、自動で相性の良い色が表示されます。

。

 

 

選んでいった色は画面下に表示されていき、「Print　User　Color」をクリックすると選んだ配色のカラーコードを確認することができます。

 

 

バナープラスを起動して、ベースの色とそれに合う色の組み合わせを次のようにしました。

 

 

 

 

 

ベースカラーを決めます。

配色ツールから色を選んだHTML#FF8600を貼り付けると上のようにベースカラーが表示されます。

 

 

 

水色の枠線は#80FBFFを使用。

 

 

 

画像は透過画像にしないと、上のように白い部分が残ります。

 

PEKO STEPの透過画像ツールを使うことで白い部分が透けます。

 

 

 

 

 

透過画像を使えば、次のように不要な白い部分が透過した画像で素敵なバナーができます。

 

 

バナープラスはとても使いやすく、沢山の画像もついており素早くバナー、ヘッダーが作成できます。

 

 

＞＞超簡単！自分で「凄いバナー」が作れる！【バナープラス】の詳細を見る