情報機器の操作テキスト 10
トップページ用のロゴその他の画像を作る

「おはようフェルプス君。今回の任務はトップページ用のロゴその他の画像を作ることにある。 例によって、君もしくはメンバーが捕らえられ、あるいは殺されても 当局はいっさい関知しないからそのつもりで。 尚、このテープは自動的に消滅しない。クルクル回り続ける。 成功を祈る」
サンプル
兵庫県立兵庫高校61陽会同窓会のページのリンク集

目標

準備

作業1

例1

  1. ファイル 新規作成(or 白紙アイコン)
    新規作成
    (トップページのロゴにするなら。もっと大きくしたほうがいい。バナーならこんな大きさかな)
  2. 編集 文字入れ(or Aアイコン)
    文字入れ  文字入れ結果
    メイン画面上の文字をドラッグして位置を調整する。
  3. 加工 ガウスぼかし
    ガウスぼかし ガウスぼかし結果
  4. もう一度文字入れ
    もう一度文字入れ
  5. 加工 立体枠をつける
    立体枠をつける
  6. 名前を付けて保存する
    名前を付けて保存する

例2

  1. ファイル 新規作成(or 白紙アイコン)
    新規作成
  2. 編集 文字入れ(or Aアイコン)
    黒
  3. 編集 文字入れ(or Aアイコン)
    白
  4. 編集 文字入れ(or Aアイコン)
    灰
  5. 加工 立体枠をつける
    枠
  6. こっちの方が綺麗だけれど、どうやって作ったか?
    別 ヒント:大きく作って、ぼかして、縮小。

作業2

  • 自分で撮影した画像やネット上から貰ってきた画像をいろいろと加工する。
    元の画像

    加工した画像

    作業3

    ページの背景画像を作る。
    縦グラデーション背景ページサンプル
    これは、

    1. ファイル 新規作成(or 白紙アイコン)
    2. 縦900横2という細長い画像を作る。
    3. CTRL+ACTRL+Cで画像全体を範囲指定する。
    4. カラー グラデーション で 色1・色2に好きな色を指定し、グラデーション方向を指定して、不透明度(100なら、指定した色が濃く、0に近くするほど薄くなる)を指定して「OK」をクリックする。
    5. サンプルを右クリック「対象をファイルに保存」で自分のマイドキュメントpublic_htmlに保存しておいて、
    6. 画像ファイルを「wall1.jpg」という名前で、マイドキュメントpublic_htmlに保存する。
    7. マイドキュメントpublic_htmlsample10wall.htmlをクリックして、背景がどんな色具合かを確かめる。
    横にグラデーションをかけることもできます。
    横グラデーション背景ページサンプル
    ページを表示して、ソースを表示しましょう。
    ペイントで画像を作って、背景にすることもできます。(gifかjpgかpngで、bmpはネット上で見えません)
    サンプル
    ページを表示して、ソースを表示しましょう。
    こういう背景に直接文字を表示すると読みにくいので、文字表示領域を作ってやる必要があります。
    サンプル
    この背景画像の作り方は、ペイントを作っておいて、を切り抜いてファイルにします。ブラウザが縦横に繰り返して表示してくれるので、最小の画像があれば良いのです。

    授業終了五分前

    情報機器の操作 受講者 レポート提出用 掲示板 の「内容欄」に、今日の作業の感想を書く。
    今日作った画像を、public_htmlフォルダに入れて、掲示板のURL欄に、その画像のURLを記入する。
    http://satsuki.ex.osaka-kyoiku.ac.jp/~ID/画像ファイル名(拡張子:jpgとかgifとかpngとかを忘れないように)