団体 web 活用サポート : 情報発信による団体間交流から新芽を産む ( スローガン 自ら語れ ) 1 / 15 第 6 回セミナー / 全 12 (2014/03/26) 画像の加工処理実習 : リンクバナーの作成 <a href=" "target="

Transcription

1 1 / 15 第 6 回セミナー / 全 12 (2014/03/26) 画像の加工処理実習 : リンクバナーの作成 <a href=" "target="_blank"> 88 31px px px <img src=" width="160" height="70" border="0" alt=" 一宮市市民活動支援センター " /></a> px <a href=" target="_blank"> <img src=" width="220" height="64" alt=" 一宮市民活動情報サイト " title=" 一宮市民活動情報サイト " class="naka" /></a> リンクバナーの輪 px <a href=" src="banner/dwks138bn-691c.png" width="160" height="70" alt="" border="0" /></a>

2 2 / 15 リンクバナーの輪 (DWKS 提唱 ) 団体 A サイト 団体 B サイト 団体 E サイト 団体 C サイト 団体 D サイト

3 3 / 15 リンクバナーの作成 ( 視覚 ) 要素 バナー 画像形式 ( 拡張子 ):gif,jpg,png gif:256 色 透過 GIF アニメーション GIF インターレース GIF jpg: フルカラー 非可逆圧縮 デジタルカメラ png: フルカラー 可逆圧縮 透過処理 大きさ ( 縦横のサイズ ): 単位 = ピクセル 88x31(Micro Bar),234x60(Half Banner),468x60(Full Banner) 200x40( 日本で普及 ),160x70(DWKS 的考察 ) 配色 : カラーリングによるイメージづくり RGB: FFFFF 000,000, ,255,255 ( 赤, 緑, 青 ) 文字列 : 表題もしくは愛称など... イメージ画像 : イラストや写真など... 画像処理ソフト :JTrim, ペイント,GIMP,PhotoShop,Illustrator... レイヤー機能の有無

4 4 / 15 リンクバナーの素案 リンク先 URL [ ] バナーファイル名 [. ] ( ファイル形式 : *.gif, *.jpg, *.png) html アンカータグ : <a href=" "> <img src=". " width=" " height=" " alt="" border="0" /></a> 横幅 (width) px 縦幅 (height) px 背景色 RGB : 文字色 RGB : 文字色 RGB : 文字色 RGB :

5 5 / 15 画像編集ソフト :JTrim(Windows 版 : ペイント系 ) Jtrim( ジェイトリム ) は初心者にも簡単に操作が出来るフォトレタッチソフトです 多くの加工機能で画像に様々な効果を与えることが できます 非常に軽快に動作するため ストレスなく操作できます 最新バージョン 1.53c 最終更新日 2007/10/20 動作環境 Windows95/98/Me/NT4/2000/XP 種別 フリーソフトウェア DOWNLOAD 書庫版とセットアップ版は同一のものです どちらをダウンロードされても結構です 圧縮書庫の解凍が出来ない方 または面倒な方はセットアップ版をお使いください セットアップ版 LHA 書庫版 ( 別途解凍ソフトが必要です ) JTrim Version 1.53c (1491KB) JTrim Version 1.53c (1284KB) jt153c.exe jt153c.lzh JTrim Ring / フォトレタッチ 画像加工サイトのリンク集

6 6 / 15 新規描画キャンバスの作成 [ ファイル ] [ 新規作成 ] をクリック 2. 新規作成 ウィンドウが開く 画像横サイズ : 画像縦サイズ : キャンバスの色 : [OK] ボタンをクリック 3 3. 描画キャンバスが作成される

7 7 / 15 描画領域を 2 分して背景色を変える 1. 2つ目の JTrim を起動する 2. 2 分割する背景色の描画領域を作成する 画像横サイズ : 画像縦サイズ : キャンバスの色 : [OK] ボタンをクリック ポイント 2 つの描画領域を合成して 1 つの描画領域の中に 2 つの背景色領域を作成する 3. [ 編集 ] [ 全選択 / 選択解除 ] をクリック

8 8 / 15 描画領域を 2 分して背景色を変える キャンバスの合成 2 つ目の JTrim 2 つ目の JTrim 1 つ目の JTrim 描画領域が全選択される 1 つ目の JTrim [ 編集 ] [ コピー ] をクリックする [ 編集 ] [ 合成貼り付け ] をクリックする 1 つ目の JTrim 描画領域 1 に描画領域 2 が合成貼り付けされる 描画領域 2 を任意の位置に移動して 位置確定 する

9 9 / 15 描画領域の色の塗りつぶし 1 つ目の JTrim 塗りつぶし アイコンをクリック 塗りつぶし ウィンドウの 左 色が マウスの左クリックで塗り替えられる

10 10 / 15 色の選択

11 11 / 15 文字の描画

12 12 / 15 フリーで使える主な画像編集ソフト ペイント系 JTrim (WindowsXP 対応 : 開発終了 )...Windows7 動作確認済 PictBear( ピクトベア )- 多機能で軽快なペイントソフト フェンリル (Windows7 対応 : 開発終了 ) Pinta: Painting Made Simple - Pinta (Windows,Mac OS X,Linux/Ubuntu) GIMP - The GNU Image Manipulation Program (Windows,Mac OS X,Linux) GIMP (GNU 画像編集プログラム ) 使用のてびき : 2.8-Beta( 日本語版 ) ドロー系 Draw Freely. Inkscape (Windows,Mac OS X,Linux)

13 13 / 15 伝えたいことを正確に伝えるために 文書互換のまとめ 今日 昨日 明日 NG 2013 年 12 月 5 日 ( 木 ) 具体的な日時の表記を心がける 読み手はその記事をいつ読むかは読み手の都合による 保育園で 会議室で 公民館で NG 会場の正式名称を表記するよう心がける 読み手はこの地域に詳しい人ばかりとは限らない やります より やりました の報告レポートを充実させる やりました のひとつひとつを具体的に短文で表記する やりました をイラストや写真で補足する 見えない読み手 に想像力を働かせて配慮する 見えない読み手 は 通行人? 誰に伝えたいのか? 文書を提供する際には 相手の再生環境を考慮 ( 確認 ) して適切なファイル形式を選択する配慮が望ましい 文書を提供する対象が不特定多数となる場合は できる限り汎用性の高いファイル形式の選択を考慮することが望ましい メールに添付する場合は 個々のメールサーバの仕様により扱えるファイルサイズが制限されている場合があるので注意が必要 (1 MB 程度が目安 ) 受け取り側は 提供ファイルのファイル形式を吟味した上で 当該ファイルの再生 編集に適したアプリケーションを準備する 特定のOS 特定のアプリケーションに依存したファイル形式の利用の見直しが必要 回覧文書の回収課題

14 14 / 15 一宮市民活動情報サイト ( トップ ) 資料 サイトリンクの図 一宮市民活動情報サイト : 団体マイページ ホーム ( 基本情報 / 問い合せ ) テキストリンク 信頼性の担保 ブログ ( 動的情報 ) ホームページ ( 静的情報 ) 手軽な更新 日々のこまめな活動報告に適している 話題提供 リピータの確保 ライターの力量に依存する フィードバックが得られにくい 記事同士の関連性を持たせにくい (1 対多 ) 相互補完 固定情報の整理に適している 団体概要 重要なお知らせ 主要コンテンツの紹介 お問合せ 更新 管理に基礎的な知識が必要 コンテンツ閲覧誘導に構造的 デザイン的な配慮が必要 リンク構成の設計 一宮市市民活動支援センター <a href=" "target="_blank"><img src=" width="200" height="60" border="0" alt=" 一宮市市民活動支援センター " /></a>

15 15 / 15 情報発信を考える フリートークな座談会 一宮市市民活動支援センター 毎月第 3 土曜日 18:30 20:30 ーーーーーーーーーーーーーーーーーーーーーーーーー 個別な課題の持ち寄り = 掲示板 の日常的活用 誰でも閲覧可 : 情報のオープン化 ( 投稿は メンバー登録 ) 課題の持ち寄り アイデアの検討 他分野からの意見交換 対策案の情報蓄積 情報のオープン化と共有 新芽を産む