Google検索

リンクユニット

HP Builder

Print Friendly, PDF & Email

画像の加工

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

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

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

Webページの画像を保存

Webページをみていると、素敵な画像がたくさんありますね。 画像は簡単に自分のパソコンに保存することができます。 例としてブタちゃんを保存し ...

続きを見る

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

画像の取り込み

[開く]ボタンをクリックして、画像を取り込みます。
ウェブアニメーター

開く

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

イメージを選択します。
イメージ

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

名前を付けて保存します。
イメージに名前をつけて保存

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

今度は [ウェブアート デザイナー]を起動させましょう。ウェブ アニメーターはそのまま起動させておいてください。
[開く]ボタンをクリックします。
ウェブアートデザイナー

先ほど保存した画像を選択して開きます。
キャンバスを開く

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

[ウェブアート デザイナー]のキャンバスに小さく表示されました。[拡大/縮小]ボタンで大きくします。
ウェブアートデザイナー キャンバス

オブジェクトの選択

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

ハートの削除

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

星を描画

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

元のサイズに

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

上書き保存

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

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

ウェブ アニメーターへ切り替え

フレームの削除

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

[ウェブ アニメーター]と[マイピクチャ]を並べて、画像をドラッグしやすい配置にします。削除したフレームの箇所へ作成した画像をドラッグします。
マイピクチャからドラッグ

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

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

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

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

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

名前を付けて保存

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

保存

できあがりました~(*^^)vアニメ完成 
お願い・・・フリー素材のサイトでも画像の加工は許可していない人が多いようです。注意書きをよく読んでからにしてくださいね。

お勧めのテキストです。ぜひお手元においてご活用ください。

おすすめ記事と広告

こんな記事もあります

キーワードをつける

ページにキーワードを設定することができます。メニューバーの[挿入]から[その他]→[ページ検索キーワード]をクリックします。 キーワードダイ ...

ビルダーでスライドショーを作成

下のようにボタンをクリックしたり、または自動で写真を次々に切り替えて表示させる機能です。 メニューバーの[挿入]→[画像の効果]→[スライド ...

画像の編集

ファイルに画像を挿入したあとでも、サイズを小さくすることができます。 画像の上で右クリックして、メニューの中から[画像を編集]→[画像の編集 ...

水平線に色をつける

文章の区切りの一つとして水平線を挿入して、その水平線に色を設定する方法です。 スタイルから設定する方法 メニュバーの[挿入]から[水平線]を ...

画像の切り抜きはダブルクリック

ウエブアートデザイナーで画像を切り抜く場合は、選択した範囲の内側でダブルクリックしてもOKです。 ウェブアートデザイナーの起動 ツールから[ ...

-HP Builder

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

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