CMSでホームページの作成 [ フリーソフトの紹介]



 ■フォトレタッチソフト


Image_1 GIMP(ギンプ又はジンプ)は画像編集・加工ソフトで、GNU GPLの下で配布されているビットマップ系グラフィック編集・加工ソフトウェア。
もともとはUNIX系OSで広く使われている画像処理ソフトで、Windows・Mac OS Xなどへも移植されました。
フリーソフトながら多彩な機能を備え、商用のフォトレタッチソフトに劣らないとも言われているようです。

・画像作成、イラストやホームページ用素材作り、凝ったボタン・ロゴなどの作成
・デジタルカメラで撮影した画像をホームページ用にリサイズ・文字の挿入・加工など用途は多義に渡ります。

■ダウンロード:Windows版
gimp-2.6.4-i686-setup.zip
ダウンロードしたgimp-2.6.4-i686-setup.zipをLhacaなどの解凍ソフトで解凍後gimp-2.6.x-i686-setup.exeを実行して下さい。
※ GIMP2.6は日本語化が完璧なので「日本語ローカライズ改良版」は必要ありません。
対応OS: 2000/XP/Vista (※ Windows 98/MEには対応してません)
Gimp User Group:チュートリアル日本語版
右図イメージはGUGチュトリアルを参考に作成しました。
GIMP:本家サイト(英語)



 GIMPの説明

サムネィル
■GIMPを起動
画像を新規作成するにはファイル(F)新しい画像(N)でダイアログが開きますのでテンプレートより選ぶか画像サイズを入力してOK(O)ですが・・・
今回は、ファイル(F)より開く(O)Inkscapeで作成したホームページ用レイアウトファイル(xxx.svg)を開きます。
1を押すと作業画面が1:1になり作業がし易くなります。

[ 図:開いた画面 ]

ツールボックスとそのオプション:
画面左にツールバーと下にはオプションが表示されます。上部は各インターフェイスアイコンが並んでいます。
各アイコンにマウスを乗せると説明とキーボード入力が噴出して表示されます。
クリックする事でそのツールを使う事ができ下にそのツールオプションが表示されます。

画面中央が作業領域:
下部の左側に画像の単位と大きさを表示、画像の拡大・縮小をする事が出来ます。
下部の右側にナビゲーションが表示され、そのままグリグリすると画像が動き、作業場所が簡単に得られます。

各ダイアログ:
画面右側は上部はレィヤー・チャンネル・パス・操作履歴がアイコンにより切り替えが出来ます。
マウスを乗せると噴出しに説明がでます。
下部は描画色/背景色・各ブラシ・パターン・グラデーションをアイコンで切り替えます。
各アイコンにマウスを乗せると説明とキーボード入力が噴出して表示されます。

※ 上記操作は作業画面内で右クリックする事でも選択できます。


 ホームページ用:レイアウトした画像をカッテイング!

カッテングイメージ
CutImage:図2
カッティングは左図から右図のように1つずつカットしホームページ作成フォルダ例:home/imageにそれぞれ保存していきます。

それでは始めます。
まず一番上のheader_Logo部、矩形ツール矩形ツールアイコン(またはRキー)を選択、切り抜きたい始点よりクリックし終点までドラッグします。
編集(E) - コピー(C)よりコピー
クリップボードから生成(P) - 画像(N)をクリック
コピーされた画像が新しい作業領域に生成されます。

次にその画像の背景を切り抜きます。
ツール色領域ツール色領域を選択(またはshift+O)背景の色をクリック
余計なゴミ画像が無いか作業領域の下部で拡大、同じく下部のナビゲーションを使い余計なゴミ画像が無いか探します。
(もし見つかったらツール色領域でゴミ画像をクリック
範囲が指定されたらDeleateキーで取り除いてください。)

次に選択(S)選択範囲を反転(I)
反転した画像を編集(E) - 切り取り(T)
クリップボードから生成(P) - 画像(N)をクリック
切り抜かれた画像が新しい作業領域に生成されます。

次に切り抜き完成した画像の保存をします。
保存先はホームページ作成フォルダの例:home/imageに保存します。
ファイル(F) - 名前を付けて保存(A)で画像を保存ダイアログが表示されます。
一番上のテキストボックスに例:header_Logoとして
次にその左下にファイル拡張子選択(T)があります。[+]のアイコンをクリックし拡張子を選択
拡張子はpng画像とします。

次に保存(S)をクリック
PING形式で保存するダイアログが開きます。
透明ピクセルの値を保存にチェックされているか確認をし保存(S)で終了です。
header_Logo.pngは次の作業では不要なので閉じてください。
以降すべての画像を同じ要領で繰り返し作成します。

今回の画像はグラデーション化されているので保存形式をPNGにしました。
背景を透過する必要が無い場合JPGなどで保存しても可。
GIFは256色なのできれいなグラデーションを表現できないので不可。

切り抜いた画像(縮小版)
切り抜いた画像

※ ツール色領域ツール色領域(またはshift+O)を使わないでファジーツールファジー選択(R)でも作成できます。
オプションのしきい値を低くしてやってみてください。
※ 各ツールや編集・保存などは作業領域で右クリックして選択することも出来ます。
※ GIMPはちょっと変わったインターフェイスですがなれると使いやすいですよ。