Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
1 / 15
第 6回セミナー/全 12 (2014/03/26)
画像の加工処理 実習:リンクバナーの作成
88×31px 160×70px 200×60px
<a href="http://www.138cc.org/ "target="_blank">
<img src="http://www.138cc.org/icasc-160_70.jpg" width="160" height="70" border="0" alt="一宮市市民活動支援センター" /></a>
220×64px
<a href="http://genki365.net/gnki/customer/ichinomiya/index.php" target="_blank">
<img src="http://www.138cc.org/icasc/wp-content/themes/marumaru/image/bn_05.jpg" width="220" height="64"
alt="一宮市民活動情報サイト" title="一宮市民活動情報サイト" class="naka" /></a>
160×70px
<a href="http://genki365.net/gnki/mypage/index.php?gid=G0000691"><img src="banner/dwks138bn-691c.png" width="160" height="70" alt="" border="0" /></a>
リンクバナーの輪
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
2 / 15
リンクバナーの輪(DWKS提唱)
団体 A サイト
団体 E サイト団体 B サイト
団体 C サイト 団体 D サイト
http://www.138cc.org/
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
3 / 15
リンクバナーの作成(視覚)要素http://ja.wikipedia.org/wiki/バナー
• 画像形式(拡張子):gif,jpg,png
gif:256色、透過GIF、アニメーションGIF、インターレースGIF
jpg:フルカラー、非可逆圧縮、デジタルカメラ
png:フルカラー、可逆圧縮、透過処理
• 大きさ(縦横のサイズ):単位=ピクセル
88x31(Micro Bar),234x60(Half Banner),468x60(Full Banner)
200x40(日本で普及),160x70(DWKS 的考察 )
• 配色:カラーリングによるイメージづくり
RGB:000000〜FFFFF、000,000,000〜255,255,255、(赤,緑,青)
▪文字列:表題もしくは愛称など....
▪イメージ画像:イラストや写真など....
• 画像処理ソフト:JTrim,ペイント,GIMP,PhotoShop,Illustrator....
▪レイヤー機能の有無
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
4 / 15
リンクバナーの素案
リンク先URL [ http:// ]
バナーファイル名 [ . ] (ファイル形式: *.gif, *.jpg, *.png)
▽htmlアンカータグ:
<a href="http://___________________________">
<img src="____.__" width="__" height="__" alt="" border="0" /></a>
横幅 (width)____________px
縦幅 (height)____________px
背景色 RGB : ____ ____ ____
文字色 RGB : ____ ____ ____
文字色 RGB : ____ ____ ____
文字色 RGB : ____ ____ ____
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
5 / 15
画像編集ソフト:JTrim(Windows版:ペイント系)
Jtrim(ジェイトリム)は初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることが
できます。非常に軽快に動作するため、ストレスなく操作できます。http://www.woodybells.com/jtrim.html
最新バージョン 1.53c
最終更新日 2007/10/20
動作環境 Windows95/98/Me/NT4/2000/XP
種別 フリーソフトウェア
▲JTrim Ring / フォトレタッチ、画像加工サイトのリンク集 http://www5f.biglobe.ne.jp/~ayum/ring/jtrimring.html
DOWNLOAD書庫版とセットアップ版は同一のものです。どちらをダウンロードされても結構です。
圧縮書庫の解凍が出来ない方、または面倒な方はセットアップ版をお使いください。
▼ セットアップ版 ▼ LHA 書庫版(別途解凍ソフトが必要です)
JTrim Version 1.53c (1491KB) JTrim Version 1.53c (1284KB)
jt153c.exe jt153c.lzh ⇩
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
6 / 15
【新規描画キャンバスの作成】
1. [ファイル]→[新規作成]をクリック
2. 「新規作成」ウィンドウが開く
●画像横サイズ:_______
●画像縦サイズ:_______
●キャンバスの色:______
⇨[OK]ボタンをクリック
3. 描画キャンバスが作成される
①
②
③
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
7 / 15
【描画領域を2分して背景色を変える】
1. 2つ目のJTrimを起動する
2. 2分割する背景色の描画領域を作成する
●画像横サイズ:_______
●画像縦サイズ:_______
●キャンバスの色:______
⇨[OK]ボタンをクリック
3. [編集]→[全選択/選択解除]をクリック⇧
ポイント
2つの描画領域を合成して、
1つの描画領域の中に2つの背景色領域を作成する
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
8 / 15
【描画領域を2分して背景色を変える】⇨【キャンバスの合成】 ▼2つ目の JTrim ▼2つ目の JTrim ▼1つ目の JTrim
▼1つ目の JTrim ▼1つ目の JTrim
描画領域1に描画領域2が合成貼り付けされる 描画領域2を任意の位置に移動して「位置確定」する
描画領域が全選択される[ 編集 ]→[コピー ] をクリックする [ 編集 ]→[合成貼り付け ] をクリックする
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
9 / 15
【描画領域の色の塗りつぶし】 ▼1つ目の JTrim
「塗りつぶし」アイコンをクリック▼
「塗りつぶし」ウィンドウの「左」色が
▼ マウスの左クリックで塗り替えられる
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
10 / 15
【色の選択】
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
11 / 15
【文字の描画】
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
12 / 15
フリーで使える主な画像編集ソフト
【ペイント系】
▼JTrim (WindowsXP対応:開発終了)....Windows7動作確認済
http://www.woodybells.com/jtrim.html
▼PictBear(ピクトベア)- 多機能で軽快なペイントソフト | フェンリル (Windows7対応:開発終了)
http://www.fenrir-inc.com/jp/pictbear/
▼Pinta: Painting Made Simple - Pinta (Windows,Mac OS X,Linux/Ubuntu)
http://pinta-project.com/
▼GIMP - The GNU Image Manipulation Program (Windows,Mac OS X,Linux)
http://www.gimp.org/
▽GIMP (GNU 画像編集プログラム) 使用のてびき : 2.8-Beta(日本語版)
http://docs.gimp.org/2.8/ja/
【ドロー系】
▼Draw Freely. | Inkscape (Windows,Mac OS X,Linux)
http://www.inkscape.org/ja/
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
13 / 15
★伝えたいことを正確に伝えるために★
• 「今日」「昨日」「明日」⇨【×】NG
◦ 2013年 12月 5日(木)⇦具体的な日時の表記を心がける
◦ 読み手はその記事をいつ読むかは読み手の都合による
• 「保育園で〜」「会議室で〜」「公民館で〜」⇨【×】NG
◦ 会場の正式名称を表記するよう心がける
◦ 読み手はこの地域に詳しい人ばかりとは限らない
• 「やります」より「やりました」の報告レポートを充実させる
◦ 「やりました」のひとつひとつを具体的に短文で表記する
◦ 「やりました」をイラストや写真で補足する
• 「見えない読み手」に想像力を働かせて配慮する
◦ 「見えない読み手」は、通行人?
◦ 誰に伝えたいのか?
文書互換のまとめ
• 文書を提供する際には、相手の再生環境を考慮(確認)して
適切なファイル形式を選択する配慮が望ましい
• 文書を提供する対象が不特定多数となる場合は、できる限
り汎用性の高いファイル形式の選択を考慮することが望
ましい
• メールに添付する場合は、個々のメールサーバの仕様によ
り扱えるファイルサイズが制限されている場合があるの
で注意が必要(1MB程度が目安)
• 受け取り側は、提供ファイルのファイル形式を吟味した
上で、当該ファイルの再生・編集に適したアプリケーショ
ンを準備する
• 特定のOS、特定のアプリケーションに依存したファイル
形式の利用の見直しが必要
• 回覧文書の回収課題
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
14 / 15
【資料】サイトリンクの図
ブログ(動的情報) ホームページ(静的情報)
• 手軽な更新
• 日々のこまめな活動報告に適している
• 話題提供⇨リピータの確保
• ライターの力量に依存する
• フィードバックが得られにくい
• 記事同士の関連性を持たせにくい(1対多)
•
•
• 固定情報の整理に適している
◦ 団体概要
◦ 重要なお知らせ
◦ 主要コンテンツの紹介
◦ お問合せ
• 更新・管理に基礎的な知識が必要
◦ コンテンツ閲覧誘導に構造的・デザイン的な
配慮が必要⇨リンク構成の設計
一宮市民活動情報サイト(トップ)
http://genki365.net/gnki/customer/ichinomiya/
一宮市市民活動支援センター
http://www.138cc.org/
一宮市民活動情報サイト:団体マイページ・ホーム (基本情報 /問い合せ )
http://genki365.net/gnki/mypage/index.php?gid=G0000???
テキストリンク
信頼性の担保
相互補完
<a href="http://www.138cc.org/ "target="_blank"><img src="http://www.138cc.org/icasc-200_60.jpg"
width="200" height="60" border="0" alt=" 一宮市市民活動支援センター " /></a>
■団体web活用サポート:情報発信による団体間交流から新芽を産む (スローガン「自ら語れ」)
15 / 15
情報発信を考える フリートークな座談会フリースペース@一宮市市民活動支援センター
毎月第3土曜日 18:30〜20:30ーーーーーーーーーーーーーーーーーーーーーーーーー
【団体間交流@DWKS】個別な課題の持ち寄り=【掲示板】の日常的活用
⇨ http://div.36way.net/bbs/brd.cgi?id=dwks▲誰でも閲覧可:情報のオープン化▲
(投稿は、メンバー登録)⇨ http://div.36way.net/bbs/brd.cgi?cmd=mbn;id=dwks
課題の持ち寄り
※ アイデアの検討⇨他分野からの意見交換
※ 対策案の情報蓄積⇨情報のオープン化と共有⇩
【新芽を産む】