画像の加工処理実習リンクバナーの作成div.36way.net/dwks/lib/20140326/20140326.pdf2014/03/26 · DOWNLOAD 書庫版とセットアップ版は同一のものです。どちらをダウンロードされても結構です。

■団体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>

リンクバナーの輪


2 / 15

リンクバナーの輪（DWKS提唱）

団体 A サイト

団体 E サイト団体 B サイト

団体 C サイト団体 D サイト

http://www.138cc.org/


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....

▪レイヤー機能の有無


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 ： ____ ____ ____


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 　⇩

http://www.woodybells.com/jtrim.html

http://www5f.biglobe.ne.jp/~ayum/ring/jtrimring.html


6 / 15

【新規描画キャンバスの作成】

1. [ファイル]→[新規作成]をクリック

2. 「新規作成」ウィンドウが開く

●画像横サイズ：＿＿＿＿＿＿＿

●画像縦サイズ：＿＿＿＿＿＿＿

●キャンバスの色：＿＿＿＿＿＿

⇨[OK]ボタンをクリック

3. 描画キャンバスが作成される

①

②

③


7 / 15

【描画領域を２分して背景色を変える】

1. ２つ目のJTrimを起動する

2. ２分割する背景色の描画領域を作成する

●画像横サイズ：＿＿＿＿＿＿＿

●画像縦サイズ：＿＿＿＿＿＿＿

●キャンバスの色：＿＿＿＿＿＿

⇨[OK]ボタンをクリック

3. [編集]→[全選択/選択解除]をクリック⇧　

ポイント

２つの描画領域を合成して、

１つの描画領域の中に２つの背景色領域を作成する


8 / 15

【描画領域を２分して背景色を変える】⇨【キャンバスの合成】　▼２つ目の JTrim　　　　　　　　　　▼２つ目の JTrim　　　　　　　　　　　　　　　▼１つ目の JTrim

　　　　　　　　▼１つ目の JTrim　　　　　　　　　　　　　　　　　　▼１つ目の JTrim

　　　　　　描画領域１に描画領域２が合成貼り付けされる　　　　　　　描画領域２を任意の位置に移動して「位置確定」する

描画領域が全選択される[ 編集 ]→[コピー ] をクリックする [ 編集 ]→[合成貼り付け ] をクリックする


9 / 15

【描画領域の色の塗りつぶし】　　　　　　　　　　　　　　　　　　　▼１つ目の JTrim

「塗りつぶし」アイコンをクリック▼　　　　　　　　　

「塗りつぶし」ウィンドウの「左」色が

▼ 　　マウスの左クリックで塗り替えられる


10 / 15

【色の選択】


11 / 15

【文字の描画】


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/


13 / 15

★伝えたいことを正確に伝えるために★

• 「今日」「昨日」「明日」⇨【×】ＮＧ

◦ 2013年 12月 5日（木）⇦具体的な日時の表記を心がける

◦ 読み手はその記事をいつ読むかは読み手の都合による

• 「保育園で〜」「会議室で〜」「公民館で〜」⇨【×】ＮＧ

◦ 会場の正式名称を表記するよう心がける

◦ 読み手はこの地域に詳しい人ばかりとは限らない

• 「やります」より「やりました」の報告レポートを充実させる

◦ 「やりました」のひとつひとつを具体的に短文で表記する

◦ 「やりました」をイラストや写真で補足する

• 「見えない読み手」に想像力を働かせて配慮する

◦ 「見えない読み手」は、通行人？

◦ 誰に伝えたいのか？

文書互換のまとめ

• 文書を提供する際には、相手の再生環境を考慮(確認)して

適切なファイル形式を選択する配慮が望ましい

• 文書を提供する対象が不特定多数となる場合は、できる限

り汎用性の高いファイル形式の選択を考慮することが望

ましい

• メールに添付する場合は、個々のメールサーバの仕様によ

り扱えるファイルサイズが制限されている場合があるの

で注意が必要（１MB程度が目安）

• 受け取り側は、提供ファイルのファイル形式を吟味した

上で、当該ファイルの再生・編集に適したアプリケーショ

ンを準備する

• 特定のＯＳ、特定のアプリケーションに依存したファイル

形式の利用の見直しが必要

• 回覧文書の回収課題


14 / 15

【資料】サイトリンクの図

ブログ（動的情報）ホームページ（静的情報）

• 手軽な更新

• 日々のこまめな活動報告に適している

• 話題提供⇨リピータの確保

• ライターの力量に依存する

• フィードバックが得られにくい

• 記事同士の関連性を持たせにくい（１対多）　

• 　

•

• 固定情報の整理に適している

◦ 団体概要

◦ 重要なお知らせ

◦ 主要コンテンツの紹介

◦ お問合せ

• 更新・管理に基礎的な知識が必要

◦ コンテンツ閲覧誘導に構造的・デザイン的な

配慮が必要⇨リンク構成の設計

一宮市民活動情報サイト（トップ）

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>


15 / 15

情報発信を考える　フリートークな座談会フリースペース＠一宮市市民活動支援センター

毎月第３土曜日　18:30〜20:30ーーーーーーーーーーーーーーーーーーーーーーーーー

【団体間交流＠ＤＷＫＳ】個別な課題の持ち寄り＝【掲示板】の日常的活用

⇨ http://div.36way.net/bbs/brd.cgi?id=dwks▲誰でも閲覧可：情報のオープン化▲

（投稿は、メンバー登録）⇨ http://div.36way.net/bbs/brd.cgi?cmd=mbn;id=dwks

課題の持ち寄り

※ アイデアの検討⇨他分野からの意見交換

※ 対策案の情報蓄積⇨情報のオープン化と共有⇩

【新芽を産む】

Documents

画像の加工処理 実習 リンクバナーの作成div.36way.net/dwks/lib/20140326/20140326.pdf2014/03/26 · DOWNLOAD 書庫版とセットアップ版は同一のものです。どちらをダウンロードされても結構です。

画像の加工処理実習リンクバナーの作成div.36way.net/dwks/lib/20140326/20140326.pdf2014/03/26 · DOWNLOAD 書庫版とセットアップ版は同一のものです。どちらをダウンロードされても結構です。