ホームページビルダー編 25、ダウンロードした画像・素材を編集する

25	ダウンロードした画像・素材を編集する方法

　インターネット上からダウンロードした画像や素材に、文字を追加や編集することができます。

　※ウェブ上にある画像の取得(ダウンロード)方法はこちら

　あらかじめ文字を追加したい画像を用意しておきます。
　作業前に、お使いになる画像を「Homepage」フォルダに保存してください。

　25-1. 画像を合成する
　25-2. 文字を追加する

25-1

　　画像を合成する

　今回は画像作成ソフトの「ペイント」を使って、QRコードと画像を合成する方法を説明します。

　

　上記の画像を使います。
　QRコード画像の作成方法はこちら(ホームページビルダーの機能を使って作成できます)
　左側の画像は、「＠dreamテクニック集」の「保守ユーザー様専用ページ」でダウンロードできます。

　※パソコンのOS（Windows XP、Windows7 など）によってペイントの操作画面が一部違います。
　　Windows XPの場合はこちら
　　Windows 7の場合はこちら

　【 Windows XPでのペイント操作方法】

　１．ペイントを起動します。

　「スタート」⇒「すべてのプログラム」⇒「アクセサリ」⇒「ペイント」をクリック。

　

　２．一つ目の画像を開きます。

　「ファイル」⇒「開く」をクリック。

　

　「携帯サイトPR用の画像」をクリック⇒「開く」をクリック。

　※ここでは「mobile02.gif」を使用します。

　画像が開きました。

　

　３．重ねたい画像を開きます。

　※ここでは「携帯サイトPR用の画像」と「QRコード画像」を合成します。

　「編集」⇒「ファイルから貼り付け」をクリック。

　

　「QRコード画像」をクリック⇒「開く」をクリック。

　※ここでは「qrcode1.gif」を使用します。

　画像が開きました。

　

　４．「携帯サイトPR用画像」の白い部分に、「QRコード画像」を合成します。

　画像をクリックしたまま「QRコード画像」の位置をドラッグして（クリックしたままマウスを動かす）調整してください。

　

　５．画像を保存します。

　「ファイル」⇒「名前を付けて保存」をクリック。

　

　(1)「ファイル名」は半角英数を入力。
　(2)「ファイルの種類」は「GIF」を選択。
　(3)「保存」をクリック。

　

　【 Windows 7でのペイント操作方法】

　１．ペイントを起動します。

　「スタート」⇒「すべてのプログラム」⇒「アクセサリ」⇒「ペイント」をクリック。

　

　２．一つ目の画像を開きます。

　図の「(1)」をクリック⇒「開く」をクリック。

　

　「携帯サイトPR用の画像」をクリック⇒「開く」をクリック。

　※ここでは「mobile02.gif」を使用します。

　

　画像が開きました。

　

　３．重ねたい画像を開きます。

　※ここでは「携帯サイトPR用の画像」と「QRコード画像」を合成します。

　クリップボードにある「貼り付け」をクリック⇒「ファイルから貼り付け」をクリック。

　

　「QRコード画像」をクリック⇒「開く」をクリック。

　※ここでは「qrcode1.gif」を使用します。

　

　画像が開きました。

　

　４．「携帯サイトPR用の画像」の白い部分に、「QRコード画像」を合成します。

　画像をクリックしたまま「QRコード画像」の位置を動かして調整していきます。

　

　５．画像を保存します。

　図の「(1)」をクリック⇒「名前を付けて保存」にカーソル（矢印）を合わせる⇒「ＧＩＦ画像」をクリック。

　

　「ファイル名」は半角英数を入力し、「保存」をクリック。

　

25-2

　　文字を追加する

　今回は「ウェブアートデザイナー」を使って画像に文字を追加する方法を説明します。

　

　１．ウェブアートデザイナーを起動します。下記のどちらかの方法で起動してください。

　(1)ホームページビルダーから起動する。
　「ホームページビルダー」⇒「ツール」⇒「ウェブアートデザイナーの起動」をクリック。

　(2)スタートメニューから起動する。
　「スタート」⇒「すべてのプログラム」⇒「ホームページビルダー」⇒「ツール」⇒「ウェブアートデザイナー」をクリック。

　※下図はwindows7で開いた画面です。

　

　２．文字を追加したい画像を開きます。

　「ファイル」⇒「キャンバスを開く」をクリック。

　

　編集する画像を選択してから、「開く」をクリック。

　※ここでは「tuika01.gif」を編集します。

　画像が開きました。

　

　３．文字を追加します。

　「オブジェクト」⇒「ロゴの作成」をクリック。

　

　「ロゴ作成ウィザード」で文字の指定をします。

　(1)追加したい文字を入力。
　(2)文字のフォント、サイズを選択。
　(3)文字のスタイルを選択。
　(4)文字の指定が終わったら「次へ」をクリック。

　

　色の選択をします。

　※ここでは「グラデーション」、「ｒｅｄ」を選択しました。

　(1)「種類」から「単色・グラデーション・テクスチャ」を選択。
　(2)「一覧」から色を選択。
　(3)色の選択が終わったら「次へ」をクリック。

　

　縁取りの選択をします。

　※ここでは「通常」を選択、縁の色を変更しました。

　(1)縁取りの種類を選択。
　(2)オプションで線の太さ・色などを変更。
　(3)縁取りの選択が終わったら「次へ」をクリック。

　

　文字効果の選択をします。

　※ここでは「影」を選択、オプションは変更なし。

　(1)文字効果の種類を選択。
　(2)オプションで「種類」で選んだ「効果」の色などを変更。
　(3)文字効果の選択が終わったら「完了」をクリック。

　

　画像に文字が追加されました。

　

　４．画像に枠（フォトフレーム）を追加します。

　「オブジェクト」⇒「フォトフレームの作成」をクリック。

　

　「フォトフレーム作成ウィザード」でフレームの形状を選択します。

　※ここでは「frame_s_004」を選択しました。

　(1)一覧から形状を選択。
　(2)形状の選択が終わったら「次へ」をクリック。

　

　色を選択します。

　※ここでは「単色」、濃い赤を選択しました。

　(1)「種類」から「単色・グラデーション・テクスチャ」を選択。
　(2)「一覧」から色を選択。
　(3)色の選択が終わったら「完了」をクリック。

　

　画像に枠（フォトフレーム）が追加されました。

　

　５．URL（ホームページアドレス）を追加します。

　「オブジェクト」⇒「ロゴの作成」をクリック。

　

　「ロゴの作成」をします。

　(1)ホームページアドレスを入力。
　(2)文字のフォント、サイズを選択。
　(3)文字のスタイルを選択。
　(4)文字の指定が終わったら「次へ」をクリック。

　

　色を選択します。

　※ここでは「単色」、濃い赤を選択しました。

　(1)「種類」から「単色・グラデーション・テクスチャ」を選択。
　(2)「一覧」から色を選択。
　(3)色の選択が終わったら「次へ」をクリック。

　

　「縁取りの選択」、「文字効果の選択」をします。

　※ここではどちらも「なし」を選択しました。

　

　URLを追加できました。

　