黒のグラデーション素材を作ってみました。

今回のグラデーション素材は黒です。

素材の出来栄えはこのような感じです。

【png :3.48 KB】

黒はわりとぶなんな素材かと思いますが、フォントの色彩を白に指定して素材の上に文字を書くパターンが多いようです。

個人的には、真っ黒よりも、多少青みがかった黒の方がいいような気がするのですが、次回は紺色っぽい黒の素材を作成してみる予定です。

約1年ぶりのブログ更新となってしまいましたが、その間、ホームページを作成するにあたって、気がついたことがあるので、いくつか書いておこうと思います。

まず、画像素材のファイル容量なのですが、BMPで保存した場合とPNGで保存した場合ではかなりの違いがあるようです。

例えば、上の黒の素材は png で保存しなおしたものですが、bmp のまま保存した場合の 288 KB と比較すると、わずか 3.48 KB になっています。

こちらが bmp でそのまま保存した際のグラデーション素材です。

【bmp :288KB】

見た目はほとんど変わらないかと思いますが、約82倍もファイル容量が縮小されるなら、PNGで保存した方がいいのではないかなと思います。

bmp と jpg、そして png では、ファイル容量が違うということは認識しておりましたが、正直、たいしたかわんなくね?と思ってました。でも、けっこう違ってくるもんですね...。

レンタルサーバーでホームページを作成している場合など、転送量が関係してくるケースもあると思うので、グラデーション素材を保存する際は、なるべく png で保存した方がいいような気がします。

濃い緑の素材

今日は緑のグラデーション素材を作成してみました。

緑のグラデーション素材

以前にも確か、緑色のグラデーション素材を作ってみたのですが、いまいち明るめだったんで、作り直してみた次第です。

サプリメント系のブログでアフィリエイト収益がどんどん増大中なんで、味をしめてホームページを増産しようと考え中なんです。

やっぱ、健康系のホームページっていうのは、落ち着く感じがいいと思うんですけど、そう考えると目にもやさしく、安らぎのイメージのある緑かなって、、

ぶっちゃけ、広告はきれいなのが多いんで、素材自体は地味なのでいいのではないかなって気がします。

最近、ピカサっていうグーグルの画像編集ツールをダウンロードしたみたんですが、なかなかいい感じなんで、今度はその無料ツールをつかっていろいろ加工してみようと思います。

銀色のグラデーション素材

今回は銀色のグラデーション素材に挑戦してみたのですが、いまいちうまくいきませんでした。

シルバー素材のできばえとしてはこんな感じです。

銀色グラデーション素材

急激なグラデーションすると、どうもギャップが激しくなってしまうようで、試しにこのブログの背景に設定してみたのですが、「うーん。」という感じです。

素材のブログ設定

多少まぶしくなってしまう箇所があったりして、またやり直そうと思います。

このブログの背景素材はグラデーションブログなのに、素材ではなく、色彩コードで設定しているので、何か適当な素材を作って背景画像に設定したいと思います。

シルバーの色彩には、スタイリッシュな印象をかもし出す効果があるようで、高級感とかセレブなイメージがあるようです。

都会派のセレブなブログを運営されている方におすすめな背景画像です。

紺色素材

紺色の落ち着いた感じのグラデーション素材を作成してみました。

紺色グラデーション素材

ダークブルーとかディープブルー、もしくはネイビーブルーとよばれる紺色ですが、青の濃い色彩なんで、落ち着いた印象がかもし出されるようです。

ホームページ素材としてはよく使われる系統の色彩ではないかなと思います。

一般的なアンカーテキストは、#ooooff あたりの青いリンクとなっているのが一般的ですが、ホームページ全体も青系統の色彩で統一して、アンカーテキストがよくなじむふいんきにすると、クリック率が向上するようです。

特に、アフィリエイトリンクは青にするというのが統計上ではもっともクリックされる率が高いようです。

グーグルやヤフーの検索結果で使用されているアンカーテキストの色彩は、#oooocc や #0000de など人間の目では判別できないわずかな違いではありますが、同じように見えても微妙に違います。

けれども、基本的には「アンカーテキストは青いリンク」というのははずせないようです。

アンカーテキストは青って決まっちゃってるんで、あとは、背景の色彩との組み合わせを変化させるぐらいしかないと思いますが、その際はやはり紺色などの青系統の背景素材を使用するのが一番ぶなんなのではないかなと思います。

ビジネススーツもたいていは黒とか紺色ですが、紺色は信頼感を与える色彩みたいです。

オレンジ色のホームページ素材

オレンジ色の色彩は、社交的で明るいというイメージがあるようです。

暖色系の色なので、多少温かみのふいんきを醸し出せるのかもしれません。

オレンジ色のグラデーション素材を作成してみたのですが、これもどうも若干薄い色になってしまったようです。

オレンジ色のグラデーション素材

食べ物関係のグルメブログの背景画像によさそうな気もしますが、今度はもう少し濃い目のグラデーション素材を作ってみようと思います。

R.G.B.的には、ブルーが少なめにして作成するといいようです。

グラデーション素材を作成するときは、最初の色彩をある程度は濃い目の色からはじめるときれいめの素材ができるような気もします。

緑色の無料素材

緑色のグラデーション素材を作成してみました。

色彩のなかでも、緑系統のものは安らぎとか、自然とかとても落ち着く色だと思います。

緑のグラデーション素材

緑は目にもやさしいですし、赤とは補色の関連にあるようですので、長時間滞在するようなホームページやブログに取り入れてみるといいかと思います。

けれども、商品を販売するサイトの場合は、緑色で落ち着いてもらうよりも、衝動買いねらいの赤系統でまとめる方がいいかと思います。

楽天など商品を販売しているサイトではあまり、緑系統の背景素材は使用されていないようです。

おすすめは、自然環境関連のホームページやブログの素材として使用したり、お子さまがアクセスするようなサイトに取り入れておくと安心感が出てくるかと思います。

上のグラデーション素材はもう少し濃い目の緑にしようと思ったのですが、どうもうまくいかなかったようです。また今度作ってみようと思います。

青色グラデーション素材

青色のグラデーション素材です。

両端で色彩が違いますので、スタイルシートでリピートして使用する場合はペイントで反転加工させたりして、まだらにならないように組み込んでみるといいと思います。

背景画像へ素材を組み込んだ際のブログの例

青色グラデーション素材の例

青色グラデーション素材はこちらです。

青色グラデーション素材

黄金素材

黄金のグラデーション素材です。

ホームページを作成する際に、ワンポイント的に使用するといいかと思います。

この素材は記事中なので縦型に表示していますが、ペイントなどで角度を変更したり、小さめの素材にしてから使用してみるといいかと思います。

黄金のグラデーション素材の使用例

黄金のグラデーション素材の使用例

bmp 画像での素材なんですが、ホームページ用にするにはあまり向いていない画像ファイルみたいです。

画像素材のファイル変換などをしてみてから使用するといいかもしれません。

黄金のグラデーション素材

有料ホームページ素材購入のおすすめサイト

当ブログでは、グラデーション素材を自分で作成してはいますが、クオリティー的な面を求める際は有料素材を購入してしまった方が一番かんたんです。

グラデーション素材の作り方をご紹介している当サイトではありますが、実際に背景素材として使用している画像は購入したものなんです、、。

私はFotoliaで購入しているのですが、写真素材のほかにも、イラスト素材やホームページの背景として使用できるグラデーション素材など、たくさんの種類を購入することができて便利です。

Fotolia

インターネット上のサイトで、たまによく見かける素材などもありますが、たまにかぶってしまうこともあったりしてしまって、、。

1画像あたりの価格単価が安いですので、ついついいろんな素材を購入してしまいますが、それはそれで楽しいものかと思います。

特に商用サイトの場合、ホームページ制作会社や画像作成業者に依頼するとかなりな額がかかってしまいますが、有料のホームページ素材を購入してしまった方がぜんぜん安上がりなのではないかという気がします。

ちなみに、購入したあとの背景素材のスタイルシートへの設定方法については、こちらのページが参考になるかと思います。

グラデーション素材とcss