Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Tiled Backgrounds Designerで背景画像を簡単に作る

[スポンサード リンク]


Webサイトの背景画像に困ったらこのサイトがお勧め!
Tiled Backgrounds Designerは背景画像が簡単に作れる超便利サイトです。
英語サイトですが何となくでも使えてしまうほどわかりやすい作りです。

Tiled Backgrounds Designer

Tiled backgrounds designer

Tiled Backgrounds Designerの使い方

Tiled Backgrounds Designerはとても簡単なので順番通り進めていくといつの間にか素晴らしい背景画像が出来あがっちゃいます。

:: 基本動作 ::
右側にリアルタイムプレビューがあるので凄く使いやすくてイイです!

■Apply background
このサイトに設定中の背景画像が適用されます。
小さなプレビューではイメージが掴めない時などに良いです。

■Download image
背景画像を作り終わったら、ここをクリックしてダウンロードします。(jpg)
※背景画像の設定法は下の方に書きます。

■Save to "May Patterns"
アカウント登録が必要です。
作ったパターン(背景画像)をTiled Backgrounds Designerに登録出来ます。

Tiled Backgrounds Designerではパターンのチャンピオンを決めたりしているみたいです。
サイト下部にAbsolute Champion、Today Champion、Top rated、Recently createdなどが見れるようになってます。 作る際の参考になるかもしれませんね。

Color

まず色を決めましょう!
上がマークの色で、下が背景色です。
Background Color Changeをクリックすると、背景色の選択になります。
どちらも右側のカラーピッカーを使ってお好きな色を選択します。

Canvas

キャンバスです。カンバスともいう?
テクスチャみたいなもので、背景色にほど良いざらつきや質感を与えます。
トゥルトゥルの背景色とは、印象がだいぶ違くなるのでお勧めです。

Size
キャンバスのサイズを変更します。(ピクセル単位)
数値のところをクリックするとスライダが出ますので数字を打つ必要ありません。
縦横のサイズをそれぞれ変更したい時は上部の鎖アイコンをクリックします。

Image

数字入力の際は、先程と同じようにスライダを使ってもOK!

Image scale

イメージ(マーク)のサイズをお好きなサイズに変更します。

Location

5つ型にするか、4つ型にするかの設定です。
背景画像はリピートさせて使うので、マークの密度の設定です。
Apply backgroundでサイト全体に適用するとわかりやすいと思います

Image opacity

イメージ(マーク)の透明度を設定します。

あくまで背景なので、色が濃いなら小さめで色が薄いなら大きめみたいな感じでブレビューを見ながら最適なサイズを探しましょう。

イメージの種類
Scrolls(巻き物系)、Stars(星) 、Flowers(花) 、Hearts(ハート)、Signs(サイン)、Trees(木)、Miscellaneous(その他)です。

Rotate

マークを回転させる事ができます。
あらかじめ45°ずつに分けられた数字をクリックしてもOKだし、スライダをつまんで回してもOKです。
スライダ移動で、微妙な角度が決めづらい場合は、数字欄に直接入力してもOK!

どうですか?簡単に超カッコいい背景画像が出来ちゃったでしょ。
こんなに凄いマークを自分で作ってたら、気が暮れてしまいますよ。マジで。

おっと、忘れるとこだった…(;´∀`)
これからCSSで背景画像を指定する方法をご紹介します。
背景に関する属性(下記)を全部まとめて設定する方法でいきたいと思います。

  • background-color : 背景色の設定
  • background-image : 背景画像の設定
  • background-repeat : 背景画像の繰り返しの設定
  • background-attachment : 背景画像の配置の設定
  • background-position : 背景画像を固定する設定

単純に全ての属性の値だけを半角スペースで区切りながら書き込むだけ。
順番は関係ありません。また、省略した属性はデフォルトになります。
あぁなんて楽なんだ~

background{url("画像URL") #○○○;}

あら、背景画像の設定以外はデフォルトでOKだから簡単でしたね。
背景画像と背景色を同時に指定した場合は背景画像が優先されます。画像が表示されなかった時用に背景色の設定をしておくと良いかもしれません。

というわけで、Tiled Backgrounds Designerを使ってハイセンスな背景画像作ってWebサイトをより素敵に演出してください。

Comments

Comment Form