今まで、Gimpで作った画像の圧縮形式は、気分で使い分けていたのですが（オイ）、このままではアカンということで、ちゃんと調べてみました。

JPEG

1677万色まで扱える、圧縮方式。可逆圧縮も一応サポートはされているものの、ほとんどの場合、非可逆圧縮として使用される。圧縮の方式上、色数を減らしても、画像サイズは変わらず、また、色が極端に変わる境界では、ノイズが発生するため、同じ色が広範囲に塗られるイラストやアイコンには向かない。主に写真の圧縮に利用される。

GIF

256色まで扱える、 可逆圧縮方式。同一色が連続するほど、圧縮率が高くなるので、イラストやアイコンに向いている。GIFは背景を透明にすることができるが、半透明はサポートせず、完全透明または完全不透明のみを扱える。また、複数の画像を1つのファイルに保存して連続再生するアニメーションGIFという機能も持つ。一昔前、圧縮形式の特許問題が起こったが、2004/06/10で特許が失効し、今は自由に使用することが出来る。

PNG

GIFの特許問題が起こった時代に、代替として作られた方式。280兆色まで扱うことが出来る上に、可逆圧縮で、さらに半透明をサポートするなど、ポテンシャルは高い。しかし、古い形式のブラウザでは表示できない上に、IE6でも、半透明がサポートされておらず、現状では、そのポテンシャルを出し切れていない（IE7は半透明をサポート）。また、GIFの代替だがアニメーションが出来ないという欠点もある。W3Cが使用を推奨している。

ふ～ん (゜ε ゜)

 単純に使い分けるなら、写真にはJPEG、イラスト・アイコンにはGIFかPNG、アニメーションを使うならGIF、透明色を使うならGIFかPNG、半透明ならPNG、といったところでしょうか。

デザインをしていると、Web上で、きれいな色をみかけたとき、その色の情報が欲しくなることがあります。

そんな時に使えるツールを探していて、FireFoxエクステンションの、

色の情報は、スポイトを右クリックして表示されるメニューから、クリップボードにコピーすることが出来ます。便利!！

Visual Web Pack 5.5 日本語版が、リリースしてますね。 

NetBeans Visual Web Pack 入門

ドキュメントも、それなりにしっかりしてるのがありがたい。、普通に開発する分には情報不足でハマることもなさそうだ。

今、JSFの練習で開発しているエンコードツールが出来た後、本命のサイト作りをやる予定なんだけど、その開発環境としての、第一候補は今のところこれかな。

ただ、出たばかりなので、バグも多い気がする。エンコードツールが完成するころには、安定してくれてるといいなあ。

Gimpで色を選択するときに、RGBのほかに、色相、彩度、明度という基準で選択できるんだけど、いまいち必要性が分からなかったから、これを期に調べてみた。常識中の常識のような気がしないでもないけど、自分と同じく良く分からない人がいることを希望して書いてみる。

色相、彩度、明度は、色を表現するときの体系の一種で、これらの値を変更することにより、全ての色を表すことができる。RGBも色を表現するときの体系だが、これら2つは、ある意味全く関係なくて、色相、彩度、明度で表された色は、RGBでも表すことができるし、同様に、RGB値が決まれば、それに対する色相、彩度、明度の値が決まる。色を表現するという同じ役割をもつ体系でありながら、次元や空間みたいなものが異なっているという感じらしい。

それぞれの定義は以下

色相

色の種類を表す。赤なのか青なのか緑なのかは、この値をみれば分かる。 Gimpでは、0～360

彩度

色の鮮やかさを示す。いわば、その色らしさみたいなもので、 数値が高いほど、色がなんなのか分かりやすい。数値を低くすると、グレーっぽい色になっていく。Gimpでは0～100

明度

色の明るさを示す。低くなるほど、黒に近づく。Gimpでは、0～100

で、こういう尺度があると、何がうれしいのかというと、「人から見たときの分かりやすさ」なんでしょう。例えば、RGBで、54:159:28と言われても、いまいちどんな色か想像するのは難しいはず。でも色相、彩度、明度が、108:82:63と指定されたとき、色相108が黄緑だということが分かれば、彩度82で鮮やかさが高いから黄緑だと分かりやすい色で、明度63だからパステルカラーと黒の中間より若干明るいくらいという推測ができてうれしいというわけ。

Webデザインでのテクニックとして、彩度と明度を最大にしてパステルカラーを作ったり、彩度、明度固定で、色相のみ変更して調和しやすい色を作成したり、色々役立つので知っていて損はないんじゃないでしょうか。

Web2.0的なデザインに必須といわれている、角丸四角形をGimpで作ってみようと思ったけど、Gfigにはないし、角丸プラグインみたいなのも見つからない（検索が下手？）。

で、いろいろ調べた結果、やり方が分かったので手順を書いてみる。

1.  矩形選択ツールで、適当に選択領域を作る
   
2. メニューの 「選択 → 角を丸める」 で、選択領域を角丸にする
   
3. メニューの 「編集 → 選択領域をストローク描画」 で、選択の境界に線引きする
   

ちなみに、ストローク描画はブラシで線を引くことも出来て、バラエティあふれる角丸四角形を作ることが出来ます。

右上のやつとか、もう図形とかいうレベルじゃないですね。

Apacheヘルプサイトをまとめて印刷の記事が、意外と読まれているようなので、調子に乗って第2弾。

流れ的には、前回と同じで、「HTMLヘルプを作成 → サブトピックをまとめて印刷」という手順になります。注意点として、GIMPユーザーズマニュアルは、Gimp1.2を対象に書かれているので、古い部分があります。ただ、大半の情報はGimp2.0以降でも有用です。

手順

1. GIMPユーザーズマニュアル サイトの、案内ページ の下の方に、HTMLをまとめてダウンロードできるリンクがあるので、ローカルに保存後、解凍します。
2. HTMLヘルプの作成には、 カエルましん さんの所にあるヘルプましん を使わせていただきました。ヘルプましんインストール後、実行して、メニューの「プロジェクト」から、「新規プロジェクト」を実行します。
3. プロジェクトの設定ダイアログが表示されるので、設定を行います。私は、プロジェクト名と、コンパイル済みヘルプの保存先だけ指定しました。
4. プロジェクトが作成されたら、メニューの「プロジェクト」から、「フォルダ取り込み」を実行するのですが、ここでフォルダ内の全てのページを取り込むと、仕上がったHTMLヘルプの印刷を実行した際に、メモリ不足かなにかで落ちてしまったので、フォルダを2つ作り、htmlの内、「1～28.htmlまで」と、「29～55.html & その他」に分け、プロジェクトも2つ作ることで回避しました。 取り込み時には、タイトル取得方法の選択ダイアログが表示されるので、「ファイル名から取得」を選択します。ファイル名は数字になっているので、後で並び替えやすいからです。
5. 前述の通り、ファイルは数字がついているのですが、1～9までが、「01」でなく、「1」となっているので、並び順がおかしくなっています。並び順は変更可能なので修正しておきます。
6. メニューの「プロジェクト」から、「プロジェクトをコンパイル」を実行して、HTMLヘルプを出力します。
7. 完成したHTMLヘルプの、ルートディレクトリから、「印刷 → 選択された見出しおよびすべてのサブトピックを印刷」で完了です。

1つ目のプロジェクトが、278ページ。2つ目が、257ページになりました。よーし2日で読むぞ～（ウソ） 

プログラマでも出来るWebデザイン

先日のエントリで、プログラマなりに頑張ってGimpを使ってみたことについて書きましたが、私と同じく、デザインに挑戦しているプログラマの方がいらっしゃいました。しかも、よりスマートに実現しています。

引用

• 車輪の再発明はしない。
• 既にあるものを上手く利用してこそプログラマ。
• デザインもまた然り。
• プログラマでも出来るWebデザイン。
• バイナリからフロントエンドのデザインまで出来てこそプログラマ3.0。（私はすべてにおいて未熟ですが・・・）

 私は、普段、まがりなりにもITアーキテクト的な作業に従事し、再利用の重要性について口をすっぱくして周りに説いているのですが、デザインの世界では同じ過ちを犯していたとは orz

ただ、やはり本気でデザインも出来るようにするなら、どちみち、レタッチソフトも使いこなせるようにならないといけないので、私は、Gimpの勉強は続けていこうと思っています。ツールで済ますべき所はツールを使い、自分でしっかり作るべきところは、それなりの道具で作るという使い分けができるようになるのが理想。

とりあえず、作りかけのエンコードツールは、Gimp一本ではなく、ツールの使用も視野に入れてデザインに取り組んでみます。

ブログのメイン画像を、初心者なりにフォトレタッチで作ってみたので、手順を書いてみる。

1. フリーの画像を用意する。
2. 「ファイル→新規」で新しいキャンバスを作成し、先ほどコピーした選択部分を「編集→貼り付け」で貼り付ける。
   
3. Headerの横幅は、800pxにしたかったが、画像の幅が思ったより狭かったので、移動ツールで、選択領域を右へ寄せておく。
   
4. レイヤーダイアログを開くと、貼り付けられた部分は、フローティング選択というものになっているっぽい（文字化けしてますが）。
   
   この部分を右クリックして、新規レイヤーを選ぶと、貼り付けられたレイヤーとして固定される。
   
5. 左の余白部分を何とか埋めるために、スポイトで、貼り付けられたレイヤーの背景色を取得して、背景レイヤーを塗りつぶした。しかし、貼り付けられたレイヤーの背景色は、単一色ではないので、明らかな境界ができてしまった。
   
6. 本当は、貼り付けられたレイヤーの背景色のような複数色で構成された色を、背景レイヤーにも塗りたかったのだが、うまいやり方が分からなかったので、逆に全ての背景を単一色で塗りつぶす方針にした。「色による領域選択ツール」で、しきい値を微調整して、複数色の背景を選択する。
   
   
7. 選択領域を塗りつぶしたあと、画像を拡大して塗りきれなかった境界部分を手動で修正。
   
8. テキストツールで、手帳のスケジュールを書く。ちなみにフォントは
9. 回転ツールで文字の角度を調整し、スケジュール長の上へ移動する。
   
10. 同じ要領で、文字を追加していく。統一感をもたせるため、タイトル文字も同一フォントを使用し、メモ書き風にした。
    
11. これだけだと、タイトルがインパクトに欠けるので、影をつけることに。「Script-Fu→影→ドロップシャドウ」を選択。
    
    パラメータは、以下のように調整。
    
    影がついた。画像はこれで完成。
    
12. タイトル部分は、トップページへのリンクにしたかったので、そこだけ選択して「編集→コピー」でコピーし、「編集→新規に貼り付け」で新たな画像にした。
    
    

まだまだ、至らない点もあるけど、デザインの勉強を始めて数週間だから、しょうがないかな。こんな記事でも、デザイン初学者の参考になれば幸いです。逆に上級者の方には、おかしな点を御指摘いただけるとありがたいです。