背景画像としては、なにかと便利な水玉(ドット)素材。素材配布サイトでもおなじみの素材ですが、欲しい大きさが見当たらないってことは、ありませんか?そんな時は、探すより作ってしまった方が、簡単です!今回は、画像作成・編集ソフトGIMPを使い、その作り方のポイントを説明します。水玉(ドット)の並び方を考えてみる↓↓↓下記の画像は、14ピクセル×14ピクセルの四角を作り、真ん中に4ピクセルのドットを配置したものです。これをCSSの指定で、敷き詰めてみます。↓↓↓サンプル1悪くはないけど、なんか単調じゃない?じゃあ、これで、どうよ?サンプル2うん、これで、いいけど、背景色をオレンジにしたいな!あと、背景は白で、ドットがグレーとかのも欲しいな~~~・・・・・・(>_<)注文多過ぎ!水玉(ドット)の並びは、こうなっているサンプル1↑↑↑並びのパターンを図にしてみました。単純に、水玉が、縦横一列に並びます。サンプル2サンプル2は、水玉が↑↑↑上の図のように、互い違いに、並んでいます。CSSでも、サンプル1で使った画像を使って、ドットを交互に並べるなんて、出来ない・・・?!いや・・・実は、ボックスを入れ子にすれば、出来るんですよ。図のような、画像を敷き詰めればいいわけです。透過を使えば、もっと使える素材に!さらに、画像の一部を透過し、CSSで背景色と組み合わせて設定すれば、1つの素材でいろいろと使えます。↓↓↓こんな素材を作ります。白色で作成する↓↓↓画像と背景色を組み合わせて設定します。背景色をオレンジにしたよ!透過したグレーの部分に、CSSで指定した背景色=オレンジ色が反映されます。背景色をグレーにしたよ!透過したグレーの部分に、CSSで指定した背景色=灰色が反映されます。こんな風に、背景色を変えるだけで、いろいろと楽しめます。GIMPで、水玉(ドット)素材をつくる!では、実際につくってみましょう!!今回は、16ピクセル×16ピクセル四方に、4ピクセルのドットを描きます。サイズは、お好みで変更してください。今回のような作成時には、グリッド線を出しておくと便利です。グリッド】を開いて間隔の設定を行ってください。小さい画像の作成なので、1ピクセルが便利だと思います。※作成途中では設定が変わらないようなので、キャンバスを開く前に設定した方がいいです。GIMPの画面を開きキャンバスの設定をするツールバーから【ファイル】→【新しい画像】を選択し、出て来た画面より【キャンバスサイズ】を指定。【塗りつぶしの色】は、【透明】を選択。サイズは、偶数にすること!ドット(水玉)を描く16pxを100%の画面で操作するのは、不可能なので、画面のサイズを大きくしましょう。800%以上の拡大は、ツールボックスのルーペで大きく出来ます。色は、白ブラシの大きさは適当に変えてください。今回は、4ピクセルのドットを描きます。ドットを描く位置キャンバスの真ん中に描きます。ルーラーと座標を見ながら位置を決めます。16ピクセル四方なので、縦横とも8ピクセルの位置に描きます。1回のポチっとしただけでは、ぼんやりとしたシミのようにしかならないので、何度かクリックしてください。→何度かクリックしていると、限界がやってきます。白く塗りつぶす綺麗に塗れていない部分を【ツールボックス】のバケツ【塗りつぶし】で、ジャーっとします。ドットは、とっても小さいので、綺麗に塗れていないと、ぼやけた感じで汚くなってしまいます。円じゃないよ??GIMPは、画像を点・ドットで表すので、曲線はありません。小さくすれば、丸っぽく見えるのでこれでいいのです。画像を保存してください。偶数で作成する理由16ピクセル×16ピクセル真ん中の画像の1/4が、角角に配置され、それが連なり、模様を形成していきます。15ピクセル×15ピクセルGIMPの画像を表す点(ドット)は、1ピクセルです。ベースの図形を奇数で作成してしまうと(この画像では、真ん中にある5px×5pxのこと)、角角に配置される画像が正しく4分割されません。これを連続させると、大(5px)と小(4px)のドットの連続になってしまうのです。シームレスにしなければ、奇数値で作成しても問題は、ありません。透過しているところに色を塗る続いて、反転バージョンを作ります。【ツールボックス】→【色域を選択】をポチっとする。白色の所ならどこでもOK。一か所ポチっとすると全部が選択されます。選択出来たら、パソコンのキーボード【Delete】キーを押すし、透過させます。→グレーの市松模様になればOK選択範囲を反転させ、白色に塗る現在、画像内で選択されている範囲は、透過した部分です。先ほど暫定的に色をつけた部分を白色にしたいので、選択範囲を反転し、色を塗っていきます。【ツールボックス】から、バケツ【塗りつぶし】を選択。色は【白】にし、ジャーっと塗ります。完成~~だよファイル形式・【GIF】or【PNG】で保存してください!!いろいろな、水玉(ドット)を作ってみよう~~~!下の水玉(ドット)。使ってみたい方は、ご自由にお持ち帰りください。※画像の直リンクは、おやめ下さい。右クリックで、ご自分のパソコンに保存してくださいね!背景に画像を設定する方法は、下記の記事をご覧ください。背景色:#3d3d3d↑↑↑黒の水玉は、同系色の背景にのせると、見出しタグとかに使えると思います。使うドットは、↓↓↓これです。分かりやすいように背景をつけています。普通は、こうなります。画像が16ピクセルなので、その半分の8ピクセル分だけずらした位置指定をする。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。29当Blogへようこそ管理人のルビと、申します。~~う、分からない事だらけ!!と頭をかかえ、ホームページビルダーと日々格闘中(?)です。初心者の方、一緒に覚えていきませんか?宜しくお願いします。