ヒマをみつけてWeb開発
その場の思い付きを、ヒマをみつけてWebサイトにしてみるブログ

Vista に Gimp をインストールしてみた

Saturday, 14 April 2007 11:22 by sabro

Vista に Gimp を入れるのは、少し不安だったので、今までは、openSUSE の Gimp を使っていたんだけど、Gimp を使うたびに、OS を切り替えるのが面倒なのと、私のブログに、妙に「vista gimp」の検索で飛んでくる人が多いという使命感から(笑)、じゃあ、入れてやろうじゃないか、ということになりました。

Windows Vista and The GIMPというエントリで、フォントの初回読込みで、待たされるということは、知っていたので、そこだけ気をつければ、普通にインストールできました。

↓ フォント読込みで、応答なしになるの図
フォント読込み

以前の、Windowsで、Document and Settings 以下に作られていた、ユーザ設定のディレクトリは、Vista では、C:\User 配下に正しく作られました。

ユーザ設定フォルダに、古い OS で使用していた、Script-Fu や Font をコピーしてやることで、そのまま使えることも確認。

↓ 以前作った、角丸Script-Fuを試すの図
Gimp on Vista

とりあえず、問題なく使えてます。

Tags:   ,
Categories:   WebDesign
Actions:   Permalink | Comments (49) | Comment RSSRSS comment feed

Script-Fuを作って、Gimp上で実際に動作させるまでの手順を解説してみる(2)

Saturday, 3 March 2007 08:12 by sabro

 
Script-Fuを登録すると、Gimpが自動的に、上のようなダイアログを作ってくれます。画像のメニューから実行する、Script-Fuの場合、image引数とdrawable引数は、現在の画像が、そのまま使われるので、ダイアログからは設定しません。ここでは、独自の引数である、半径のみが設定可能になっています。ダイアログに設定される要素名を、"Radius (%)"と設定しましたが、このように、簡単なものであれば、"半径 (%)"と、自動的に日本語にしてくれるところも、ポイントです。

引数について、もう少し、説明しておきます。Gimpで指定できる引数は、以下のような種類があります。

SF-ADJUSTMENT 特定範囲内の数値
SF-BRUSH ブラシ
SF-CHANNEL チャンネル
SF-COLOR
SF-DRAWABLE レイヤー&チャンネル
SF-FILENAME ファイル
SF-FONT フォント
SF-GRADIENT グラデーション
SF-IMAGE 画像
SF-LAYER レイヤー
SF-OPTION 複数候補から1つの文字列を選択
SF-PATTERN パターン
SF-STRING 文字列
SF-TOGGLE TRUE or FALSE
SF-VALUE 数値

今回、半径の指定では、SF-ADJUSTMENTを指定したので、特定範囲の数値を指定できます。デフォルト値で、'(50 0 100 1 1 0 0)と指定していましたが、これは、デフォルト値50、最小値0、最大値100、ステップ幅1、不明?1、小数桁0、スライダーor スピンボタン0、と設定しています。

次に、script-fu-menu-register関数は、次の引数を取ります。

  1. 関数名
  2. メニューの位置

メニューの位置は、今回、"<Image>/Script-Fu/Render"と指定したので、画像メニューの「Script-Fu → 下塗り」に追加されます。"<Image>/Script-Fu/下塗り"では、ダメなので、注意してください。英語が分からない人は、前回やったように、Gimpを英語環境で起動して、メニューを確認してみましょう。画像メニューではなく、ツールボックスのメニューに追加したい場合は、<Image>の部分を<Toolbox>として、適切なパスを設定すれば可能です。

4.配置して確認する

3の手順で作ったファイルは、Windowsの場合、「C:\Documents and Settings\(ユーザ名)\.gimp-2.2\scripts」に配置します。ファイルに、日本語が含まれている場合は、UTF-8で保存する必要があるので、注意してください。そして、Gimpを再起動するか、または、メニューの「拡張 → Script-Fu → スクリプトリフレッシュ」で、再読み込みさせます。

まずは、プロシージャブラウザで、Script-Fuが追加されていることを、確認してみてください。成功していたら、先ほどの、Script-Fu登録関数で書いた内容が、表示されるはずです。

無事、登録が成功していたら、次は、新規画像を作成して、画像のメニューから、「Script-Fu → 下塗り」と辿ってみます。以下のように、script-fu-register関数で設定した名前が、登録されているはずです。

最後に、Script-Fuを実際に、実行してみます。まずは、適度な大きさの、選択範囲を作り、適当なブラシを選んでください。そして、いざ実行。角丸四角形を作ることが出来たら成功です。

Tags:   ,
Categories:   WebDesign
Actions:   Permalink | Comments (58) | Comment RSSRSS comment feed

Script-Fuを作って、Gimp上で実際に動作させるまでの手順を解説してみる(1)

Monday, 26 February 2007 12:52 by sabro

 今回は、実際にScript-Fuを作り、Gimpで動作するところまでの手順を、一通り追ってみたい所存です (^_^) ちなみに、私は、Windows版のGimp2.2.13を使っているので、それ前提で読んでください。

じゃあ、せっかくなので、「rounded」なんて、キーワードを、イキナリ思いつくかい!という方は、Windowsのスタートメニューから、「すべてのプログラム → GTK+ Runtime Environment → Select Language」で、英語を選択して、Gimpを起動してください。メニューが英語化するので、「角を丸める」が「Rounded Rectangle」となっているのが分かるはずです。同様に、検索すると「選択領域をストローク描画」は「gimp_edit_stroke関数」で実行することが分かります。

2.Script-Fuを書く

Apiが分かったら、実際にScript-Fuを書きます。Script-Fuは、Schemeの関数になっている必要があるので、前回のエントリで書いたように、defineを使って、関数を作り、その中に、先ほど検索したApiを使って処理を書いていきます。

(define (script-fu-render-rounded-rectangle image drawable radius)
(script-fu-selection-rounded-rectangle image drawable radius 0)
(gimp-edit-stroke drawable)
)

1行目で、関数名と、引数を定義しています。imageは、現在編集中の画像、drawableは、現在編集中のレイヤー(+チャンネル)、radiusが角丸の半径を表す数値(%)です。imageとdrawableは、画像のメニューから、Script-Fuを実行する場合は、必ず引数に指定する必要があります(ツールボックスのメニューからの実行の場合は、いりません)。2行目では、先ほどの、プロシージャブラウザの、検索結果から引数を調べて、script-fu-selection-rounded-rectangle関数に渡しています。プロシージャブラウザでは、関数名の区切りは、アンダースコアですが、Script-Fu内では、ハイフンになっていることに注意してください。また、プロシージャブラウザの説明では、run_modeという引数がありますが、これを渡したところ、エラーになり、実際の関数を調べると、この引数は必要ないことが分かりました。謎です。gimp-edit-stroke関数も、同様の手順で引数を調べて、追加します。

これで完成・・・ではありません。実際に、この関数を実行すると、選択領域の角を丸めるところまでは行きますが、線引きがされません。Script-Fuで行った描画を、画面に反映するには、gimp-displays-flush関数を、呼び出す必要があります。

(define (script-fu-render-rounded-rectangle image drawable radius)
(script-fu-selection-rounded-rectangle image drawable radius 0)
(gimp-edit-stroke drawable)
(gimp-displays-flush)
)

これで、Script-Fuは、完成です。

Script-Fuが、完成したら、次は、Gimpへの登録をして、実際に動作させるわけですが、説明が長くなりそうなので、続きは次回のエントリで書くことにします。

Script-Fuを作って、Gimp上で実際に動作させるまでの手順を解説してみる(2)

Tags:   ,
Categories:   WebDesign
Actions:   Permalink | Comments (41) | Comment RSSRSS comment feed

Script-Fuを使うために最低限覚えるべきSchemeの文法

Sunday, 18 February 2007 15:54 by sabro

Schemeを、少しずつ勉強中。何とかScript-Fuを作れそうなところまで来たので、一度まとめておきます。

1.何はともあれ、()をつける

とにかく、ソースコードに「( )」が出てきます。ファイルから、画像をロードするだけで、以下みたいな感じになります。

(set! image (car (gimp-file-load 0 filename filename)))
2.前置記法

数式は、( 1 + 2 ) ではなく、( + 1 2 ) と書きます。
( 1 + 2 + 3 ) は、( + 1 2 3 ) 。
( 1 + 2 - 3 ) は、( - ( + 1 2 ) 3 ) です。

3.大域変数と局所変数

大域変数(グローバル変数)の宣言は、defineで行い、set!で値を代入します。 ただし、Script-Fuでは、変数宣言をとばして、いきなりset!を実行しても、変数を使えるようです。

(define x 1)1(print x)1(set! x 2)2(print x)2(set! y 3)3(print y)3

 局所変数(ローカル変数)は、(let* )で囲んで、宣言します。囲まれた領域以外で使用すると、エラーになります。(let* )内には、変数だけでなく、変数を使用する評価式も書いてしまいます。

「(let* ((変数1)(変数2)・・・)(評価式1)(評価式2))」

以下では、zという変数を初期値3で定義し、評価式はzそのものを返しています。(let* )の外で、zを使おうとすると、変数未定義エラーになります。

(let* ((z 3)) z)3(print z)ERROR: unbound variable (errobj z)
4.リスト、つまりは配列のようなもの

他の言語でいうところの配列は、Schemeではリストに当たります。()の前に、「’」を付けることで宣言できます。

'( 1 2 3 )'( 1 "two" 3 )  ←数値と文字列が混ざってもOK

リストから、値を取得するときは、「car」「cdr」を使います。「car」は、リストの先頭の要素を取得します。「cdr」を使うと、リストの先頭を除いた全ての要素を取得します。

(car '(1 2 3))1(cdr '(1 2 3))(2 3)

 いまいち使いにくい感じがしますが、関数型言語は、再帰処理を頻繁に利用するので、このような仕様になっているんだと思います。ちなみに、Gimpの関数は、全てリストを返すので、戻り値の取得は、たいていの場合、「car」を使う必要があります。

5.関数の定義

Schemeでは、変数と関数が同列で扱われます。なので、関数の宣言は、大域変数と同じくdefineで行います。以下では、引数「x,y」を足し算する関数「add」を宣言し、その関数を利用しています。

(define (add x y) (+ x y))(add 1 3)4

やれやれ、オブジェクト指向言語とは、マッタク違いますな( ̄~ ̄;)
参考サイトとしては、もうひとつのScheme入門がオススメです。
Tags:   , ,
Categories:   WebDesign
Actions:   Permalink | Comments (39) | Comment RSSRSS comment feed

Script-Fuに挑戦しよう

Monday, 12 February 2007 09:42 by sabro

今作ってる、エンコードツールは、HTMLエンコード、URLエンコード、Base64等、色々対応しているので、ボタンの数が多いです。このボタンは、同じ画像を元に作るのですが、表示される文字列が、それぞれ違っているので、結局、ボタンの数だけ、「テキスト挿入 → GIF形式で保存」という作業を行わないといけません。

1度の作業ということなら、これでもいいのですが、HTMLに表示してみて、気に入らなければ修正したいので、何度も元画像を変更して繰り返すことになります。

これがメンドイので、作業を自動化するため、Script-Fuに挑戦してみることにしました。Script-Fuとは、Gimpに組み込まれている、マクロ言語で、単純な作業の繰り返しを、スクリプト化することが出来ます。

とりあえず、今日は、さわりだけ調べてみたので、分かったことを以下に列挙しておきます。

1.Schemeという関数型言語で記述する

普段、.NETやJavaしか使わない自分には、関数型言語は難しそうです。Cのような手続き型言語とは、全く違うので注意が必要です。(Perl-FuやRuby-Fuなんてのもあるみたいです)

2.Gimpを操作するには、プロシージャブラウザの関数を使う

「ツールボックスのメニュー → 拡張 → プロシージャブラウザ」で、Script-Fuから使える関数の一覧が見れます。自分の環境では、849個ありました。

3.デバッグは、Script-Fuコンソールで

「ツールボックスのメニュー → 拡張 → Script-Fu → Script-Fuコンソールで、1命令だけ入力して、即実行可能な、コンソールが使えます。試しに「(print "Hello World")」と入力したら、「Hello World」が表示されました。

4.自分が作ったスクリプトをGimpに登録できる

自分が作ったスクリプトを、プロシージャブラウザや、メニュー項目に追加できるようです。

Tags:   ,
Categories:   WebDesign
Actions:   Permalink | Comments (45) | Comment RSSRSS comment feed

色相、彩度、明度って、何で必要なの。RGBでいいじゃん。という方は読んでみてください

Monday, 22 January 2007 15:21 by sabro

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

Tags:  
Categories:   WebDesign
Actions:   Permalink | Comments (38) | Comment RSSRSS comment feed

Gimpで角丸四角形を作る

Wednesday, 17 January 2007 16:40 by sabro

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

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

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

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

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

Tags:  
Categories:   WebDesign
Actions:   Permalink | Comments (16) | Comment RSSRSS comment feed

Gimpユーザーズマニュアルをまとめて印刷

Saturday, 13 January 2007 12:42 by sabro

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日で読むぞ~(ウソ) 

Tags:   ,
Categories:   Tips
Actions:   Permalink | Comments (3) | Comment RSSRSS comment feed

デザイン初心者向け、フリー素材からWebサイトのメイン画像ができるまで

Sunday, 7 January 2007 10:35 by sabro

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

  1. フリーの画像を用意する。
  2. 「ファイル→新規」で新しいキャンバスを作成し、先ほどコピーした選択部分を「編集→貼り付け」で貼り付ける。
  3. Headerの横幅は、800pxにしたかったが、画像の幅が思ったより狭かったので、移動ツールで、選択領域を右へ寄せておく。
  4. レイヤーダイアログを開くと、貼り付けられた部分は、フローティング選択というものになっているっぽい(文字化けしてますが)。

    この部分を右クリックして、新規レイヤーを選ぶと、貼り付けられたレイヤーとして固定される。
  5. 左の余白部分を何とか埋めるために、スポイトで、貼り付けられたレイヤーの背景色を取得して、背景レイヤーを塗りつぶした。しかし、貼り付けられたレイヤーの背景色は、単一色ではないので、明らかな境界ができてしまった。
  6. 本当は、貼り付けられたレイヤーの背景色のような複数色で構成された色を、背景レイヤーにも塗りたかったのだが、うまいやり方が分からなかったので、逆に全ての背景を単一色で塗りつぶす方針にした。「色による領域選択ツール」で、しきい値を微調整して、複数色の背景を選択する。

  7. 選択領域を塗りつぶしたあと、画像を拡大して塗りきれなかった境界部分を手動で修正。
  8. テキストツールで、手帳のスケジュールを書く。ちなみにフォントは
  9. 回転ツールで文字の角度を調整し、スケジュール長の上へ移動する。
  10. 同じ要領で、文字を追加していく。統一感をもたせるため、タイトル文字も同一フォントを使用し、メモ書き風にした。
  11. これだけだと、タイトルがインパクトに欠けるので、影をつけることに。「Script-Fu→影→ドロップシャドウ」を選択。

    パラメータは、以下のように調整。

    影がついた。画像はこれで完成。
  12. タイトル部分は、トップページへのリンクにしたかったので、そこだけ選択して「編集→コピー」でコピーし、「編集→新規に貼り付け」で新たな画像にした。

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

Tags:   ,
Categories:   WebDesign
Actions:   Permalink | Comments (45) | Comment RSSRSS comment feed

ペイントツール、ドローツール、フォトレタッチツールの違い

Monday, 4 December 2006 21:55 by sabro

ペイントツール、ドローツール、フォトレタッチツールの違いが曖昧だったので自分用まとめ。

ペイントツール
ペンで自由に手書きするためのツール。フリーで代表的なものにPixiaSAIなどがある。
ドローツール
ベクトル画像を扱うためのツール。ベクトルなので拡大しても画像が劣化しない。OpenOffice DrawInkscapeDynamic Drawなど。
フォトレタッチツール
写真やイラストなどを編集するためのツール。さまざまなフィルタで色調、コントラストなどを補正したりする。ノイズや歪みなどの特殊な効果も適用できる。GIMPPictBearなど。
Tags:  
Categories:   WebDesign
Actions:   Permalink | Comments (37) | Comment RSSRSS comment feed