更新 2015.5.6 20:28閲覧 9897

【アクア風】シルエット猫画像の作り方【GIMP編】

エドワード・ゴーリーは、猫を多頭飼いすると、3匹目までは個別に飼い主に懐くが、4匹以上になると徒党を組み始めるようになり、猫達との間に『種族間の壁』を感じるようになったと述懐しているが、果たしてその実態や如何にと、「猫の多頭飼い実況サイト」を探していたところ、Inagaki, M 様の「ねこな日記(現在は閉鎖)」に辿り着き、2年間ほど実態調査(生態観察?)を行ってみた。が、現在の所は飼い主を排斥するような行動が見られない為、徒党を組むのはゴーリーの偏愛故であるとの結論に帰着した。ところで、この「ねこな日記」には普段見ることの出来ないナイスポーズな猫達の写真が沢山あって、2年間収集したら膨大なコレクションとなってしまった為、GIMP の練習用素材として活用させて頂いていたら、まずまずのロゴを完成させることが出来たので、Inagaki, M 様に使用許諾を申し出たところ、ご快諾頂いた上に「ねこな日記」で当サイトのことをご紹介して下さった。感激の余り、ご紹介下さった日のニフィ嬢を元にアクアロゴの作り方解説ページを作成してしまった。(作成日: 2007年6月10日 (日曜日) 01:16:11 PM)

猫写真からシルエットを取り出す

「ねこな日記」で当サイトをご紹介下さった日のニフィ嬢がとても愉快なポーズを取っていらしたので、この写真を元に、アイコンにも加工可能な画像を作成すべく、パスを使って猫の姿のみ切り抜く。

パスを選択範囲に変え、色の付いたレイヤーを追加(今回は白)。シルエットを見て猫らしさが出ているかを確認する。短毛種の猫は、パスを綺麗に取りやすく、シルエットも美しい。

猫のシルエットを切り抜くときには、耳や鼻を強調した方が猫らしく見える為、パスを修正する。写真では何であるか分かっても、シルエットでは分かり辛いという箇所は、パスの大きさを変えたり、その部分をカットすることも必要になるので注意を要する。上図赤丸はパスのアイコン。

蛇足。サラ嬢の様な長毛種の美猫は、シルエットのみだと、顔から首にかけてのラインが綺麗に出ないことがある。実は、以前Contact Us で使用していた画像の左側がサラ嬢なのだが、うまく切り抜くことができなかった為、短毛種の猫としてパスを作成してしまった(反省)。ふんわりした毛並みをうまく切り抜き、パスを整理することは今後の課題とする。

修正が終わったら、パスを選択範囲に変え、白で塗りつぶす。レイヤーの透明度を50%にして選択を解除。

猫らしさが際立つよう、前足、右後足、口元などに線画を追加。流れるようなラインを出すときは、パスを使って選択範囲を作成してから塗りつぶすとキレイに出る。また、細かい部分はブラシ等を用いて描くと良い。

黒背景で確認して、猫だと分かればシルエット加工は終了。保存しておく。

今回はアイコン化することも視野に入れているので、「画像/画像拡大縮小」で、横128px になるよう縮小して「別名で保存」した。

縮小されたニフィ嬢のシルエット。

シルエットにアクア背景を合成する

Mac OS X 用のアイコンを作ることができるように、128×128px の新規画像を作成。

アクア画像とは、多くの書籍や解説サイトで紹介されている通り、光(ハイライト)と、光が当たった部分に生じる影と、透過光を表現したものである。従って、背景色レイヤーを1枚、光用の白色、影用の黒色グラデーションレイヤーの2枚、透過光用の任意色のグラデーションレイヤーをオーバーレイに指定した1枚があれば、それなりにアクアらしく見えることになる。

背景レイヤーを、上を黒、下をダークグリーンにしたグラデーションで塗りつぶす。同じ画像で複数のカラーバリエーションを持つアクア画像を作成する場合は、背景色レイヤーと黒色グラデーションレイヤーの2枚に分けると良い。

新規レイヤーを作成。明るい緑色を選び、下から上へグラデーションで塗りつぶす。レイヤーのモードを「オーバーレイ」に設定する。

『7. 縮小されたニフィ嬢のシルエット』をペースト。右後足の肉球部分が分かり辛いので一旦消去し、ブラシを用いて再度肉球のみ描き直す。

ニフィ嬢レイヤーの透明度を適宜調整 → 今回は70%。ついでにニフィ嬢を下方移動した。

ニフィ嬢に影をつける。「Script-fu/影/ドロップシャドウ」を開き、左図の通り指定。

影が付いたニフィ嬢。

外枠を作成する。背景色が黒色の新規レイヤーを作成、名前を「waku」と名付ける。
「選択/選択領域の縮小」を選び、内側へ5px 縮小させ、消去する。

枠ができあがった状態。

枠にも影をつけるので、「waku」レイヤーを複製する。
「waku」レイヤーに「フィルタ/ぼかす/ガウシアンぼかし」でぼかし加工を行い、枠の影を作成する。今回は水平、垂直方向へ7px のぼかしが入るよう設定した。設定の詳細は下図を参照のこと。

光部分を作成する。枠レイヤーとニフィ嬢レイヤーとの間に新規レイヤーを作成。全てを選択し、「選択/選択領域の縮小」を選び、内側へ5px 縮小させた後、上から下にかけて白 → 透明のグラデーションで塗りつぶす。

このままでも光が当たっているイメージになるのだが、ニフィ嬢を目立たせる為に光の輪郭を作成した。上下左右より内側へ5px と、x軸方向へ64px、y軸方向へ50px、65px のガイドを引き、左図のようにパスを作成。ガイドを引くのはパスを作りやすくする為。

パスを選択範囲にしたら、「選択/反転」を選び、パスで囲んだ範囲以外を消去。レイヤーの透明度を適宜設定。当サイトでは光が強すぎないように透明度を70%に指定している。

全レイヤーの図。

文字を加えてみたり、透明度を変えてみたり、ニフィ嬢を動かしてみたりして、最終的なレイアウトを考える。アイコンとして加工する場合は、大きさを変えたときにどう見えるかが重要になってくるので、画面を拡大縮小して確認しつつレイアウトを考えると良い。

今回はニフィ嬢の画像のみをやや上へ移動し、「Niffy the Cat」という文字を下に配置してみた。文字はApple Chancery フォントを使用。文字色は白。下図は文字に指定した影の設定。

GIMP 上の完成図(原寸)。

原本を xcf 形式で保存し、アイコン変換用に PNG でも保存しておく。

左は PNG で保存した画像。これを元に Icon Composer というソフトを用いてアイコンを作成することができる(らしい)。Win と Mac では作り方が変わってくるので解説は後日。

おまけ。当サイトの旧ロゴ画像。

ニフィ嬢

ティッピ嬢

ニフィ嬢

ニフィ嬢

縞々嬢&カミー嬢

麦藁母@立川公園様

ティッピ嬢&サラ嬢

キュー姐御