| ウェブアートデザイナーで画像を加工する ホームページの画像を加工 （役割・起動・編集・保存） ウェブアートデザイナー基本操作 （各部名称・画像読込・合成・画像形式） ウェブアートデザイナー各種操作 （画像編集・ペイントツール・カラーパレット） （画像全体に効果をつける・色調明るさを整える） ロゴやアニメーションの作成 （素材を利用・自分で作る・ロールオーバ・アニメション） ホームページの画像を加工 ■画像とウェブアートデザイナーの役割 ： ホームページに使用の画像・・・・・【挿入】→〔画像の挿入〕→付属の画像・自作の画像などを貼付けできる テンプレートや素材集からの素材は ページの色調にマッチし難い ウェブアートデザイナーで編集・・・そこで 挿入した画像を 編集したり色調を変えたりするのが この編集機能 素材を加工したり、一から画像を作成したりできる アニメーションも 付属の「ウェブアニメータ」の使用により 行える 「画像の編集」機能は必要最小限の処理だけ ＧＩＦやＪＰＥＧ形式への変換・トリミング切抜きなどのみ 専用ソフトの概略機能を持つ・・・・下記専用ソフトがあるが 大略その機能を「ウェブアートデザイナー」は持っている ＰｈｏｔｏＤｒａｗ ・ ＰｈｏｔｏＥｄｉｔｏｒ（ＭｉｃｒｏｓｏｆｔＯｆｆｉｃｅに付属） ＡｄｏｂｅＰｈｏｔｏｓｈｏｐ ・ ＰａｉｎｔＳｈｏｐ など ■起動と編集はじめ ： 起動操作・・・・・・・・・・・・・・・・・・・①【ツール】→〔ウェブアートデザイナーを起動〕 または ②【スタート】→〔プログラム〕→〔ＩＢＭ・ＨＰビルダー〕→〔Ｗ．Ａ．デザイナー〕 画像選択し編集へ・・・・・・・・・・・・①（画像を選択）→｛右クリック：ウェブアートデザイナーで編集｝ または ②【編集】→〔ファイルから貼付け〕 画像を編集する・・・・・・・・・・・・・・ ＜背景＞→（色を選択・ドラッグ＆ドロップ）→（編集パレットへ）→各種編集へ ＜ロゴ＞・＜フレーム＞・＜ボタン＞など 同様にして追加して行ける 画像を加工する・・・・・・・・・・・・・・ 「画像の編集」では１つの画像が対象であったが こちらでは複数レイヤーが可能 テンプレートギャラリーより 各種画像を取り出し組合わせて 画像を作るとよい ■編集画像を保存する ： コマンドによる設定・・・・・・・・・・・・【ファイル】→〔他形式ｊ保存・Ｗｅｂ用保存ウィザード または キャンパスを上書保存〕 保存時の画像形式・・・・・・・・・・・・（画像登録後）→【ファイル】→〔アプリケーションの終了〕 元の画像が書き換えられた状態で 保存される ・ 右上「×」終了では変更なし ウェブアートデザイナーの基本操作 ■各部の名称 ： 標準ツールバー・・・・・・・・・・・・・・・＜キャンバス作成・保存＞＜コピー・移動＞＜ロゴ・ボタン・フォトフレーム作成＞ イメージツールバー・・・・・・・・・・・・・イメージを作成する 道具 キャンバス・・・・・・・・・・・・・・・・・・・ オブジェクトを表示し 編集して行く領域です テンプレートギャラリー・・・・・・・・・・・プログラムに付属の素材集やフォルダ内の画像を一覧表示します オブジェクトスタック・・・・・・・・・・・・・ 複数のオブジェクトの重ね順を（レイヤー）調整できます ステータスバー・・・・・・・・・・・・・・・・ マウスポインタの置かれている部分の状況を表示 ・ その部分のヘルプは'Ｆ１'を カラーパレット・・・・・・・・・・・・・・・・・・絵の具を出して 色調整を行うものが 上記の他に よく使うものとしてあります ■キャンパスに画像・オブジェクトの貼付け ： コマンドによる実行 ウェブアートデザイナー起動・・・・ 【ツール】→〔ウェブアートデザイナー起動〕 または 【スタート】より （前記） キャンバスを開く・・・・・・・・・・・・・【ファイル】→〔キャンバスを開く・新規作成〕 キャンパスへの画像取込・・・・・・ 【編集】→〔ファイルから貼付け〕 （注意 ： 同時に複数のキャンバスを開くことは出来ません） キャンバスの初期設定 キャンパスのサイズ設定・・・・・・・① キャンバスは最初に取り込んだ画像の大きさにより 初期設定される ② 次に取り込んだ画像が より大きなものですと 画面からはみ出してしまいます ③ 【編集】→〔キャンバスの設定〕→『キャンバスの設定』ボックスでサイズを設定 または 【ファイル】→〔サイズを指定して新規作成〕 （旧バージョン） キャンパスの利用・・・・・・・・・・・・・・・ 【表示】→〔拡大表示〕〔縮小表示〕〔原寸表示〕 キャンバス上に格子を表示・・・・・【表示】→〔グリッドの表示〕 テンプレートギャラリーから取込・・・・・【編集】→〔素材集から貼付け〕 ウェブアートでは回転・変形が可能・・・ホームページで利用する画像はピクセル形式が多く回転などを行えないが ウェブアートデザイナーでは オブジェクトとして扱うので それらが可能である 通常は変形の際画質は落ちて行くが オブジェクトであるので落ちない ウェブアート形式オブジェクト・・・・・・素材集から利用できるオブジェクト や ロゴマーク ナンバーなど ウェブの大きさに合わせて 度々変更するようなものに よく使われる ■画像・オブジェクトの合成 ： オブジェクトスタックから選択・・・・・・・・キャンバスへ画像を取り込むと 画面右側に各画像のレイヤーが表示される 複数画像がキャンバスに重なって表示されるが その上下関係がそこで分る そのレイヤーをドラッグすることにより それらの上下関係を変えることもできる ホームページ形式で保存・・・・・・・・・・・【ファイル】→〔他形式保存〕 または 〔Ｗｅｂ用保存ウィザード〕 →<保存形式選択（ＧＩＦ・ＪＥＦ・ＰＮＧ）> 保存形式別詳細設定・・・・・・・・・・・ＪＰＥＧ形式の場合： →<ファイルサイズ> ：ファイルサイズを上げると画質は良くなる →<プログレッシブ> ：圧縮有無 →<キャンバスの色> ： 保存先の設定・・・・・・・・・・・・・・・・ 画像挿入のホームページを フォルダへ登録の際、画像も同フォルダへ入る オブジェクト単位で保存・・・・・・・・・・・・（オブジェクトを選択）→【ファイル】→〔オブジェクト単位で保存〕 →<保存形式選択（ＧＩＦ・ＪＥＦ・ＰＮＧ）> この際の保存は ウェブアート形式（ｍｉｆ）でしか保存できません ホームページビルダーでは （ｍｉｆ）形式のファイルはＪＰＥＧ形式で保存される ■画像ファイルの種類と特徴 ： ホームページ標準画像形式・・・・・・・・・ＧＩＦ と ＪＰＥＧ （ビットマップ や ラスターイメージと呼ばれるピクセルより構成） ホームページビルダーでは このほかに ＰＮＧ形式の画像も可能である GIF(Graphics Interchange Format)・・・ロゴやアイコン・バナーなどの画像へ 広く利用されている インデックスカラー画像形式・・・・・・インデックスカラー（２５６色）でのファイル形式 更に ＬＺＷ圧縮している ・ 圧縮率は最大で 50～20％ 幾何学的な画像の保存に向く・・・・ 白地や同一色の多いグラフィック画像・幾何学的な画像の保存に向く 記号化なので ＪＰＥＧのように絵などを高圧縮できないが 画像の劣化はない ＧＩＦ形式の変遷・・・・・・・・・・・・・・・元はパソコン通信社（CompuServe社・ＡＯＬの傘下）で開発・拡張した ＧＩＦ８９ａでは 特定色透明化・インターレース（受信中に表示）・アニメーション JPEG(Joint Photographic Experts)・・自然風景写真など（色数の多い画像）に適したファイル形式 ダイレクトカラー画像形式・・・・・・・・ ＲＧＢ（Red/Green/Blue)の色情報による画像形式 ・ フルカラー形式とも呼ぶ コンピュータディスプレイも このＲＧＢ情報により表示している （167000色） 人間視覚特性より色を間引く・・・・・・画像をブロック化して 変化の緩やかな階層の情報を間引く方法 圧縮率を高くするほど 画質は劣化する 写真画像に向く・・・・・・・・・・・・・・・・元は 高解像度のスキャナーで画像を取り込み 印刷するために開発されたもの 画像を受信しながら表示できるので サイズの大きな画像もスムーズに見られる PNG(Portable Network Graphics F)・・ＧＩＦ形式（ユニシスの権利）に代わり作成されたもの ＧＩＦとＪＰＥＧの合成版機能・・・・・・・ＪＰＥＧのように167000色・ＧＩＦのようにインターレース機能をもっている 今のところＭａｃには表示できないなどがあり ＧＩＦに比べると今一つの感がある ＢＭＰ（Windows BitMaP)・・・・・・・・・・・Ｗｉｎｄｏｗｓの殆どのアプリケーションで利用できる ・ インターネットでは不可 Ｗｉｎｄｏｗｓ版ブラウザでの表示・・・・ <ＩＭＧ>タグでリンクすると そのまま表示できる Ｍａｃのブラウザでは 表示できない ＨＰビルダーではＪＰＥＧへ変換・・・・ホームページビルダーでＢＭＰ画像を挿入すると ＪＰＥＧへ自動変換される ウェブアート（ｍｉｆ）・・・・・・・・・・・・・・・ウェブアートデザイナー標準形式 全体と部分 どちらででも保存・・・・・・キャンバス全体で保存 ：キャンバスはみ出し部分・複数画像レイヤーなども保存 また、オブジェクト単位でも保存することができる ＨＰビルダーではＪＰＥＧへ変換・・・・ ＨＰビルダーで編集中のホームページへ「ｍｉｆ」形式ファイルを挿入すると ＪＰＥＧ形式に変換される ・ 「ｍｉｆ」形式のままではブラウザに表示されない 上記以外の画像形式 と 取扱方法・・・ベクトルデータによる画像（ＣＡＤなど・文字データも含む）もあるが プラグイン要 ＡｃｔｉｖｅＸ ・ WindowsMediaPlayer ・ QuickTimePlayer など ■オブジェクト結合で 新しいイメージを作る ： 画像の組合わせにより作成・・・・・・・・・ボタンやバナーを作るのに便利 （画像と文字の組合わせて作っていける） テンプレートギャラリー・・・・・・・・・・・・・ 「素材集」：アイコン・イラスト・写真 など 「ウェブアート素材」：画像と文字組合わせたもの など 多数準備されている ウェブアートデザイナーの各種操作 ■オブジェクト画像を編集 ： オブジェクト化にしてできること・・・・・・・自由に 配置変更したり・変形をすることができる イメージ画像と同様に「フォトタッチ処理」ができる 明るさ・カラーバランス・傷補正・画像の部分合成・フィルタリングなど コマンドによる実行（複製・編集）・・・・・(オブジェクトを選択）→【編集】→〔オブジェクトの編集〕 または 〃 →｛右クリック：オブジェクトの編集｝ オブジェクトの移動・変形操作・・・・・・・複成 ： 【編集】→〔複成・コピー〕 または ｛右クリック：複成｝ 回転 ： （オブジェクトの右上角のハンドルを回転方向にドラッグ） 変形 ： （オブジェクトの左上角のハンドルをドラッグ） 位置指定 ： 【編集】→〔オブジェクトの編集〕→（座標で指定） 透明設定 ： 【編集】→〔オブジェクトの編集〕→（透明度指定） 切抜き ： 【ツール】→〔切抜き〕→<はっきり・・・ぼんやり> 切抜き作業のことを 「マスキング」 と呼ぶ 非表示 ： ｛右クリック：非表示｝切抜き前の画像が残る・消す操作が要 ■ペイントツールの使い方 ： コマンドによる設定・・・・・・・・・・・・・・・ 【ツール】→〔ペイント〕→（ペイントツール と パレット が表示される） または 【表示】→〔イメージツールバー〕→[筆３本のメニュー：ペイントツール]→同様 <前景色> <背景色><スポイト>： ペイントツール左下表示のカラーパレットにある 選択した色で塗りつぶす・・・・・・・・・・ [ジャーのツールメニュー：塗り潰し]→（同系色が 指定色になる） 塗りつぶしクリック箇所において 同系色の部分が指定色に変る 色の選択はカラーパレットで・・・・・ 下記参照 指定色で描く・・・・・・・・・・・・・・・・・・・ <線種ボタン選択：直線・ぼかし線ほか>→<■●選択>→（パレット上でドラッグ） 細かい描画の作業は ： <虫眼鏡>→拡大表示してから作業する 四角枠（枠線有無指定）描画・・・・・・・ 塗り潰し枠なしの描画 ： 前景色だけで ■が描かれる 塗り潰し枠付きの描画 ： 枠線が前景色の色で ・ 内部が背景色の色で描かれる 矩形の描画 ： 矩形の枠だけが 前景色で描かれる 消しゴムの使用・・・・・・・・・・・・・・・・・・<線種ボタン選択：直線・ぼかし線ほか>→<■●選択>→（パレット上でドラッグ） 線描画と同様の操作になるが 同様の操作により 消去作業ができる ■カラーパレット・色の選択の使い方 ： 前景色と背景色の設定・・・・・・・・・・・ <前景色> と <背景色> →『色の選択』のＷｉｎｄｏｗを出して色を指定する →<カラーパレットのスポイト>→（現物画より色を拾う） カラーパレットより前景色選択・・・・・・・ カラーパレットの <右向き黒三角ボタン> を押すと 色選択画面が表示される その画面で 一覧の表示色をクリックすると <前景色>がその色に変る その他・色一覧からパレットに追加・・・<その他の色> または <前景色><背景色>のボタンを押すと 『色の設定テーブル』（その他・色一覧）が表示される 色一覧より 色を選択・クリックすると 下の２つの四角の箱に選択色が表示される ２つの四角の箱には 左側の箱が黒白混合色で ・ 右側の箱には純色が入る 四角枠内の色を <前景色>へ・・・・・左側の枠内の色をクリックすると <前景色>ボタンの色が変り、描画に使用できる 右側の色を使用したいときは 右側枠内をダブルクリックし 左側の色を変える 選択色をパレットに残す・・・・・・・・・ 左側の枠内の色を 今後も度々使用するのであれば カラーパレット一覧に加える 『色の設定テーブル』（その他・色一覧）の下部の<色の追加>ボタンを押す 追加カラーパレット色の採用・・・・・・ 上記 「カラーパレットより前景色の選択」と同様の操作で その色を使用できる 削除・・・・・・カラーパレット一覧の最下部に 選択の色が追加されている ・消去は右クリック ■画像全体に効果を付ける ： コマンドによる実行 効果（各種）・・・・・・・・・・・・・・・・・・（画像全体を選択）→【ツール】→〔効果〕→<効果><写真><色調><色温度> 又は （画像全体を選択）→【表示】→〔イメージツールバー〕→[効果パレット]→〃〃〃〃 影効果ダイヤログボックス・・・・・・・・（画像全体を選択）→【ツール】→〔影効果〕→『影効果ダイヤログボックス』 ボタン効果ダイヤログボックス・・・・・（画像全体を選択）→【ツール】→〔ボタン効果〕→『影効果ダイヤログボックス』 効果（各種）・・・・・・・・・・・・・・・・・・・・・<効果> ： 平滑化・ぼかし・油絵 縁取り・輪郭 シャープ・アンシャープ ピンチ・乱気流・蜃気楼 万華鏡・拡散 エンボス・波・渦・水滴 タイル・モザイク <写真> ： クロス・ミラージュ センターフォーカス・ズーム・染み取り 動き・風 ハーフ 直行→極 ・ 極→直行 <色調> ： グレースケール 色調２階調化・ハーフトーン ネガ反転 セピア・ポスタライズ <色温度> ： 朝夕・晴れ・日陰曇り 蛍光燈・白熱灯 影効果・・・・・・・・・・・・・・・・・・・・・・・・ 『影効果』Ｗｉｎｄｏｗ内で影部を｛右ドラッグ｝→（影の大きさ・方向を決める）→<ＯＫ> 作画部分に影が付く ・ 色修正は別方法による ボタン効果・・・・・・・・・・・・・・・・・・・・・ 『ボタン効果』Ｗｉｎｄｏｗ内で 《色の濃さ・ボタンの浮上り寸法設定》→<ＯＫ> 四角・円などの図において 上記のボタン作業を行える ■画像の色調・明るさ を整える ： コマンドによる〔色調〕設定・・・・・・・・・・【ツール】→〔色調補正〕→《色の鮮やかさ》《色合い》《明るさ》 色調の補正とは・・・・・・・・・・・・・・・写真撮影では 天候やストロボの影響で色が微妙に変化する ・ その補正をする ダリレクトカラーの画像に対してできる ・ ＧＩＦ形式でも可能である 《色の鮮やかさ》 ： 濃度 ・ 色の強さ 《色合い》 ： カラーバランス・・・写真が感光している場合はマゼンダで緑へ 《明るさ》 ： 彩度 補正前の状態に戻すには・・・・・・・・<リセット> コマンドによる〔明るさ〕設定・・・・・・・・・【ツール】→［明るさ・コントラスト補正］ または 〔赤目補正〕 明るさ・コントラストの補正・・・・・・・ 色調はそのままで 《明るさ》 ： 全体の明るさ（光加減・眩しさ） 《コントラスト》 ： 夫々の色の境界の明瞭さ 赤目の補正・・・・・・・・・・・・・・・・・・ 《赤目》 ： ストロボ撮影で赤くなる人の目を補正するもの ロゴやアニメーションの作成 ■文字からロゴを作る（素材を利用） ： タイプ文字を素材ロゴにて変換・・・・・・ 【表示】→〔テンプレートギャラリー〕→《タイプ文字》入力→［Ｗｅｂアート素材］ →（Ｗｅｂアート素材のマウスポインタにより キャンバス上で ドラッグ） ウェブアート素材によるロゴ・・・・・・・・・ウェブアートデザイナーでは 文字と画像を一体にして ｍｉｆ 形式の画像で扱う ロゴやボタン バナーなどでは 拡大・縮小が多いが 画質が落ちない ｍｉｆ形式は イメージ画像（ラスター形式画像）であるので これができる 保存するとき ｍｉｆ→Ｊｐｅｇ・・・・・・・保存するときには ブラウザで使用できる Ｇｉｆ・Ｊｐｅｇ形式にする 【ファイル】→〔Ｗｅｂ用保存ウィザード〕→<キャンバスなしで保存> 選択により 形式が変換される （Ｇｉｆ・Ｊｐｅｇ・ＰＮＧへ） ■ウィザードを使って（自分でオリジナル）作成 ： ロゴ作成ウィザード・・・・・・・・・・・・・・・ 【オブジェクト】→〔ロゴの作成〕 →《文字書体》《グラデーション・模様による縁取り》《色》 ボタン作成ウィザード・・・・・・・・・・・・・・【オブジェクト】→〔ボタンの作成〕 → 上記同様に 各種効果を付けて オリジナル作成へ フォトフレームウィザード・・・・・・・・・・・ 【オブジェクト】→〔フォトフレームの作成〕 → 額縁の作成 （上記と同様の効果を付けられる ■画像に動きを与える ： ロールオーバとは・・・・・・・・・・・・・・・・・マウスポインタを置くと 別の画像に変わるような仕掛けが 出来る ２つのロゴ画像をキャンバスに並べ ２段階の登録を行う Ｊａｖａ Ｓｃｒｉｐｔ で記述してもよい・・・ ＨＴＭＬファイルに <SCRIPT>～</SCRIPT>で記述してもよい ウェブアートデザイナーでの作成も 保存はＪａｖａＳｃｒｉｐｔ記述となる ロールオーバウィザード・・・・・・・・・・・・【オブジェクト】→〔ロールオーバーの設定〕 →<第一画像選択・登録>・<第二画像選択・登録> →<ロールオーバ登録>→（ＧＩｆ・Ｊｐｅｇ・ＰＮＧ選択・保存） ■ウェブアニメータで動画を作成 ：
渦巻 ・ 拡散 ・ 動き（動揺） ・ 風（風見せの動く線） ピンチ（縮小変形） ・ ２階調化（色を変化） ・ ハーフトーン（ぼかし） ワイプ（漸次消去・漸次表示） ・ スクロール（漸次移動） など アニメＧＩＦ保存と実画面挿入・・・・・・・・【ファイル】→〔名前を付けて保存〕→（ｇｉｆ形式のファイルで保存される） ホームページへの貼付けは： 【挿入】→〔画像ファイル〕 作成途中のコマ単位での保存・・・・（画像のフレームを選択）→［フレーム保存／ツールバー］ 動画画面上に 文字を重ね書き・・・・・・【挿入】→〔レイアウト枠〕・・・・・右上の図（動画サンプル）は この方法で記入 |
