HP Builder

画像の加工(ウェブアニメーターとウェブアートデザイナー)

投稿日:2017年1月7日 更新日:

ホームページビルダーに付属している[ウェブアート デザイナー]と[ウェブ アニメーター]を使って、画像を加工してみましょう。

ここでは、私が作成した以下の画像を少し変えてみます。

アニメ画像

Web上の画像の保存の仕方は、以下の記事を参考にしてくださいね。

ウェブページの画像を保存するにはショートカットメニューから

ウェブページの画像は右クリックして、簡単に自分のパソコンに保存することができます。 Internet Explorer以外のブラウザでも同じ ...

続きを見る

画像の取り込み

ウェブ アニメーターを起動させて、画像をウェブ アニメーターに取り込みます。

[開く]ボタンをクリックして、画像を取り込みます。

ウェブアニメーターの[開く]ボタン

[開く]ダイアロゴボックス

イメージに名前を付けて保存

1つのイメージを選択します。

イメージの選択

イメージで右クリックして、ショートカットメニューから[フレームの保存]をクリックします。

ショートカットメニューの[フレームの保存]

[イメージに名前をつけて保存]ダイアログボックスが表示されますので、名前を付けて保存します。

[イメージに名前をつけて保存]ダイアログボックス

ウェブアート デザイナーの起動

今度は[ウェブアート デザイナー]を起動させましょう。

ウェブ アニメーターはそのまま起動させておいてください。

[開く]ボタンをクリックします。

ウェブアートデザイナーの[開く]ボタン

[キャンバスを開く]ダイアログボックスが表示されますので、先ほど保存した画像を選択して開きます。

[キャンバスを開く]ダイアログボックス

[拡大/縮小]ボタンで拡大

[ウェブアート デザイナー]のキャンバスに小さく表示されました。

[拡大/縮小]ボタンで最大の4倍の大きさにします。

ウェブアートデザイナーのキャンバスで4倍の拡大

オブジェクトの選択

[オブジェクトの選択]ボタンをクリックして、画像をクリックします。画像の周りに黒い点が現れます。

ウェブアートデザイナーの[オブジェクトの選択]ボタン

画像の加工

[消しゴム]ボタンを選択して、ドラッグしてハートを消します。

ウェブアートデザイナーの[消しゴム]

[直線]と[折れ線]ボタンを使って、星を描画します。[折れ線]の最後はダブルクリックです。

ウェブアートデザイナーの[直線]ボタンと[折れ線]ボタン

元のサイズに戻して上書き保存

再度[拡大/縮小]ボタンをクリックして、[1]を選択して元のサイズに戻します。

ウェブアートデザイナーの[拡大/縮小]の[1]

[上書き保存]のボタンをクリックして、保存します。

ウェブアートデザイナーの[上書き保存]

[GIF 属性の設定]ダイアログボックスが表示されたら、[OK]ボタンをクリックします。

[GIF属性の設定]ダイアログボックス

ウェブ アニメーターへ切り替えて画像を挿入

ウェブアニメーターへ切り替えて、フレームを削除して新しい画像をドラッグして差し替えます。

[ウェブ アニメーター]を表示させます。フレーム上で右クリックして削除します。

ウェブアニメーターのフレームで右クリック-削除

[ウェブ アニメーター]と[マイピクチャ]を並べて、画像をドラッグしやすい配置にします。

削除したフレームの箇所へ作成した画像をドラッグします。

マイピクチャから画像をウェブアニメーターへドラッグ

[フレームのプロパティ]を表示

挿入した画像で右クリックして、ショートカットメニューから[フレームのプロパティ]をクリックします。

ショートカットメニューの[フレームのプロパティ]

他のフレームのプロパティをみながら、表示時間等を調整します。

[フレームのプロパティ(イメージ フレーム)]ダイアログボックス

ウェブ アニメーターのツールから[再生を開始]のボタンをクリックして アニメーションになっているかどうかを確かめます。

ウェブアニメーター[再生を開始]ボタン

確認できたら、アニメーションをストップさせましょう。

ウェブアニメーターの[再生を停止]ボタン

名前を付けて保存

[ファイル]から[名前を付けて保存]をクリックして、作成したアニメーションに名前を付けて保存します。

[ファイル]メニューの[名前を付けて保存]

[名前を付けて保存]ダイアログボックス

できあがりました~(*^^)v

アニメ完成 

【お願い】フリー素材のサイトでも画像の加工は許可していない人が多いようです。注意書きをよく読んでからにしてくださいね。

検索

ほかの記事も検索してみませんか?

Access / Excel / PowerPoint / Word

関連記事30件

Profile

-HP Builder

Copyright © 2001-2024 初心者のためのOffice講座 All Rights Reserved.

Copyright© 初心者のためのOffice講座 , 2024 AllRights Reserved Powered by AFFINGER4.