ウェブアートデザイナーに元から入っているバナーでは、こういうタイプのものが無かったので、作ってみました。
簡単に！を目標にしたので、凝ってません。
もうちょっと自由にぼかしなど使いたいとおもう部分もありますが、こんな感じならコツさえわかれば簡単だとおもうので、遊んで見てください♪
mifファイルもご用意しました。 (≧ω≦ )
オワタのカオモジは、友達がとても好きで何時もメルで送ってくるので（しかも文字化けしてくる・・・）入れてみました。どうでもいいですね＾＾




作り方は、四角形（枠と塗りつぶし）などを使い、枠線つきのベースを描きます。
次に、枠線を細め（1pixel）にして、塗りつぶしをグラデーションにします。
同色系の色で明るい→暗い　あるいは、暗い→明るいで、作るとうまくヒカリマス。
そこに、文字を重ねます。
次に、反射して白く見えている部分を作ります。
枠線なしのベタな画像を作ります。四角でも、まるでもとりあえず真っ白にします。
画像の上で右クリックして、透明度を80ぐらいにします。
一番前面に（バナーや文字の上にかかるように）おきます。
必要な部分だけ切り抜き、いらない白い部分を透明色で塗りつぶすなどして完成です。


白い透明な部分をそのまま重ねると枠線も明るくなってしまいます。 その時はベースにしたバナーをコピーして、枠線だけを表示するように変えて、最前面に重ねておきます。

↑文字すら入れていないですが、グローバルナビなどもこの方法でテカテカつくれますｗ
重なっている画像に、透明度を高くしたテクスチャー画像を重ねています。（文字が濃くてわかりづらいですが）



角の丸の角度が変えれたらいいんですが・・・。
図形として大きく作って画像として縮小すれば好みの角度になるかもですが；
めんどくｓｌｋじゃｋぁｊｋｌ

グリッドを表示して、グリッドにポイントを合わし、図形を描けば結構イケル！


なんとなく透明ぽく光ってるバナーのmifファイル(zip）をdownload




　　　　　　

今回説明が手抜きですいません；

一枚の画像を用意します
今回は、この画像　　　をアニメーションウィザードを使って
　　→　　　やのようなアニメにしてみます。
大きい画像のほうが効果は確認しやすいです。

アニメーション ウィザードを選択します。
（黄色い怪しいランプみたいなアイコンをクリックで出てきますｗ）



今回は一枚の画像ファイルからアニメーション効果を使用してアニメーションを作成を選び、

次へを押します。



↑の画面が出てきますので、参照を押し、画像を選んでください。
アニメーションは透過属性は維持されます。
透過してあるものを選んでもOKです。
（古いversionはわかりませんが、GIF以外の画像も使えます。）

画像ファイルを選択してください。決まれば開くを押します。

次へを押します。



ここで効果を選びます。
効果の設定のプルダウンでどんな効果が良いか、再生ボタン（右向きの青い△）を押して確認しながら決めます。
決まれば、OKを押します。


ここで確認です。

満足すれば、完了を。

修正したいなら、戻るボタンで戻り変更する事も出来ます。

（この後出てくる画面でも変更は可能です）



完了を押すとこの画面が出てきます。
設定を変えないと1回でアニメが終わってしまうようです。
（昔のversionは、繰り返しがデフォルトになっているかも！）
下の画像を参考に確認してから保存してください。



属性をダブルクリックします。
繰り返しを選ぶ箇所がありますので、無限に設定してください。
（回数指定もできますが、ただのアイコンには不向きかなー。）





このウィンドウがアクティブになっている状態（選択している状態）で
名前をつけて保存します。
完成です＾＾


簡単なのに、説明がシツコイので難しく思われなければいいのですがｗ

2枚以上の画像を用意しておいて、GIFアニメを作ってみます。

　　←このような派手なアイコンを作ってみませんか^^

今回は同じ大きさの画像を2枚以上用意してみてください。
（このページでの説明は2枚以上用意した場合です。1枚の時は　こちらです。

複数枚の画像ファイルを使用してアニメーションを作成

　

　←　のアイコンの場合下の4枚を用意しました。

　　　
とりあえず、作ってみたい画像が無い方は、この↑の4つでもダウンロードしてください。

4枚同じ大きさです。

アニメーション ウイザードを使って作成します。
黄色い魔法のランプみたいな怪しいアイコンででてきますよ！


複数の画像ファイルを使用してアニメーションを作成を選びます。

次へ



ファイルの設定画面がでますので、画像の追加（昔は選択？）で使いたい画像を2枚以上選択します。

4色の●のアイコンを選択しています。
（キーボードの[Ctrl]を押しながら選択すると一度に選べます）


一度に開かなくても一個一個開いてもOKですｗ
何度でも「画像の追加」ボタンを押してください。
画像の順序を入れ替える事もできます。
色の表示される順番にこだわるなら入れ替えてください。（後からも変更可）
プレビューにチェックを入れて見ると便利。
大きさもここで確認してね＾＾



上の画像と同じですが・・・。使いたい画像を選んだら、　次へ　を押します。



どこにあわせて重ねるかということを聞いてきますが、今回は同じ大きさの画像なので、そのまま次へを押します。



繰り返しの回数・無限か、フレームの1枚1枚の表示時間を聞いてきます。
今回は、繰り返しは無限を選びました。
有限の場合は回数を設定してください。（後からでも変更可）

各フレームの表示時間はデフォルトで500になっています。
これでもいいのですが、少し早くしたかったので200にしてみました。
早いほどピカピカしますが、早すぎると色がわからないピカピカになります。
その辺は好みで、効果を確認しつつ（この後、出来ます）決めてください。



この時点でできているアニメーションが表示されています。
右向きの青い三角を押すとプレビューでみる事ができます。
速さや重なる順番が気に入らなければ、　戻る　で戻って変更してもOKです。
（この後でも変更可）
これでいいなら完了を押します。




この画面↑が表示されます。
ここで、最適化をしたり、アニメの表示速度を変えたり、などもすることが出来ますが、とりあえず十分なので、完成にします。
ツールバーの保存を押すか、
メニューバーのファイルから、名前を付けて保存を押し、 半角英数字でファイル名をつけて保存してください。

完成です　Ψ(｀∀´)Ψ

出来たでしょうか？確認もできたかな？ｗ

XPならクリックしただけで確認できると思うけど、一昔前はこの確認がちょっと大変だったのですｗ

むかーし確認が出来なくて、悩んだ事があったので一応書いておきます。
（2001年ごろに書かれた昔・・・。確認できたら下の文章は気にしないでｗ）

実際出来上がっていてもフォルダの中ではアニメに見えないことがあるので、ホームページビルダーに貼り付けてみるか（編集画面ではアニメマークはでるけどピカピカはしませんが・・・）素材ビューの下のところに設定っていう所があって、そこで「アニメーションを動かす」を設定すれば、素材ビューでもアニメが動きます。
GIFファイルを何で開くかという関連付けがあって、もし編集ソフトなどになってたら確認したいだけなのに編集画面がひらいちゃったりしてめんどくさいですよねｗ

アニメを確認するためにホームページビルダー本体があるのかもしれないですね！　（ひどいｗ）

アニメーション ウィザードを使って作ってみましょ☆-(oゝ艸・)　
（かわいこぶってしまいました。すいません。）

ここを読んでいる方は、あまりこのソフトに慣れていない方だと思います。
はじめから説明してみます！
（でも詳しく全機能を説明する予定はありませんｗ無理無理・・・。）

ウェブアニメータは見つかっていますでしょうか？
まず、起動します。カチカチッ！

初回だとこの画面が出るはずです。



アニメーションウィザードを選んでみてください。

これは、ソフトからの問いかけに応じて選択していけば出来上がるようになっています。

親切ですね！＾＾
その割にはホームページビルダー本体は使い方難しいですね＾＾
↑やばいのでけしときまｗｗ

この3つの中から作りたい画像によって、一番作業しやすい物を選び次へを押します。

（アニメーション ウィザード↑がでていない場合は、このアイコンを押せばでてくるよｗ）



はじめから、画像を何枚か作って用意していて、それを組み合わせれば完成という場合は、一番上の
「複数の画像ファイルを使用してアニメーションを作成」
を使います。

←色違いの画像2枚を使って作ってみました。

文字のアニメを作りたい場合で、画像をまだ用意していない場合、（バナーの場合はバナーベースを用意します）背景が透過の文字アニメを作成する場合など、
「文字アニメーションを使用してアニメーションを作成」
をえらびます。
このウィザードの中で文字列を入れたり、フォントを選択、影や囲いなどの効果もつけることができます。
こんなのが簡単。


「一枚の画像ファイルから、アニメーション効果を使用してアニメーションを作成」
はそのまま。一枚だけ用意した画像を、このソフトにある効果のつけ方でアニメにしてしまうものです。
例えば、これ作りました。

←の画像を作っておいたのを使って1分足らずでできるようになっています。

どれも、それぞれに便利で簡単です。
用途に合わせてここで選ぶと楽ですが、最終的な編集画面では、ほとんどの同じ作業ができるようになっています。
慣れてきたら組み合わせて使ったりしますｗ

まず、ウェブアニメータを探してくださいｗ

HPビルダーを開いている場合は、メニューバーのツールから選択する事もできます。


Windowsのスタートボタンからたどっていく場合、

version6だと、Windowsのスタート→プログラム→IBMホームページ・ビルダー6→ウェブアニメータ

version12だと、Windowsのスタート→プログラム→IBMホームページ・ビルダー12→ツール →ウェブアニメータ



まあ、他も大差ないでしょう？ｗ



まあ、デスクトップにこのアイコン
があれば、クリックするだけですけどね・・・。

みつかったでしょうか？
上の状態でウェブアニメータが出ない時は、インストールしているか確認してみてください。
ホームページビルダーのインストールをカスタムでした場合など、入れていないかも知れません。
（あまりしないので、昔のバージョンでしかわかりませんが・・・）

オマケでついていないパッケージとかあったら残念ですが無理でしょうね(T^T)
その場合、フリーのソフトも色々あるので探してみるといいですよ＾＾

ウェブ アニメータ（ウェブアニメーター）は、ホームページビルダーについている、オマケのGIFアニメを作るソフトです。
オマケですが、これが本体って言う人もいました。　（ひでぇｗ）
それぐらい使いやすいんです。
もったいないので、使ってみませんか！？

このソフト、地味な存在なのに、すっごく上手いこと出来てて、簡単に色々作れるのでとても楽しいのです。


GIFアニメも色々あって、
全コマパラパラ漫画みたいに描く場合や、（いっぱい描くからめんどくさい）
1枚だけの画像を用意し、順にずらして表示する場合（めちゃくちゃ簡単）
また、2枚の画像を用意して、1枚目から2枚目に変化する中間になる画像を勝手にこのソフトに作ってもらうアニメ（簡単なのに派手！）
など、出来上がりも、難易度も色々ですｗ


ちょっとしたドット絵のアイコンとか、ほんのひと手間で可愛くなったりするのでぜひ使ってみましょう♪


説明の古そうなページはversion6の画面です。（そのまま使ったのでｗ）
新しく追加したページはversion12になってます。

でも、これがまた、ほっとんどかわって無いんだ・・・。

これから新しいのがでても、劇的に変わるとは思えないので（チョット失礼）適当に使えそうな部分を拾い読みしてください＾＾

ウェブ アニメータ　←伸ばさない　　ウェブアニメーター←伸びてる！どっちでもいいか・・・。

まず、アニメってどんな風になってるんだよっ？
絶対私には無理だーーー！と思ってる方が多い気がします。
でもGIFアニメは簡単なのです。
（GIFは.gifという拡張子の保存形式の事です。わからないときは気にしないでOK）
パラパラ漫画みたいなものなのですｗ

説明してみるね＾＾

見てもらうとすぐわかると思うけど、動くものはこういう感じです。



これは、2枚の画像を順番に表示しているアニメです。
作るときに[無限]を選んでいるので、いつまでもぺこぺこおじぎします。
[1回だけ]と選んでつくれば、一回だけになります。

　　　


これは、どうやってピカピカしているのでしょうか？


（えっ、ピカピカに見えない！？見えるということにしてくださひ・・・。）

なんのことなく、　　　　　　

この2枚を交代に表示しているだけなのですｗ
色を変化させる場合や、画像の表示位置を変化させる場合は簡単です。
どちらかというと、上に貼った男の子のように、2枚の絵を書くのは、めんどう慣れが必要かもしれません。

どちらにしろ、そんなに難しい事はないので、挑戦してみてね＾＾

（このページはホームページビルダーversion6の時に作ったウェブアニメーターの紹介ですｗなんか文章が照れくさいぜ！）

デスクトップの壁紙をデザインする！

手順を先に説明すると、

• 自分のデスクトップの解像度（面積と比率みたいなもの）を調べる
• ウェブアート デザイナーを開き、調べた解像度でキャンバスを作る
• 四角形の塗りつぶしでキャンバスの背景を作る
• お気に入りの画像を並べたり、文字を入れる
• キャンバスを.mif以外の形式で保存する
• 作った画像を、デスクトップの壁紙に設定する

めっちゃ簡単ですｗ

重たいですが、簡単と書くからにはネチッコイ説明が必要とおもいまして、画像にしました。 しかも、複数枚貼り付けるのが面倒なので1枚です。


出来ましたでしょうか！？
ウェブアートデザイナーを意地でも使うというコンセプトにぴったりの一品ですね！？ｗ

水玉の素材を貼ったので、今回はストライプです。

写真に効果をつける。（ストライプ）

↑こんなかんじとか！

手順（みずたまと全く一緒）

• 下にある画像をクリックして出てきた画像を保存します。
• ウェブアート デザイナーを開き、効果をかけたい写真をキャンバスに配置します。
• テンプレートギャラリーで、保存したフォルダを表示させます。
• ダウンロードした画像を選び、画像の上に呼び出します。
• 透過のpngというただの画像ですので、透明度など調整して遊びます。
  （ウェブアートデザイナーは透明な部分を含んだ画像の拡大縮小回転には向いていないので、そのままのほうが綺麗です！たぶん）
• 好きな位置で切り抜いたら出来上がりです

同じものをずらして重ねたり、透明度を変えたりすると変わった模様になってたのしいです！。



クリックして出てきた画像を保存してください。白だと枠しか見えていませんが、透過PNGになっていて、模様があります。

今回はストライプです。イラレで拡縮しているので、アンチェイリアスがかかってて、少しぼけて見えます。
幅の広い順↓
　　　

　　　

　　　

　　　


どうしてこんなに意地になって使うんでしょうね・・・。　このソフトがいまだに好きなのが悔しいぐらいです(ﾉω｀)ｗ

どういう時に使うかというと、ロールオーバーに使う部分（半透明から透明になるイメージ）や、写真がメインでなく、文章の穴埋めの時とか（にぎやかし？ｗ）。 あとは、質感を変えたい時などがおすすめです。
素材を作るのにも便利かもしれません。
このソフトで素材を作るのは切抜きが難しいけど使い方が直感的なので初心者さんにはおすすめですね♪

写真に効果をつける。

手順

• 下にある画像をクリックして出てきた画像を保存します。
• ウェブアート デザイナーを開き、効果をかけたい写真をキャンバスに配置します。
• テンプレートギャラリーで、保存したフォルダを表示させます。
• ダウンロードした画像を選び、画像の上に呼び出します。
• 透過のpngというただの画像ですので、透明度など調整して遊びます。
  （ウェブアートデザイナーは透明な部分を含んだ画像の拡大縮小回転には向いていないので、そのままのほうが綺麗です！たぶん）
• 好きな位置で切り抜いたら出来上がりです

同じものをずらして重ねたり、透明度を変えたりすると変わった模様になってたのしいです！。


説明してもわかりづらいとおもうけど、楽しいと思う！
ウェブアートデザイナー意地でも使いましょう！(´∀｀)

クリックして出てきた画像を保存してください。白だと枠しか見えていませんが、透過PNGになっていて、模様があります。
みずたま大
　　　

みずたま中
　　　

みずたま小
　　　

ストライプも作ったのでまた貼ります！とりあえず水玉でした＾＾

追記です。

みずたま極小（ここまでいくと潰れ気味かも？）
　　　

ストライプまで貼ると長く伸びちゃうので別の投稿にしますｗ