17でうつり込む写真のところで、グラデーションを作るのがなんだか難しいと書きました。
透明から色へのグラデーションです。
写真の加工にはグラデーションが黒白2枚と、PNGで作った模様がいくつかあれば、幅が広がりんぐ！と思いました。

そしてphotoshopで作りました。

これってどうなの！？ですが、いいのです。
一回作ればずっと便利なんですから！！


以前もいろいろ書きましたが、オリジナルの画像や写真にかけるエフェクト系は、ショボイんです。

書き方わるいかな・・・。使いづらいものが多いんです。

ロールオーバーという技術は、今も健在で使われているものだと思いますが、 画像の上にポインターが重なると違う画像に変わるものです。
そういう時に写真を使う場合など、画像にちょこっとだけ変化をさせたい時などがあります。

単純なものほど使い勝手もいいと思います。

透明から黒、白へのグラデーションです。
縮小して表示されますので、クリックして出てきた画像をそのまま保存してください。
拡張子はpngです。
半透明が維持されたままウェブアートデザイナーで使用できます♪


　←見えないけどここに白いグラデが！！ とりあえず便利なので、写真とかのフォルダに一緒に入れておけばいいでしょう♪
前回書いた、うつりこみに見える加工などに使うと楽勝です！

そして、ちょっとした使い方の提案です。

今回、ついでに作ったのは格子の透過されているただの画像です。

白と黒があります。



←真っ白で見えないけどここ白の格子！！

こちらをダウンロードします。
加工したい写真をキャンバスに呼び出し、この画像を重ねます。
そのまま重ねたらただの格子ですので、格子の透明度を上げていきます。
1枚だと単純な模様なら2枚重ねたり、大きさを変えてみたり回転させてみたりします。
影をつけてみるのも面白いです。

また、強調したい場所など、消しゴムツールの筆を大きくして、模様を消します



一番上に貼り付けた画像と少しイメージが変わります。


消しゴムツールで、サイズのでかくてぼやけたのを選ぶと楽にできます。


↑消しかけです。こんな風に使うのもいいんじゃないかなーｗ
十分遊べるソフトだと思うんだ！


おためしあれ♪

自分の撮った写真をデスクトップの壁紙にしたりする時に、ちょっと工夫して映り込みとか彩度も下げられていいかもしれないと思いました！

今回古いPCでホームページビルダーバージョン6のウェブデザイナーで挑戦しました。

一番悩んだのは、透明からカラーへのグラデーションです。
透明から・・・というのが簡単に設定できない？？

探したけど見当たりませんでした。

意地でも作ります！！

ぼやけるペンとか、なんでもいいのですが、今回は真っ白な適当な白い四角を切り抜き、そのぼかしを使って透明からカラーへのグラデーションを作りました。


↑こんな感じで、上の青から透明のグラデーション部分を切り抜いて使うのです。
意地でも使う！というコンセプトそのものです。


白く切り抜いた画像を右クリックして、上に影を設定するだけです。

そして、影の部分だけ、背景の透明を維持したまま切り抜きをします。

そこからはロゴのところと同じで、
写真を好きな大きさにする。
コピーして、上下を反転させる
写真をピタッと丁寧に合わす
先ほど作ったグラデーションを最前面に移動させ、下半分に重ねる
必要なところだけ切り抜く。




ちょっと色を日中の色とかにしたら、なぜか夜ぽくなりましたが、こういう楽しみ方もあるってかんじで！

切り抜く見本は青ですが、実際は黒で作っています。
黒か白が一番目をだましやすい気がします♪
ちょこっと使うのに結構便利なソフトなのよ？古くてもｗ

ウェブアートデザイナーに元から入っているバナーでは、こういうタイプのものが無かったので、作ってみました。
簡単に！を目標にしたので、凝ってません。
もうちょっと自由にぼかしなど使いたいとおもう部分もありますが、こんな感じならコツさえわかれば簡単だとおもうので、遊んで見てください♪
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枚です。


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