動画サンプル
 
        ウェブアートデザイナーで画像を加工する   

                   ホームページの画像を加工     (役割起動編集保存
                   ウェブアートデザイナー基本操作 (各部名称画像読込合成画像形式
                   ウェブアートデザイナー各種操作 (画像編集ペイントツールカラーパレット
                                       (画像全体に効果をつける色調明るさを整える
                   ロゴやアニメーションの作成 (素材を利用自分で作るロールオーバアニメション
  ホームページの画像を加工 

画像とウェブアートデザイナーの役割 :
   ホームページに使用の画像・・・・・【挿入】→〔画像の挿入〕→付属の画像・自作の画像などを貼付けできる
                          テンプレートや素材集からの素材は ページの色調にマッチし難い
   ウェブアートデザイナーで編集・・・そこで 挿入した画像を 編集したり色調を変えたりするのが この編集機能
                          素材を加工したり、一から画像を作成したりできる
                          アニメーションも 付属の「ウェブアニメータ」の使用により 行える
                        「画像の編集」機能は必要最小限の処理だけ
                          GIFやJPEG形式への変換・トリミング切抜きなどのみ
   専用ソフトの概略機能を持つ・・・・下記専用ソフトがあるが 大略その機能を「ウェブアートデザイナー」は持っている
                          PhotoDraw ・ PhotoEditor(MicrosoftOfficeに付属)
                          AdobePhotoshop ・ PaintShop など
起動と編集はじめ :
   起動操作・・・・・・・・・・・・・・・・・・・@【ツール】→〔ウェブアートデザイナーを起動〕 または
                          A【スタート】→〔プログラム〕→〔IBM・HPビルダー〕→〔W.A.デザイナー〕
   画像選択し編集へ・・・・・・・・・・・・@(画像を選択)→{右クリック:ウェブアートデザイナーで編集} または
                          A【編集】→〔ファイルから貼付け〕
   画像を編集する・・・・・・・・・・・・・・ <背景>→(色を選択・ドラッグ&ドロップ)→(編集パレットへ)→各種編集へ
                          <ロゴ>・<フレーム>・<ボタン>など 同様にして追加して行ける
   画像を加工する・・・・・・・・・・・・・・ 「画像の編集」では1つの画像が対象であったが こちらでは複数レイヤーが可能
                          テンプレートギャラリーより 各種画像を取り出し組合わせて 画像を作るとよい
編集画像を保存する :
   コマンドによる設定・・・・・・・・・・・・【ファイル】→〔他形式j保存・Web用保存ウィザード または キャンパスを上書保存〕
   保存時の画像形式・・・・・・・・・・・・(画像登録後)→【ファイル】→〔アプリケーションの終了〕
                          元の画像が書き換えられた状態で 保存される ・ 右上「×」終了では変更なし


  ウェブアートデザイナーの基本操作 

各部の名称 :
   標準ツールバー・・・・・・・・・・・・・・・<キャンバス作成・保存><コピー・移動><ロゴ・ボタン・フォトフレーム作成>
   イメージツールバー・・・・・・・・・・・・・イメージを作成する 道具
   キャンバス・・・・・・・・・・・・・・・・・・・ オブジェクトを表示し 編集して行く領域です
   テンプレートギャラリー・・・・・・・・・・・プログラムに付属の素材集やフォルダ内の画像を一覧表示します
   オブジェクトスタック・・・・・・・・・・・・・ 複数のオブジェクトの重ね順を(レイヤー)調整できます
   ステータスバー・・・・・・・・・・・・・・・・ マウスポインタの置かれている部分の状況を表示 ・ その部分のヘルプは'F1'を
   カラーパレット・・・・・・・・・・・・・・・・・・絵の具を出して 色調整を行うものが 上記の他に よく使うものとしてあります
キャンパスに画像・オブジェクトの貼付け :
   コマンドによる実行
     ウェブアートデザイナー起動・・・・ 【ツール】→〔ウェブアートデザイナー起動〕 または 【スタート】より (前記)
     キャンバスを開く・・・・・・・・・・・・・【ファイル】→〔キャンバスを開く・新規作成〕
     キャンパスへの画像取込・・・・・・ 【編集】→〔ファイルから貼付け〕
                             (注意 : 同時に複数のキャンバスを開くことは出来ません)
   キャンバスの初期設定
     キャンパスのサイズ設定・・・・・・・@ キャンバスは最初に取り込んだ画像の大きさにより 初期設定される
                          A 次に取り込んだ画像が より大きなものですと 画面からはみ出してしまいます
                          B 【編集】→〔キャンバスの設定〕→『キャンバスの設定』ボックスでサイズを設定
                             または  【ファイル】→〔サイズを指定して新規作成〕 (旧バージョン)
   キャンパスの利用・・・・・・・・・・・・・・・ 【表示】→〔拡大表示〕〔縮小表示〕〔原寸表示〕
      キャンバス上に格子を表示・・・・・【表示】→〔グリッドの表示〕
   テンプレートギャラリーから取込・・・・・【編集】→〔素材集から貼付け〕
   ウェブアートでは回転・変形が可能・・・ホームページで利用する画像はピクセル形式が多く回転などを行えないが
                          ウェブアートデザイナーでは オブジェクトとして扱うので それらが可能である
                          通常は変形の際画質は落ちて行くが オブジェクトであるので落ちない
     ウェブアート形式オブジェクト・・・・・・素材集から利用できるオブジェクト や ロゴマーク  ナンバーなど
                           ウェブの大きさに合わせて 度々変更するようなものに よく使われる
画像・オブジェクトの合成 :
   オブジェクトスタックから選択・・・・・・・・キャンバスへ画像を取り込むと 画面右側に各画像のレイヤーが表示される
                           複数画像がキャンバスに重なって表示されるが その上下関係がそこで分る
                           そのレイヤーをドラッグすることにより それらの上下関係を変えることもできる
   ホームページ形式で保存・・・・・・・・・・・【ファイル】→〔他形式保存〕 または 〔Web用保存ウィザード〕
                             →<保存形式選択(GIF・JEF・PNG)>
     保存形式別詳細設定・・・・・・・・・・・JPEG形式の場合:
                             →<ファイルサイズ> :ファイルサイズを上げると画質は良くなる
                             →<プログレッシブ> :圧縮有無
                             →<キャンバスの色> :
     保存先の設定・・・・・・・・・・・・・・・・ 画像挿入のホームページを フォルダへ登録の際、画像も同フォルダへ入る
   オブジェクト単位で保存・・・・・・・・・・・・(オブジェクトを選択)→【ファイル】→〔オブジェクト単位で保存〕
                             →<保存形式選択(GIF・JEF・PNG)>
                           この際の保存は ウェブアート形式(mif)でしか保存できません
                           ホームページビルダーでは (mif)形式のファイルはJPEG形式で保存される
画像ファイルの種類と特徴 :
   ホームページ標準画像形式・・・・・・・・・GIF と JPEG (ビットマップラスターイメージと呼ばれるピクセルより構成)
                           ホームページビルダーでは このほかに PNG形式の画像も可能である
   GIF(Graphics Interchange Format)・・・ロゴやアイコン・バナーなどの画像へ 広く利用されている
     インデックスカラー画像形式・・・・・・インデックスカラー(256色)でのファイル形式
                           更に LZW圧縮している ・ 圧縮率は最大で 50〜20%
     幾何学的な画像の保存に向く・・・・ 白地や同一色の多いグラフィック画像・幾何学的な画像の保存に向く
                           記号化なので JPEGのように絵などを高圧縮できないが 画像の劣化はない
     GIF形式の変遷・・・・・・・・・・・・・・・元はパソコン通信社(CompuServe社・AOLの傘下)で開発・拡張した
                           GIF89では 特定色透明化・インターレース(受信中に表示)・アニメーション
   JPEG(Joint Photographic Experts)・・自然風景写真など(色数の多い画像)に適したファイル形式
     ダイレクトカラー画像形式・・・・・・・・ RGB(Red/Green/Blue)の色情報による画像形式 ・ フルカラー形式とも呼ぶ
                           コンピュータディスプレイも このRGB情報により表示している (167000色)
     人間視覚特性より色を間引く・・・・・・画像をブロック化して 変化の緩やかな階層の情報を間引く方法
                           圧縮率を高くするほど 画質は劣化する
     写真画像に向く・・・・・・・・・・・・・・・・元は 高解像度のスキャナーで画像を取り込み 印刷するために開発されたもの
                           画像を受信しながら表示できるので サイズの大きな画像もスムーズに見られる
   PNG(Portable Network Graphics F)・・GIF形式(ユニシスの権利)に代わり作成されたもの
     GIFとJPEGの合成版機能・・・・・・・JPEGのように167000色・GIFのようにインターレース機能をもっている
                           今のところMacには表示できないなどがあり GIFに比べると今一つの感がある
   BMP(Windows BitMaP)・・・・・・・・・・・Windowsの殆どのアプリケーションで利用できる ・ インターネットでは不可
     Windows版ブラウザでの表示・・・・ <IMG>タグでリンクすると そのまま表示できる
                           Macのブラウザでは 表示できない
     HPビルダーではJPEGへ変換・・・・ホームページビルダーでBMP画像を挿入すると JPEGへ自動変換される
   ウェブアート(mif)・・・・・・・・・・・・・・・ウェブアートデザイナー標準形式
     全体と部分 どちらででも保存・・・・・・キャンバス全体で保存 :キャンバスはみ出し部分・複数画像レイヤーなども保存
                           また、オブジェクト単位でも保存することができる
     HPビルダーではJPEGへ変換・・・・ HPビルダーで編集中のホームページへ「mif」形式ファイルを挿入すると
                           JPEG形式に変換される ・ 「mif」形式のままではブラウザに表示されない
   上記以外の画像形式 と 取扱方法・・・ベクトルデータによる画像(CADなど・文字データも含む)もあるが プラグイン要
                              ActiveX ・ WindowsMediaPlayer ・ QuickTimePlayer など
オブジェクト結合で 新しいイメージを作る :
   画像の組合わせにより作成・・・・・・・・・ボタンやバナーを作るのに便利 (画像と文字の組合わせて作っていける)
   テンプレートギャラリー・・・・・・・・・・・・・ 「素材集」:アイコン・イラスト・写真 など
                           「ウェブアート素材」:画像と文字組合わせたもの など 多数準備されている


  ウェブアートデザイナーの各種操作 

オブジェクト画像を編集 :
   オブジェクト化にしてできること・・・・・・・自由に 配置変更したり・変形をすることができる
                           イメージ画像と同様に「フォトタッチ処理」ができる
                              明るさ・カラーバランス・傷補正・画像の部分合成・フィルタリングなど
   コマンドによる実行(複製・編集)・・・・・(オブジェクトを選択)→【編集】→〔オブジェクトの編集〕
                           または   〃    →{右クリック:オブジェクトの編集}
   オブジェクトの移動・変形操作・・・・・・・複成     : 【編集】→〔複成・コピー〕 または {右クリック:複成}
                           回転     : (オブジェクトの右上角のハンドルを回転方向にドラッグ)
                           変形     : (オブジェクトの左上角のハンドルをドラッグ)
                           位置指定  : 【編集】→〔オブジェクトの編集〕→(座標で指定)
                           透明設定  : 【編集】→〔オブジェクトの編集〕→(透明度指定)
                           切抜き   : 【ツール】→〔切抜き〕→<はっきり・・・ぼんやり>
                                    切抜き作業のことを 「マスキング」 と呼ぶ
                           非表示   : {右クリック:非表示}切抜き前の画像が残る・消す操作が要
ペイントツールの使い方 :
   コマンドによる設定・・・・・・・・・・・・・・・ 【ツール】→〔ペイント〕→(ペイントツール と パレット が表示される)  または
                           【表示】→〔イメージツールバー〕→[筆3本のメニュー:ペイントツール]→同様
                           <前景色> <背景色><スポイト>: ペイントツール左下表示のカラーパレットにある
   選択した色で塗りつぶす・・・・・・・・・・ [ジャーのツールメニュー:塗り潰し]→(同系色が 指定色になる)
                              塗りつぶしクリック箇所において 同系色の部分が指定色に変る
     色の選択はカラーパレットで・・・・・ 下記参照
   指定色で描く・・・・・・・・・・・・・・・・・・・ <線種ボタン選択:直線・ぼかし線ほか>→<■●選択>→(パレット上でドラッグ)
                              細かい描画の作業は : <虫眼鏡>→拡大表示してから作業する
   四角枠(枠線有無指定)描画・・・・・・・ 塗り潰し枠なしの描画 : 前景色だけで ■が描かれる
                           塗り潰し枠付きの描画 : 枠線が前景色の色で ・ 内部が背景色の色で描かれる
                           矩形の描画 : 矩形の枠だけが 前景色で描かれる
   消しゴムの使用・・・・・・・・・・・・・・・・・・<線種ボタン選択:直線・ぼかし線ほか>→<■●選択>→(パレット上でドラッグ)
                              線描画と同様の操作になるが 同様の操作により 消去作業ができる
カラーパレット・色の選択の使い方 :
   前景色と背景色の設定・・・・・・・・・・・ <前景色> と <背景色> →『色の選択』のWindowを出して色を指定する
                                        →<カラーパレットのスポイト>→(現物画より色を拾う)
   カラーパレットより前景色選択・・・・・・・ カラーパレットの <右向き黒三角ボタン> を押すと 色選択画面が表示される
                              その画面で 一覧の表示色をクリックすると <前景色>がその色に変る
   その他・色一覧からパレットに追加・・・<その他の色> または <前景色><背景色>のボタンを押すと
                              『色の設定テーブル』(その他・色一覧)が表示される
                           色一覧より 色を選択・クリックすると 下の2つの四角の箱に選択色が表示される
                              2つの四角の箱には 左側の箱が黒白混合色で ・ 右側の箱には純色が入る
     四角枠内の色を <前景色>へ・・・・・左側の枠内の色をクリックすると <前景色>ボタンの色が変り、描画に使用できる
                              右側の色を使用したいときは 右側枠内をダブルクリックし 左側の色を変える
     選択色をパレットに残す・・・・・・・・・ 左側の枠内の色を 今後も度々使用するのであれば カラーパレット一覧に加える
                              『色の設定テーブル』(その他・色一覧)の下部の<色の追加>ボタンを押す
     追加カラーパレット色の採用・・・・・・ 上記 「カラーパレットより前景色の選択」と同様の操作で その色を使用できる
                    削除・・・・・・カラーパレット一覧の最下部に 選択の色が追加されている ・消去は右クリック
画像全体に効果を付ける :
   コマンドによる実行
     効果(各種)・・・・・・・・・・・・・・・・・・(画像全体を選択)→【ツール】→〔効果〕→<効果><写真><色調><色温度> 又は
                           (画像全体を選択)→【表示】→〔イメージツールバー〕→[効果パレット]→〃〃〃〃
     影効果ダイヤログボックス・・・・・・・・(画像全体を選択)→【ツール】→〔影効果〕→『影効果ダイヤログボックス』
     ボタン効果ダイヤログボックス・・・・・(画像全体を選択)→【ツール】→〔ボタン効果〕→『影効果ダイヤログボックス』
   効果(各種)・・・・・・・・・・・・・・・・・・・・・<効果>  : 平滑化・ぼかし・油絵   縁取り・輪郭  シャープ・アンシャープ
                                  ピンチ・乱気流・蜃気楼  万華鏡・拡散  エンボス・波・渦・水滴
                                  タイル・モザイク
                           <写真>  : クロス・ミラージュ   センターフォーカス・ズーム・染み取り
                                  動き・風   ハーフ  直行→極 ・ 極→直行
                           <色調>  : グレースケール  色調2階調化・ハーフトーン  ネガ反転
                                  セピア・ポスタライズ
                           <色温度> : 朝夕・晴れ・日陰曇り  蛍光燈・白熱灯
   影効果・・・・・・・・・・・・・・・・・・・・・・・・ 『影効果』Window内で影部を{右ドラッグ}→(影の大きさ・方向を決める)→<OK>
                                  作画部分に影が付く ・ 色修正は別方法による
   ボタン効果・・・・・・・・・・・・・・・・・・・・・ 『ボタン効果』Window内で 《色の濃さ・ボタンの浮上り寸法設定》→<OK>
                                  四角・円などの図において 上記のボタン作業を行える
画像の色調・明るさ を整える :
   コマンドによる〔色調〕設定・・・・・・・・・・【ツール】→〔色調補正〕→《色の鮮やかさ》《色合い》《明るさ》
     色調の補正とは・・・・・・・・・・・・・・・写真撮影では 天候やストロボの影響で色が微妙に変化する ・ その補正をする
                              ダリレクトカラーの画像に対してできる ・ GIF形式でも可能である
                           《色の鮮やかさ》 : 濃度 ・ 色の強さ
                           《色合い》     : カラーバランス・・・写真が感光している場合はマゼンダで緑へ
                           《明るさ》     : 彩度
     補正前の状態に戻すには・・・・・・・・<リセット>
   コマンドによる〔明るさ〕設定・・・・・・・・・【ツール】→[明るさ・コントラスト補正] または 〔赤目補正〕
     明るさ・コントラストの補正・・・・・・・ 色調はそのままで
                           《明るさ》     : 全体の明るさ(光加減・眩しさ)
                           《コントラスト》  : 夫々の色の境界の明瞭さ
     赤目の補正・・・・・・・・・・・・・・・・・・ 《赤目》      : ストロボ撮影で赤くなる人の目を補正するもの


  ロゴやアニメーションの作成 

文字からロゴを作る(素材を利用) :
   タイプ文字を素材ロゴにて変換・・・・・・ 【表示】→〔テンプレートギャラリー〕→《タイプ文字》入力→[Webアート素材]
                              →(Webアート素材のマウスポインタにより キャンバス上で ドラッグ)
   ウェブアート素材によるロゴ・・・・・・・・・ウェブアートデザイナーでは 文字と画像を一体にして mif 形式の画像で扱う
                              ロゴやボタン バナーなどでは 拡大・縮小が多いが 画質が落ちない
                              mif形式は イメージ画像(ラスター形式画像)であるので これができる
      保存するとき mif→Jpeg・・・・・・・保存するときには ブラウザで使用できる Gif・Jpeg形式にする
                              【ファイル】→〔Web用保存ウィザード〕→<キャンバスなしで保存>
                              選択により 形式が変換される (Gif・Jpeg・PNGへ)
ウィザードを使って(自分でオリジナル)作成 :
   ロゴ作成ウィザード・・・・・・・・・・・・・・・ 【オブジェクト】→〔ロゴの作成〕
                              →《文字書体》《グラデーション・模様による縁取り》《色》
   ボタン作成ウィザード・・・・・・・・・・・・・・【オブジェクト】→〔ボタンの作成〕
                              → 上記同様に 各種効果を付けて オリジナル作成へ
   フォトフレームウィザード・・・・・・・・・・・ 【オブジェクト】→〔フォトフレームの作成〕
                              → 額縁の作成 (上記と同様の効果を付けられる
画像に動きを与える :
   ロールオーバとは・・・・・・・・・・・・・・・・・マウスポインタを置くと 別の画像に変わるような仕掛けが 出来る
                              2つのロゴ画像をキャンバスに並べ 2段階の登録を行う
     Java Script で記述してもよい・・・ HTMLファイルに <SCRIPT>〜</SCRIPT>で記述してもよい
                              ウェブアートデザイナーでの作成も 保存はJavaScript記述となる
   ロールオーバウィザード・・・・・・・・・・・・【オブジェクト】→〔ロールオーバーの設定〕
                              →<第一画像選択・登録>・<第二画像選択・登録>
                              →<ロールオーバ登録>→(GIf・Jpeg・PNG選択・保存)
ウェブアニメータで動画を作成 :
   アニメーションGIFを作る・・・・・・・・・・・ 【ツール/ウェブアートデザイナー】→〔ウェブアニメータ〕   
                             →『アニメーションウィザード』→ 次の3種から作成
   アニメーションウィザード使用・・・・・・・・<複数画像を組合せのアニメ>→ (別途作成画像を合成)
                          <文字アニメーション>→ (文字を多少変形させて見せる)
                          <一枚の画像からアニメ>→ (渦巻他 各種効果を付ける)
                          
     効果の種類・・・・・・・・・・・・・・・・・・ 下記で 方向・タイミング・繰返しなどいろいろ変化・組合わせできる
                              渦巻 ・ 拡散 ・ 動き(動揺) ・ 風(風見せの動く線)
                              ピンチ(縮小変形) ・ 2階調化(色を変化) ・ ハーフトーン(ぼかし)
                              ワイプ(漸次消去・漸次表示) ・ スクロール(漸次移動) など
   アニメGIF保存と実画面挿入・・・・・・・・【ファイル】→〔名前を付けて保存〕→(gif形式のファイルで保存される)
                              ホームページへの貼付けは: 【挿入】→〔画像ファイル〕
     作成途中のコマ単位での保存・・・・(画像のフレームを選択)→[フレーム保存/ツールバー]
   動画画面上に 文字を重ね書き・・・・・・【挿入】→〔レイアウト枠〕・・・・・右上の図(動画サンプル)は この方法で記入