Jun 29,2007

GIMPでアメリ風写真に加工してみる

フォトショで出来ることをGIMPでやりたい。
ということで第三弾。

元ネタはlomoさんのだいぶ昔のエントリから漁ってきました。問題あったらお伝え下さい…
http://caramel-tea.com/2006/05/amelie_effect/

GIMPにもアクションスクリプトちっくなのはありますがイマイチ使い方が解らなかったりするのでまた今度。

元画像は例によってFlickrから。著作権はこちらの方に帰属します。
http://www.flickr.com/photos/vansairs/535207044/
加工前

1.背景レイヤーの複製


レイヤーダイアログを出し、右クリックするか下のボタンで背景レイヤーを複製します。

そうそう、レイヤーダイアログはドック化しておくと使い勝手がいいです。連結することが出来るので、終了してもレイヤーダイアログがメインのウィンドウの下に出ている状態になります。

2.色を際立たせる


コピーした背景レイヤーに対して、上部にある"モード"を標準からオーバーレイに変更します。

このままでは色がきつすぎるので不透明度を60くらいにします。

レイヤーではこんな感じ。
レイヤー(オーバーレイ)

画像はこんな感じになっているはず。


3.色合いの変更


加工した"背景 コピー"レイヤーに対して、
道具(T)→色ツール(C)→カラーバランス(B) を開き

調整する範囲をハイライトにして

シアン-赤:+5
マゼンダ-緑:-20
黄-青:-100


で実行します。
カラーバランス



元エントリはここで終わりなのですがもうちょっとそれっぽくする為に工夫を。

4.縁に影を付ける


レイヤーダイアログで右クリックして一番上に新規レイヤーを作る。

この時作るレイヤーは完全不透明、描画色黒になっている事を確認すること。

新規レイヤーの不透明度をとりあえず50%くらいにして、周囲をぼかした大きな消しゴムで消してあげる

この際、大きなブラシを作る必要があります。前のエントリでも書いたのですが、新規ブラシを作るか、既存のブラシを編集するかして、大きな半径のブラシをつくりましょう。

ブラシダイアログ
ダイアログ(D)→ブラシ(B)→ブラシエディタ

ブラシエディタ
ここでは半径を560程度、強度0.70にして消しゴムにしました。

いったん消したら、新規レイヤー本体の不透明度を調節しましょう。お好みで構わないのですが、ここでは70%にしました。

レイヤーはこうなっています。
影レイヤー



ここは色々変化のつけられる所なので、試してみてくださいね。不透明度の調整や、大きさの調整などなど。消す場所を変えてみるのもいいかもしれません。
ここをブラシを使わずに放射状グラデーションツールでやることも可能です。

5.レイヤーの統合


レイヤーダイアログ中のレイヤー上で右クリックして可視レイヤーの統合を選択。

レイヤーの統合オプションが出るので、ここは本当はなんでも構わないんですが、一応一番下、最画面レイヤーサイズに切り取りにします。
レイヤーの統合オプション

これで一枚のレイヤーになったはず。

6.仕上げのぼかし


一枚のレイヤーとなった画像にクイックマスクをかけます。
クイックマスクって何…という方はこのエントリ
で詳しく解説していますのでどうぞ。

そこでさっきの大きな消しゴムで真ん中あたりを消してあげます。

あんまり強度が強すぎると仕上がりに差がでないかな?と思ったので0.60に落として消してみました。
クイックマスク+消しゴム

ここでクイックマスクを解除してみると円形領域っぽいので選択されていることが解ります。

この選択領域を選択(S)→反転(I)で反転してやります。

ここに対して、これまた前のエントリで使ったフォーカスブラーをかけてあげます。このフォーカスブラーは最初から入っている訳ではないので注意しましょう。

半径は5.0程度でいいと思います。

これで全て完了しました。結果はこちら。どうでしょう?それっぽくなったでしょうか。
加工後

こうした方がいいよ!とかあったらお教え下さい。もっとGIMP使いこなしたい…
タグ:GIMP レタッチ
posted by gebet at 03:45 | Comment(0) | TrackBack(0) | tips

Jun 27,2007

Inkscapeでアクアボタンを作ってみた

アクア風ボタンなのかアクアボタンなのかよく解りませんが…

Inkscape導入に際しては前回エントリも参照してくださいね。ファイル容量に注意。現時点での最新版(ver.0.45.1)を用いて作業しています。

0.Inkscapeの起動


まずはどうにかして起動して下さい。下のような画面が出たと思います。
全体
ここで数字の1キーを押します。これによって100%の倍率に変更します。いくら拡大縮小でデータ劣化しないSVGとは言え、あまりにでかいとやりづらいので。右下のZのパラメータが100%になっているのを確認して次へ。

1.正円を描く


左のツールバーの"円/弧を作成(F5)"を選択し、ドラッグすると楕円がかけます。鋭い方はお気づきになったかもですが、下にCtrl押しながらだと真円がかける、とあります。
Ctrl押しながらドラッグして適当な大きさの円を描きましょう。


2.円に線形グラデーションを施す


円が描けたら、その上で右クリックして出てくるメニュー中の"フィル/ストローク(F)"を選択します。
メニューから"オブジェクト(O)→フィル/ストローク(F)"や
ウィンドゥ左下の赤で囲った部分をクリックしてもダイアログを出せます。

Shift+Ctrl+Fでも出せますね。お好きな方法で。

ダイアログを出したら、フィルタブになっているのを確認して線形グラデーション→編集をクリック。
グラデーション編集までの流れ

ここからちょっと操作に慣れるまでがめんどくさいところです。
グラデーションエディタを出したら最上部に色の変化が、その下に選択中の色が出ています。その中をクリックすると要素の色が現れます。
グラデーションエディタ
操作後のSSを貼っていますが、一番上が開始色(この場合は黒)になります。
一番下が停止色(黄色)。今は全て不透明にしています。つまりA=255ということ。
"色フェーズを追加"ボタンを押して、より滑らかなグラデーションを作成しましょう。黒と黄色の間のオレンジのような色を選択しました。

このとき、"オフセット"というものを操作する必要があります。これはその新しく設置した色がそのグラデーション中、どの場所にあるかを表すもの。0が開始色で、1が停止色です。

今回は0.81にしてみました。あと重要なことですが、元ウィンドゥをみると、四角と線がグラデーションを表しているのが解ります。
図のように四角形をドラッグして横線形から縦に直してやりましょう。


3.レイヤー追加・円のコピー


ここでレイヤーを追加してみましょう。
メニューから"レイヤー(L)→新規レイヤー(A)"

これで新しいレイヤーができました。これは一番下のレイヤーのプルダウンメニューで確認したり、レイヤーダイアログを出して確認できます。

この上に新しく円を作ります。
1-2で作った円を選択し、右クリック→"コピー"ここで複製を選んではいけません!コピーは受け取った情報は可変ですが、複製はまったく同一のデータを保持するので、複製した先を変更すると複製前のデータも一緒に変換されてしまいます。注意。

同じく右クリ→貼り付け。このときちゃんと新しく作ったレイヤーに貼りついているか確認しましょう。LayerメニューでLayer1だけ、Layer2だけ表示させてみるのもいいかもですね。

まったく同じオブジェクトが得られたと思いますが、"フィル/ストローク"ダイアログを新しいオブジェクトについて出し、フィルを単色塗りに一旦戻します


移動ツールを使って元の円にぴったり重ねてあげます。グリッドを使うといいかも。もっと賢い方法がありそう。

4.陰影をつける:放射グラデーション


再びフィル/ストロークダイアログを開き、フィルタブで今度は放射グラデーションを選択します。同じく編集画面を開く。

陰影用レイヤー
ここで重要なのは縁に黒っぽい感じを出す、ということです。色フェーズを追加して、4つの黒を適度に分散させて作ってみました。

開始色は透明の黒(A=0)
2番目はかなり薄めの黒(A=20)・オフセット:80
3番目も薄めの黒(A=63)・オフセット:90
停止色はそこそこ薄めの黒(A=160)


でした。3色ではちょっと厳しいかなと思います。色は多くても問題ないのでいろいろ試してみるのもいいかも。


5.上部のテカリを作る


新しいレイヤーをもう一回作って、(3枚目)
元の円の半分くらいにした楕円を上半分に置く。

この時、フィルは線形グラデーションで完全不透明な白から透明な白に。
テカリグラデーション
ここでなんとなくぼかしをいれてみる。ちょっとだけ。下のスライドで2.0にしてみました。
テカリフィル

こんな感じになりました。おおそれっぽい。


6.仕上げ:下部をちょっと明るくしてみる


同一レイヤー上でやってしまいます。

さっきの楕円をコピーして、180度反転させましょう。そして円の下部に持ってくる。


このフィルのグラデーションを変更します。下部ほど明るくなればよいのでそのように前と同じくグラデーションエディタで編集。

開始が不透明な明るい黄色(A=225)で、停止が透明な黄色(A=0)。
下部用グラデ

このままでは不自然なので、ぼかしをかけます。自然になるように…16.7ってなりましたけど好みで。
下部ぼかし
終わり!こんな感じでした!お疲れ様でした!


ここに作成したSVGファイルを置いておきます。

aqua.svg

勝手に持ってって使ってもらって結構です。寧ろどんどん改変しちゃってくださいな!

本当に初心者でもネットを漁りつつここまで出来るので、みなさんもっと色んな事教えてくださいね。
ここはこうした方がいいとかこの辺がわからないとかあれば対応しますので><

インストールしっぱなしの凄いソフト、触ってみましょー。Inkscapeに限らず…
posted by gebet at 01:37 | Comment(1) | TrackBack(1) | tips

Jun 26,2007

Inkscapeとは

皆さんはオープンソースのベクターグラフィックスソフト、Inkscapeはご存知ですか?SVG(Scalable Vector Graphics)ファイルを扱える高機能なフリーソフトです。フリーのIllustratorと言った所でしょうか。

Inkscape. Draw Freely.
http://inkscape.org/

GIMPに比べて特に日本での知名度・Tips等はまだいまいちといったところ。
LinuxやMacやXPなどでリリースされています。ver.0.45.1では初めてぼかし機能が搭載されました。

よく"Inkspace"と間違えられるので注意。あとインストールに際して120MB要します。多言語対応なのでそのまま盲目的にクリックするといらない言語パックまで入ってしまい、30MBも余分に入ることになるので、ちゃんとチェックを外して日本語だけを入れるようにしましょう。

古いInkscapeを使ってらっしゃる方は、ver.0.45.1で変わったところも結構あるので、入れなおした方がいいかもしれませんね。


Inkscape関連のエントリは少ないのですが、目立ったのをまとめておきます。

導入方法など。ちょっと古いので幾分食い違いがあります。今は日本語ファイルを選択するだけで自動的にメニューも日本語になります。
オープンソースの SVG ドローツール、Inkscape を試す - WebOS Goodies


公式のチュートリアル。お世辞にも充実しているとは言えないので、このサイトでも少しずつ自分の勉強も兼ねて紹介していきたいです。
Inkscape tutorial: 基本

Inkscape tutorial: 上級

Inkscape tutorial: シェイプ

まだ英語の方がチュートリアル充実してるかな?気が向いたら勝手訳します。
http://www.inkscape.org/doc/


ここのサイトが一番充実してると思います。ありがたいことです。
Inkscape - bnote

というわけで次のエントリでアクア風ボタンを作ってみることにしましょう。今更かよっていわないで。
タグ:Inkscape
posted by gebet at 04:24 | Comment(1) | TrackBack(0) | reviews

Jun 05,2007

GIMPで映画風写真に加工してみる

この前のエントリが予想外に反響が大きかったので驚いています。
追記した方がうまくいったのでそちらをお試しください。

*このエントリはこれの改良版ですのでどうかよろしく*

ネタ元はちょっと前に流行ったこちら。
http://ebin.wordpress.com/2007/03/21/how-to-turn-your-photo-into-movie-like-effect-using-photoshop/

元画は例によってFlickrから。元の著作権はこちらの方に帰属します。京都の山科、醍醐寺。
http://www.flickr.com/photos/8_8/4896428/
加工前


まずレイヤーは一枚のまま。

1.彩度の調整


道具(T)→色ツール(C)→色相-彩度(S)を選択。

マスターの彩度を下げる。



好みになりますがここでは-70で実行しました。色あせた感じが出ればいいと思います。



2.明るさ-コントラストの調整


道具(T)→色ツール(C)→明るさ-コントラスト(R)を選択。

ここは思い切りコントラストをあげるのがコツ!だと思う。

失った色を取り戻させる事が重要なので…。同時に明るさも下げる。
色を取り戻させるべく、お好みで微調整して下さい。



コントラスト+90、明るさ-60くらいで実行しました。



3.レイヤーの複製


ここからレイヤーが増えます。
GIMPでは最初、レイヤーウィンドウは出ていません。
これは不便なので出しておきましょう。

ダイアログ(D)→レイヤー(L)もしくはCTRL+Lで。

レイヤーダイアログを出したら下のほうに並んでいるボタンのうち、
レイヤーを複製というボタンを押す。



そうすると 背景 コピー という新しいレイヤーが出来るのでそれをクリックして選択しておく。
わかりやすいように名前を変更してもいいかも。



これは基本操作なので、しっかり覚えといたほうがよいですね。

4.ぼかし


ガウシアンぼかしで代用してもかまわないと思うのですが、よりリアリティを追求する為に…

標準では装備されていないPhotoshopで言うところの"ぼかし(レンズ)"なのですが、世の中には凄い人が居るもので。
前のエントリでもご紹介しましたが、フォーカスブラーというそれそのものが公開されてます。

コレを使えるようにしておく。これについては割愛。

先ほどのレイヤー、"背景 コピー"について、選択されていることを確認してから、
フィルタ(R)→ぼかす(B)→Focus Blur を選択。



半径9.00くらいで実行します。後はそのままでもいいかな。
ちょっと処理に時間がかかったりします。
ガウシアンぼかしだとそうでもないんですけどね。



5.レイヤマスクの生成


レイヤーダイアログ中の"背景 コピー"の上で右クリックしてレイヤーマスクの追加をクリック。


ダイアログが出るので白(完全不透明)を選択してOK。



すると"背景 コピー"レイヤーの横に白い長方形が出来たはず。


6.ブラシを作る&見せたい範囲の指定


多少面倒ですが、でかい範囲を描くブラシは標準では用意されてないので自分で作る。
以前のエントリで作った人は余裕ですね。あれは失敗だけど…

ダイアログ(D)→ブラシ(B) もしくはShift+CTRL+Bでブラシダイアログを出す。
パレットっぽいところの絵筆・鉛筆ツールからでも出せます。

新規ブラシをクリックしてブラシエディタを出し、かなり大きめの半径にして、強度を0にする。



この時の大きさは、当然元画の大きさに依存します。
ここでは半径1000pxと縦横比を少しいじりました。


このブラシを選択した絵筆で、描画色になっているのを確認したら、画の中央をクリック。



視界が開けたはず。



7.周りに黒さをプラス


レイヤーダイアログで"新規レイヤー"をクリックして
黒(描画色)の新規レイヤーを作る。



画面が真っ黒になる。

そこでレイヤーダイアログ中の新規レイヤーを選択し、
透明度を50%くらいにする。



8.視界を開けさせてみる


今度は消しゴムツールで、さっきつくった黒いレイヤーの中心部をちょんとやる。
なんか暗くてやだなと思ったらもっと消しましょう。

レイヤーではこんな感じになる。


端に暗い部分を出させるのが本来の目的なので、元々暗くなってしまったこの画像では7.8の操作はいらないかもしれませんね。

9.レイヤーの統合


レイヤー(L)→下のレイヤーと結合(W) を二回行って一枚のレイヤーにする。

10.ノイズをのせる


RGBノイズをほんの少しかけることで、よりリアリティをあげる。

フィルタ(R)→ノイズ(N)→RGB散乱(S)
ほんとに少しだけ…0.06くらいのRGB散乱をかける。



11.上下を黒塗りにしてみる&仕上げ


矩形選択ツールで残したい領域を選択する。

選択→反転して、透明な新規レイヤーを作って、そこで黒く塗りつぶす。その後レイヤー統合して出来たのがコレ。



加工後

これをやるにあたって…7.8は飛ばしてもいいかもしれません。
ブラシの大きさ・強度は微妙ですね…選び方が。

こんだけやっといてなんなんですが、暗くしすぎるとあまり映えないみたい。

こうやったらうまくいったよーみたいなのあったら教えてほしいです。
タグ:GIMP レタッチ
posted by gebet at 07:50 | Comment(0) | TrackBack(0) | tips

Jun 03,2007

GIMPでミニチュア風写真を作ってみる

はてブでちょっと話題になっていたので。
それGIMPでも余裕じゃないかしら?ということでやってみた。


ネタ元はこちら。
http://www.designwalker.com/2007/06/tilt_shift.html
で、ちょっと調べたらもうちょっとハイレベルなチュートリアルがあった。これも参考に。
http://aska-sg.net/pstips/tips/pages/sentakuhanni-quickmask-01.html


素材元はFlickrにて拝借。エッフェル塔からの眺め。
元の著作権はこちらの方に帰属します。

http://www.flickr.com/photos/alvan/105202547/
元画像


レイヤーは一枚のまま進めます。

1.明度・コントラストの設定


道具(T)→色ツール(C)→カーブ(C)を選択。

チャンネルが明度となっているのを確認してから
S字を書くようにカーブをドラッグして調整する。

mini2.jpg

これによって暗いトコはより暗く、明るい場所はより明るくなる。
明るさ-コントラストで明るさを下げ、コントラストを上げるのと変わらない…はず。

それっぽくなったらOKを押す。忘れないように。

2.彩度を上げる


道具(T)→色ツール(C)→色相-彩度(S)を選択。

基準色がマスターになっているのを確認し、彩度を上げる。
40-50くらい、お好みで。100でOK。

mini3.jpg

OKを押して確定させる。

3.クイックマスクをかけてみる


画面左下の小さな四角をクリック!

mini4.jpg

これで画面全体が赤くなったと思います。

mini5.jpg

これはいわゆる描画することで選択するという仕組み。

4.大きめのブラシを作る


注:下に追記があります。

ダイアログ(D)→ブラシ(B)でブラシダイアログを出して、大きめのブラシを作ることにする。

mini6.jpg

ブラシダイアログ中の新規ブラシをクリック。この場合半径300くらい、強度0.50くらいで、縦横比とか角度とかいじってミニチュアに見せたい部分の形にしてみる。
この辺は好みの問題というか、試行錯誤しないとダメっぽい。
で、保存。


mini71.jpg

もしかしたらもっと簡単なやり方があるのかもしれないけれど…

5.ブラシをつかってマスクを消す


注:下に追記があります。

消しゴムでさっき作成したブラシを選択し、マスク上を一回クリックする。

mini8.jpg

6.クイックマスク解除&選択域反転


3でかけたクイックマスクをはずす。再び左下の小さな四角をクリック。

すると領域が選択されているので、コレを反転させる。

選択(S)→反転(I)を選択。
これと選択解除("x なし(N)"と書いてあるやつ)はよく使うので覚えておこう。

mini9.jpg

7.ぼかす


元エントリはレンズぼかしを使っているんですがガウシアンぼかしでもそんなに変わらないだろうということで代用。

フィルタ(R)→ぼかす(B)→ガウシアンぼかし(G)で、好きなようにぼかしてあげる。

出来上がったのはこちら。建物があったほうが綺麗かな…やはり。
画像処理後

この技法を使うにあたって、やっぱり元画が俯瞰的な画じゃないと様にならない。
建物は意外と映える。元画にかなり依存してしまう技法だともいえるのではないでしょうか。

初心者なもので、手違い等ありましたらコメント欄とかにどうぞ。
あとキャプがへぼくて申し訳ない。もう少し経験を積みます。

---
追記:Focus Blurというものを入れると幸せになれるみたい。
彩度はMAXくらいでも問題なさそうです。
最後に選択的ガウシアンぼかしをかけるという技法も。

---
追々記:フォーカスブラー使ってブクマで言及のあった方法でちょっと手直し。
彩度MAXにして、クイックマスクかけるとこまでは一緒。

ブレンドツールを選択して、双線形を選択し、中央付近から垂直に下まで下ろす。

クイックマスク解除して(領域反転はいらない)、さっき入れたフォーカスブラーを半径3くらいで適用。

その後全体に対して選択的ガウシアンぼかしをかけるとコレ。
訂正後

さっきよりそれっぽいですね。精進します。
タグ:GIMP レタッチ
posted by gebet at 06:32 | Comment(0) | TrackBack(1) | tips
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。