■テンプレートギャラリーを使用する


テンプレートギャラリーは、かなり便利なものですので、使ってみてください。画像を目で見ながら探すことが出来るので、重宝しています。(*^_^*)


■上のツールバーののボタンを押します。表示、非表示が切り替わります。


■目的に応じて、表示する内容を選択します。
ウェブアート素材を選べば、ボタン、ロゴ、ロールオーバー、図形などの変更可能な画像等が表示されます。



■素材を選べば、ビルダーに入っている素材や、他の自分の作成したフォルダを表示させることが出来ます。素材をダウンロードして、任意のフォルダに保存しているときは、ここでフォルダを探せば、素材が画像として表示されるので、探しやすくなるのです。

■素材では、よく使うフォルダを開いて、ブックマークしておくと便利です。IEでのお気に入り機能とほぼ同じです。



■ファイルの表示ですが、まず、保存形式別の表示を選ぶことが出来ます。
例えば、「PNGの画像をさがしてる！」といった場合は、
すべての使用可能なファイルから、PNGファイルに変更すれば、PNGファイルだけ表示されて便利です。



■下方にある、表示、設定、挿入を開いて、自分の使いやすい設定に変えてみてください。



表示には、こういった機能があります。



サムネイル表示にすれば、画像も表示されます。リスト表示だとファイル名等の情報になります。
原寸大で表示にすると、選択している画像が、別画面で原寸大で表示されます。
こんな感じですよ。(*^_^*)


■設定では、これら↓の設定が可能です。
画像の表示枠サイズ等を変更してご自分の使いやすい大きさにしてください。
背景色の変更で、背景に色を入れると、透過されている画像か、されていない画像がわかりやすくなります。素材屋さんをしてる方は、チェックするのに便利かも。




■挿入は、↓のことが可能です。名前の変更などは、便利です。
挿入はこの手順でもOKですが、ドラッグドロップや、ダブルクリックで、編集画面に貼り付けることも出来ます。

■WEB用に保存します。

■キャンバスの上に↓のような状態で、バナーベースを作っているとします。

上の6個のバナーは、バナーの上にアイコンを重ねて配置している状態です。
下の1個のバナーは、その中のひとつを切り抜いて、一枚のオブジェクトにしてあります。


■保存したい画像を選択しておき、ファイル→WEB保存ウィザードか、右クリックでWEB保存ウイザードを選択します。

選択している状態です。

バナーの上にアイコンを置いたものを切り抜いてあります。一枚のオブジェクトになっています。



■選択した状態で、ウィザードを開いているので、選択されたオブジェクトを保存するを選びます。

■選択しないで開いた場合は、保存するオブジェクトを指定するするで選択してください。



指定を押すと、下の画面が現れます。
この時、オブジェクトごとに表示を選べば、重なっているものも別々に表示されます。
重なっているものをまとめて表示を選べば、バナーの上にアイコンが重なっている状態で表示されるので、文字入れの時など、便利です。



■上のどちらかで選択し、次にこの画面になります。
この説明の通り、gif、jpeg、pngなどを選びます。
この場合は、gifにしました。
*　GIFと、PNGは透過が可能です。
*　写真などは、JPEGがお勧めです。




■GIFを選んだ場合の画像です。
設定前の画像と設定後の画像を見比べながら、色数を減らして、ファイルを軽くする作業や、透明化、背景色など設定します。



※ディザ(誤差拡散)ありとディザなしの違いは、この画像を参考にしてください。


PNGで保存したカブトムシです。減色していない状態で保存できています。


サイズは2.6キロです。





ディザなしで、色数を8色に落としたgif画像です。
1キロ





ディザありで、色数を8色に落としたgif画像です。
1.1キロ


原寸ではわかりづらいので、拡大します。




ディザなしで、色数を8色に落としたgif画像です。
1キロ



ディザありで、色数を8色に落としたgif画像です。
1.1キロ



違いがわかりますでしょうか。(~_~;)気持ち悪い画像でごめん・・・。
ディザありにすると、誤差拡散効果で滑らかに見える場合があります。が、好みの問題もあるので、お好きな方を選んでくださいね。


■透明化にチェックを入れると、透明属性にしてある部分が透明になります。
この画面で一部を透明化したいときは、スポイトを押して、表示されている画像の透明にしたい色の部分をクリックします。


■インターレスは、画像が表示される時の表示のされ方です。普通は画像の上から順に表示されてくると思うのですが、ここにチェックを入れておくと、まず画像が荒くぼやけた状態で原寸で表示され、だんだんと鮮明になっていくというものです。

ファイルが重くなったり、軽くなったりという場合があります。

※カウンター画像の場合、使えない場合がありますので、チェックをはずしておいた方が無難だと思います。


■背景色は、特に透過画像を扱う時に必要です。

作成したオブジェクトの周りがアンチエイリアスがかかっている場合、（ぼやけてたり、半透明だったり。）ここで指定した色を背景色にして、GIFが出来上がります。
黒い背景で使うはずの画像なら、黒背景で透過しておかないと汚くなります。
例えば、ロゴ作成ツールで下のWELCOME！を作ったとします。
文字の塗りつぶし部分の黄色部分は、少し透明（10パーセント程度）にしています。


透過時背景が白のままだと文字の周りに白い部分が残り、黄色部分の透過属性をつけたところも、白背景で保存されているので、透けているように見えません。



こちらが、黒を背景色にして保存した画像です。
画像の縁が綺麗に見えます。黄色の部分の透けている効果を狙ったところも（わかりづらいですが）満足できる出来です。






逆に白系背景で使うと、こんな感じです。



■ご自分で使う場合は背景色にあわせて設定して置きます。
素材として配布するなら白、黒、グレーなどの3色分作る、あるいは、背景の壁紙等もいっしょにデザインしてその色で透過しセット素材として配布するなど、選択肢はあると思います。





■ここはお好みで選んでください。
HPビルダーに貼り付けても、結局は保存することになるので、一度ファイルに保存しておいてもいいとおもいます。
素材をたくさん作る時は、ファイルに保存しておいて、後でゆっくりHTMLに配置していった方が楽かな？

パーソナルフォルダに保存は書いてある通り、パーソナルフォルダというフォルダの中に保存するというだけのことです。たぶｎ





■ファイルに保存を選んだ場合、半角英数字で保存してください。

カウンター数字など、同じファイル名を使う場合が出てきます。
その時はフォルダを作って、その中に入れてくださいね。

imageフォルダなどをつくり、その中にも壁紙用のフォルダ、カウンター用、アイコン用などとはじめから分類して入れておくと、探すのが楽になります。素材を多く作ると、乱雑になりやすいので、早めに整頓しておいてね。
いつも探しまくる状態になるよ・・・・・・・・・・。


■はじめの画像にもどって、出来上がったものがコレです。↓

　　　　　

■メニューバーのファイルをクリックします。



■キャンバス全体をそのまま保存したいときは、名前を付けてキャンバスを保存を選択します。
一度、名前を付けて保存すれば、上書き保存でＯＫです。メニューバーのフロッピーのアイコンを押していただいても同じです。

■作成したオブジェクトを単品で保存するにはオブジェクトの保存と、ＷＥＢ用保存があります。
ＨＰビルダーのみで使用するなら、オブジェクトの保存でも結構ですが、配布する素材や、容量を軽く抑えたい時は、WEB用保存ウィザードで保存します。
WEB保存ウィザード,オブジェクト保存は別途説明します。

■ウェブアートファイル（*.mif）の利点

A		B
ウェブアートファイルをこの画面に貼り付けたもの。 先に表のセルの背景に黒を入れておいたので、 黒を背景に透過されgif保存されました。		はじめからGIF保存したもの。 保存時背景白 背景色が白なら、きれいに見えます。

この2つのボタンをくらべてください。
どちらがきれいにみえますか？



■ウェブアートデザイナーで作った画像（オブジェクト）を保存する場合、その場でGIF,JPEG,PNGなどのWEBで便利な形式で保存することも出来ますが、自分のサイトで使う(hpビルダーでサイトを作っている)場合や、縁にアンチェイリアスがかかってて、保存する時に背景の色が素材の縁に多く残ってしまうものなどは、オブジェクト保存しておくと便利です。

（配布には向かないかもしれません。ファイルが重たくなるからです。同じソフトを持っていれば大丈夫です。2001、2000との互換性もあります。）

■これらの画像は、ウェブアートファイル（*.mif）で保存され、使用時にHPビルダーの画面に貼り付けます。
その画面上で、背景色にあわせて透過されgif画像になるので、見栄えがきれいに出来ます。

■保存の方法



上のメニューバーのファイルから「オブジェクトの保存」を選ぶか、画像の上で右クリックしてオブジェクトの保存を選択してください。
上のような画面が出るので、ウェブアートファイルになっていることを確認し、名前を付けて保存してください。


ホームページビルダーの編集画面での使用

そのオブジェクトを使用したい場所に配置します。
そのページを保存する時にガイダンスが出ますので、それに添って保存してください。

■メニューバーのツールをクリックします。



■その名の通り、道具という感じでしょうか。(~_~;)
ウェブアートデザイナーには、簡単で便利な機能がそろっています。
色々使いこなせば、同じソフトを使用しても、全く違った感じの素材が出来ると思います。

■各項目は、別途説明します。

■メニューバーのオブジェクトをクリックします。




■すでにツールバーに表示されている（表示されていない場合は表示のページを参考にして表示させてください。）ロゴの作成、ボタンの作成、フォトフレームの作成、図形の作成という良く使うものがあります。

■ロールオーバー（ブラウザ上で、カーソルがその画像に触れたとき、違う画像を表示する）の作成、登録が出来ます。

■重なり、反転など、良く使うものがあります。これは画像の上で右クリックでも出てきます。

■グループですが、これがversion6からの新しく便利な機能です。wordや、イラストレーターなどのソフトにもありますが、複数のオブジェクト（画像、文字などなんでも）を選択し、グループ化しておくと、1つのオブジェクトを移動したり拡大縮小するように、簡単に扱えます。また、グループ化を解除することも出来ます。

■メニューバーの編集をクリックします。
良く使うコピー、貼り付けや、オブジェクトの編集などもあります。

■ほぼ同じメニューが、画像の上で右クリックしたときにも出てきます。

■この文字列の右側に書いてあるショートカットキーを覚えると便利です。



■スキャナがあれば、TWAIN対応機器から貼り付けが使用できます。

■ウェブアートデザイナーに限ったことではないのですが、コピー、貼り付けは他のソフトと互換性があります。例えば、ここで作った画像をコピーして、ワードの文章の中に挿絵風に使用することも出来ます。
他のイラストソフトで作った画像を貼り付けることも出来ます。
(何処まで対応しているかは調べようがないので試して見る方向で・・・ｗ）

■ファイルから貼り付けは、保存しているgif、mif、png、jpeg、などをキャンバスに呼び出す時に使います。
ダウンロードしてきたバナーに文字入れしよう！と言う時などに使います。

■作る素材によっては、グリッドの表示機能、グリッドに合わせる、拡大表示、縮小表示を使用するととても早く綺麗に仕上がるものもあります。
作りたい素材によって、表示非表示を使い分けてみてください。




メニューバーの表示のドロップダウンメニュー↑の標準ツールバー、操作ツールバー、イメージツールバー、ステータスバーが表示されていなければ、表示させておいてください。

縮小したので汚くてすいません；↑


■タイトルバー、メニューバー、ツールバー、そして書き忘れましたが、(おいｗ
キャンバスの下に表示されているステータスバーがあります。

■テンプレートギャラリーは、便利な時と、邪魔な時があるので、必要な時に表示します。
←このアイコンを押すと、テンプレートギャラリーが表示されます。

■オブジェクトスタックは、右端に表示されている部分です。オブジェクトの重なりを表示するような感じです。復数枚を前後に変更しながら作成する時には便利なので、表示してください。
←このアイコンをクリックしてください。
ここに表示される画像をドラッグすることでも、重なり順を変更できます。

■操作ツールバーはいつも必要だと思いますので、表示しておいてください。
←このアイコンで表示されます。

■キャンバスの大きさは任意で決めてくださいね。横1024pixelあるような、横長の壁紙などを作りたい時は、ファイル→キャンバスの新規作成（サイズ指定）で設定してください。環境設定でも出来ます。

■カラーパレット
←このアイコンをクリックすると表示されます。



ツールバーのアイコンの上にカーソルを重ねると、アイコンが何を表しているか表示されます。試してみてね。

■上のメニューバーにあるファイルのドロップダウンメニューから、環境設定を選択します。


■環境設定ダイアログが開きます。


■今すぐに変更が必要な個所はないと思いますが、使い込んで来るうちに、変更したい項目が出てくると思います。時々ここを思い出して、自分の使いやすい環境に合わせてくださいね。


■グリットの幅、高さは、良く使う部分なので、覚えておいていただくと良いと思います。


■変形時の補間方法ですが、早く変換されるより、高品質（画像がきれい）なほうが良いと思うので、高品質を選んでいます。

■余白とは、透過されて何もない部分のことです。
白色の背景などは、透過属性ではないので、余白として扱われません。
カウンター画像等を作る時等、大きさを指定したい時は、このチェックをはずします。

■図形オブジェクトのアンチエイリアスはお好みで。わからない場合は試して見ると良いと思います。