黄金のグラデーション素材です。
ホームページを作成する際に、ワンポイント的に使用するといいかと思います。
この素材は記事中なので縦型に表示していますが、ペイントなどで角度を変更したり、小さめの素材にしてから使用してみるといいかと思います。
黄金のグラデーション素材の使用例
bmp 画像での素材なんですが、ホームページ用にするにはあまり向いていない画像ファイルみたいです。
画像素材のファイル変換などをしてみてから使用するといいかもしれません。
黄金素材
RGB指定でグラデーション素材を作成
グラデーション素材をプロ級にきれいに作成する方法ではありませんが、個人で使う分には普通に機能するようなホームページ素材の作り方についてご紹介します。
当ホームページでは次のふたつの無料ツールを使わせてもらってます。
ご使用方法などについては、ダウンロードの際に付属してくるテキストファイルをご覧ください。
おおかまなグラデーション素材の作り方はこのような手順となります。
グラデーション素材の作り方手順
- グラデーションの始点と終点の色彩をパワースポイトで採取
- 始点と終点のRGBの値を確認
- グラデーション・コントローラーで確認したRGBの値を設定
- bmp 素材として表示させ保存
次は実際の作り方の例をご紹介します。
スタイルシートで縦方向のリピート素材は左右で違う
グラデーション素材をスタイルシートで縦方向へとリピートさせる場合、横方向へのリピートと比べて使い方が難しいようです。
横方向へのリピート：repeat-x;
縦方向へのリピート：repeat-y;
素材を縦方向へとリピートする場合、デフォルトでは一番左の列に縦方向へと一度だけリピートされるので、左側以外の中央や右側は素材が表示されません。
横方向の場合でも、一番上の列に横方向でリピートされるので、中央やフッターあたりには素材が表示されませんが、ホームページの場合、上下対称となっていなくても気にはなりませんが、左右対称でない場合は、多少アンバランスな感じがしてしまうものです。
そのようなわけで、あまりホームページで素材を縦方向でリピートさせるのは難しい気もしますが、当ブログでも左側はグラデーション素材なのですが、右側は似たような背景色を指定してのスタイルシートとなっています。
全面的にリピートさせてもよいのですが、いまいち出来栄えがよくなかったもので、似たような色彩でごまかした次第です。
そのような意味で、リピート素材を使用する場合、横方向へリピートさせる形で使用するか、もしくは、ホームページで全面的にリピートさせることをおすすめします。
縦横の全部の方向へとリピートさせる場合、素材によってはまだらになってしまったりする場合もありますので、左右反転させてくっつけるとかの工夫をしてみるとよいかと思います。
グラデーション素材の作り方の例
実際のグラデーション素材の作り方の例ですが、当ブログのグレイの背景をグラデーション化しようと思っていたので、それを例にご紹介します。
作り方の手順としては、まず、身近なところからこんな感じにしたいという色彩のサンプルを拾ってきます。
このブログはMTブログで作成しているのですが、今回は記事入力欄に適当なのがあったんで、こちらを参考にしてみることにしました。
このような感じの灰色グラデーション素材にしようと思うのですが、まずパワースポイトでそのあたりの色彩コードをいくつか拾ってきます。
灰色ならブラウザの部分やウィンドウズなどネット上のいたるところにありますので、適当にいくつか採取してみます。
これらの候補のなかから、灰色のRGBの値を調べてみると、r.g.b.共に170前後あたりから白へとグラデーションするとよさげのようなので、これで作成してみることにします。
グラデーション・コントローラーで170前後の値にRGBを設定してみると、このようになります。
R、G、Bの値を170に設定するのは、右クリックで切り替えながら、R,G,BそれぞれのY軸の値を170に設定すればOKです。
使い方の詳細はソフトウェア作者さまの説明書をご覧ください。
最終的に出来上がった灰色のグラデーション素材はこのような形でできあがりました。
忘れずに保存して、自分のサイトの素材用に加工したのちアップロードしましょう。
ホームページ素材の境界にはborderを
グラデーションなホームページ素材を作成したら、ホームページの背景画像へと組み込むことになるかと思いますが、その際、境界にはborderを設定しておくといいかと思います。
スタイルシートで設定していくわけですが、たいていは左側と右側に境界線を作成することになるかと思います。当ブログの場合はこのような感じでボーダー線を引いています。
スタイルシートへの設定方法ですが、境界を上、下、左、右のどれに設定するかと境界線のタイプ、幅、色彩をせっていします。グラデーション素材を背景画像に設定している箇所のひとつ内側の要素がいいかと思います。
通常、borderをスタイルシートに設定する際はこのような感じになります。
border-width: 1px; （線幅の値）
border-style: solid; （線の種類：実線、点線など。）
border-color: #000000; （線の色彩）
この場合だと、上下左右に境界線が1pxの幅で、黒い実線でひかれることになります。
左右だけに境界線を設定したいばあいはこのようになります。
border-right-width: 1px;
border-left-width: 1px;
border--rightstyle: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
これをまとめて書くこともできるので、最終的にはこんな感じするといいかと思います。
border-right: 1px solid #000000;
border-left: 1px solid #000000;
画像ファイルはバイナリーモードでアップロード
当ブログはレンタルサーバーで更新しているのですが、どうもサーバーを引っ越してからホームページ素材の画像がしわしわになってしまったようです。
これはおそらく、ホームページを引越しする際、ＦＦＦＴＰでファイルをアップロードしたのですが、バイナリモードとアスキーモードを取り違えてアップロードしたことが原因なのかなって思ったりしています。
バイナリーモード：画像や音声などのデータファイルのアップロード
アスキーモード：テキストファイルのアップロード
でも、画像によっては、ぐちゃぐちゃになっていないものもあるので、画像形式によっていろいろ違いが出てくるのかなって気もします。
いずれにしても、ＦＦＦＴＰなどのファイル転送ツールを使用して、ホームページを移動させる際には、画像ファイルの取り扱いには注意した方がよろしいのではないかと思います。
自分ではちゃんとアップロードしたつもりでも、実際に見てみると乱れた画像でアップロードされていたっていうこともあるかと思うので、サーバー移転の際には気をつけてみるといいかと思います。
有料ホームページ素材購入のおすすめサイト
当ブログでは、グラデーション素材を自分で作成してはいますが、クオリティー的な面を求める際は有料素材を購入してしまった方が一番かんたんです。
グラデーション素材の作り方をご紹介している当サイトではありますが、実際に背景素材として使用している画像は購入したものなんです、、。
私はFotoliaで購入しているのですが、写真素材のほかにも、イラスト素材やホームページの背景として使用できるグラデーション素材など、たくさんの種類を購入することができて便利です。
インターネット上のサイトで、たまによく見かける素材などもありますが、たまにかぶってしまうこともあったりしてしまって、、。
１画像あたりの価格単価が安いですので、ついついいろんな素材を購入してしまいますが、それはそれで楽しいものかと思います。
特に商用サイトの場合、ホームページ制作会社や画像作成業者に依頼するとかなりな額がかかってしまいますが、有料のホームページ素材を購入してしまった方がぜんぜん安上がりなのではないかという気がします。
ちなみに、購入したあとの背景素材のスタイルシートへの設定方法については、こちらのページが参考になるかと思います。