素材作成の無料ツール

グラデーション素材の作成ツールには、Adobe の Photoshop やマイクロソフトの Expression などがありますが、無料で作成できるソフトウェアも公開されています。

特に、ベクターのグラデーション無料ツールがとても使いやすいです。

R.G.B. グラデーション・コントローラー

自分で作成することができますので、手作り感のあるホームページテンプレートが作成できるのではないかと思います。

自分で素材を作成してみて、それを自分のホームページのスタイルシートに組み込んで使ってみるとよいのではないかなと思います。

グラデーション素材の css スタイルシートへの組み込み方法

そのほか、初心者簡単なペイント加工の仕方や色彩のコード表示方法、画像ファイルの種類などについて更新していく予定です。

RGB指定でグラデーション素材を作成

グラデーション素材をプロ級にきれいに作成する方法ではありませんが、個人で使う分には普通に機能するようなホームページ素材の作り方についてご紹介します。

当ホームページでは次のふたつの無料ツールを使わせてもらってます。

ご使用方法などについては、ダウンロードの際に付属してくるテキストファイルをご覧ください。

おおかまなグラデーション素材の作り方はこのような手順となります。

グラデーション素材の作り方手順

  1. グラデーションの始点と終点の色彩をパワースポイトで採取
  2. 始点と終点のRGBの値を確認
  3. グラデーション・コントローラーで確認したRGBの値を設定
  4. bmp 素材として表示させ保存

次は実際の作り方の例をご紹介します。

グラデーション素材の作り方の例

実際のグラデーション素材の作り方の例ですが、当ブログのグレイの背景をグラデーション化しようと思っていたので、それを例にご紹介します。

作り方の手順としては、まず、身近なところからこんな感じにしたいという色彩のサンプルを拾ってきます。

このブログはMTブログで作成しているのですが、今回は記事入力欄に適当なのがあったんで、こちらを参考にしてみることにしました。

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

このような感じの灰色グラデーション素材にしようと思うのですが、まずパワースポイトでそのあたりの色彩コードをいくつか拾ってきます。

灰色ならブラウザの部分やウィンドウズなどネット上のいたるところにありますので、適当にいくつか採取してみます。

色彩コードの採取

これらの候補のなかから、灰色のRGBの値を調べてみると、r.g.b.共に170前後あたりから白へとグラデーションするとよさげのようなので、これで作成してみることにします。

グラデーション・コントローラーで170前後の値にRGBを設定してみると、このようになります。

グラデーション・コントローラーで素材作成

R、G、Bの値を170に設定するのは、右クリックで切り替えながら、R,G,BそれぞれのY軸の値を170に設定すればOKです。

使い方の詳細はソフトウェア作者さまの説明書をご覧ください。

最終的に出来上がった灰色のグラデーション素材はこのような形でできあがりました。

完成した灰色素材

忘れずに保存して、自分のサイトの素材用に加工したのちアップロードしましょう。

画像ファイルはバイナリーモードでアップロード

当ブログはレンタルサーバーで更新しているのですが、どうもサーバーを引っ越してからホームページ素材の画像がしわしわになってしまったようです。

これはおそらく、ホームページを引越しする際、FFFTPでファイルをアップロードしたのですが、バイナリモードとアスキーモードを取り違えてアップロードしたことが原因なのかなって思ったりしています。

バイナリーモード:画像や音声などのデータファイルのアップロード
アスキーモード:テキストファイルのアップロード

でも、画像によっては、ぐちゃぐちゃになっていないものもあるので、画像形式によっていろいろ違いが出てくるのかなって気もします。

いずれにしても、FFFTPなどのファイル転送ツールを使用して、ホームページを移動させる際には、画像ファイルの取り扱いには注意した方がよろしいのではないかと思います。

自分ではちゃんとアップロードしたつもりでも、実際に見てみると乱れた画像でアップロードされていたっていうこともあるかと思うので、サーバー移転の際には気をつけてみるといいかと思います。