ほぐれスライム

いっぱい物足りない状態が続いてる「ほぐれスライム」。

頭の中には「そのうちやるリスト」があるんだけど、そこから漏れてるヤツがいた。

そう「favicon（ファビコン）」！

アイツって、どうでもいいけどほっとけないｗ

「そのうちやるリスト」に入れたら一生忘れそうだから、先片付けちまうか。

Favorite icon（フェイバリット・アイコン）略してFavicon

今まで「ファビコン」って発音してたけど、英語圏では「ファブアイコン（Fav-icon）」て読むってさっきウィキペディアで読んだｗ

でも慣れ親しんだ「ファビコン」がいい。

今後忘れないように、メモメモと。

Photoshopで作るには

Photoshopだと、.ico ファイルが作れないってことで一筋縄じゃない。

どうやらWindows icon形式で保存できるようにするプラグインを拾ってくるといいらしい。

ICO(WINDOWS ICON)FORMAT現在つながらず

マルチアイコン化

ひとつの .ico　ファイルで「16×16pixel」「32×32pixel」「64×64pixel」に対応した「マルチアイコン」ってのをつくる。

マルチアイコンは @icon変換 を使えば一発で作成可能。

ん？ @icon変換 の仕様・・・

読み込みは ICO/BMP/PNG/PSD/ICL/EXE/DLL、書き出しは ICO/BMP/PNG/ICL に対応しています。

おおっ！プラグインいらずじゃん！

これ、どうやら背景レイヤー1枚だけだと読み込まないみたい。

そこだけ気をつければ問題なし。しかも、レイヤー別に読み込んでくれるから.psdも1ファイルで済む。

サイトに反映させるには

ここのくだりはWikipediaを参考にさせてもらおう。

HTMLやXHTMLで指定する方法

HTML/XHTML内でFaviconを指定するにはhead要素の中でlink要素を次のように用いる。単独でも効果はあるが、両方指定するのが望ましいとされる。

• <link rel=”shortcut icon” href=”http://example.com/favicon.ico” type=”image/vnd.microsoft.icon” />
• <link rel=”icon” href=”http://example.com/favicon.ico” type=”image/vnd.microsoft.icon” />

ふむふむ

一行追加しとくか・・・

ファイル名の決まりは特にない。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのようなフォーマットを用いても良い。

なにっ！？

.ico じゃなくても良かったの？？？？

.gif とか .png でもいいんかっ

ただし、Internet ExplorerはICO形式しか認識しない。

あ、そういうことかｗｗｗｗｗ

じゃ、IEのために手間かかる方でやっとくか。

専用のパノラマカメラ、パノラマレンズがあれば簡単に撮れるものを・・・。

でも、手持ちのデジカメとPhotoshopがあれば作れるぞ。と。

撮り方で九割決まるし。

Photoshopがありゃなんでも出来るって思ってると、後々レタッチにすげぇ時間食う。最初にしっかり撮れてればPhotoshopの出番なんてチョッピリで済む。

なんだったら余った時間で思う存分ハナほじれるよ。

しかもソフトボールくらいのが出来ちゃうぐらい。作業時間に差がでる。

できねぇよｗ

今回は実践してみたので、まず撮り方をまとめてみる。

1. 撮影場所は一箇所で固定
   • 撮影者がその場でターンするイメージ
   • 今回は椅子に座って上半身を固定
     • 椅子の回転をパノラマ雲台の代わりとして活用
2. 室内撮影だったのでストロボを使用
3. 好みの明るさでAEロック
   • 色味の違う写真をつなぐ作業は面倒
4. 被写体を端から端まで複数回に分けてシャッターを切る
5. 写真のつなぎ目を30％くらい重なるカンジで撮る

PCに取り込んでPhotoshopでつなげる

やっぱPhotoshopはスゲェ。

「Photomerge(フォトマージ)」っていうパノラマ自動合成機能がついてんの。CSから。

じゃ、その「Photomerge」の簡単さを画像つきでメモメモと。

これは、CS3ね。

[ファイル]＞[自動処理]>[Photomerge..] って選んでく。

「Photomerge」のパネルが開いたら、撮影した写真を選択。

今回は「自動設定」で合成スタート！

するとPhotoshopがガンガン写真開いてはレイヤー合成！

もう、ちぎっては投げみたいな。

で、Photoshopが「できました！」って出してきたのがコレ。

すげぇなオメェｗｗｗあっという間（5～6分くらい）

ちなみに今回撮ったのは、自宅の作業デスクｗ

トリミング・色調補正・ゴミ取り・その他はお好みで。

今回使ったカメラは以下のとおり。

• Nikon P5000+ワイドレンズコンバーター+スピードライト
• NikonD40+30mm単焦点レンズ+ストロボ

で、それぞれの撮れ具合（レタッチ込み）は下に。

まず、Nikon P5000ね

加工は、トリミング+トーンカーブ+彩度アップくらい

で次がNikon D40

こっちは、ぼかし（ガウス）を結構使ってる。デスク正面にあるNikon P5000以外をじんわりぼかしてるカンジ。

Photomergeのおかげでシャッターが軽くなった。

引きこもりカメラマンにとっては、こんな頼れるやつ（Photomerge）が後に控えてると思うと楽しくなるわｗ 失敗を恐れずシャッターが切れるってもんだ！

宝の持ち腐れ状態だったカメラよ。よみがえれっ！

コンデジ「いや～ｗ 宝てｗｗｗ 照れるつの」

デジイチ「ちょｗ おめぇの事じゃねーだろがｗｗｗｗ」

お前ら2台ともだ。ばーろい。ちょっとコッチこい。

寝てたオメェらを起こした理由は「パノラマ」

過去何度か旅先でパノラマ写真に挑戦してきたけど、上手くいったためしがなかった。

せっかくの絶景目の前にして撮りそこなうとはなんちゅう失態だ。

今までやってたパノラマ撮影がまちがいだらけ

過去を思い出しつつ箇条書きにしてみると・・・

• 被写体とカメラの距離がバラバラ
• カメラを使いこなしてないw
• そもそもパノラマの撮り方を知らない
• 露出がバラバラでレタッチしにくい

ひどいなこりゃｗ

ど素人だということを自覚できたって事で良しとするか。

以下は次回までのメモ

パノラマ撮影の方法

• カメラを固定する（できれば三脚＆パノラマ雲台）
• 被写体とカメラの距離を一定にしながら撮る
• 写真のつなぎ目が30～40％重なるように撮る
• AEロックで露出を統一しながら撮る
• Photoshopの自動処理「Photomerge」で楽チン合成

こんなもんかな。次は実践編ってことで。

第十四回は完成編！最終回

いままでの工程で99％完成してるんだけど、最後のツメってのやっとこか。
最後は、やっぱ色調整だね。この工程は好みの問題だから気の済むまでやったらいいよｗ

乗算で重ねていくと彩度がくすむ

最後に色調整したのは「壁」。まず下の画像を見てね。

上が調整前、下が調整後。

ここでは、壁だけの選択範囲をつくって「色相・彩度」レイヤーで彩度をあげるだけ。

• 色相：0
• 彩度：+51
• 明度：+16
• 描画モード：通常

乗算で色レイヤーを重ねていくと色がくすんでいくから途中か後で色を調整しとくといいよ。この工程をサクサク進めるためには「チャンネル」は欠かせないから。主要なパーツぐらいは選択範囲を個別に作っておくといいよ。

じゃ、完成品のレイヤー構成ドドーン！

各レイヤーグループの展開内容は過去記事読んでね。

寝かせないと分からない事がある！

最後に重要なことメモしとこ。

イラスト長年やってていつも思うことなんだけど、数ヶ月後とか数年後に改めて見ると作品のいいトコロと悪いトコロがくっきり見えてくることがある。

現段階でモヤっとしていても、後々にならないと明確に分からないって事って多いんだよねー。なんだろねコレ。

こういうときは、さっさと気持ちを切り替えた方がいいよね。他にもやる事あるんだしｗ

第十三回は影！地味な影編！

このイラストの場合、下絵段階で鉛筆線の影入れまくってるからだいぶ手が抜ける。

この回で入れた影は、最低限必要な影。壁との距離感を出すための影。

• R:128/G:128/B:128
• 描画モード：乗算

レイヤーも一枚だけ。色もグレー一色で塗って乗算でかぶせるだけ。カンターン！

コツは、壁の段差と、強い光源を一方向だけ意識しておけばおｋ。

「影」「光源」はとっても奥が深い。「写りこみ」「反射光」とか現実の世界を意識するとやらなきゃいけない工程がどんどん増えちゃう。でも締め切りってのが迫ってきて作業時間も無限じゃない。そういうときには、手を抜くテクが必要になってくるんだと思う。

じゃ、次回はいよいよ完成編！

第十二回はホワイトタイガーの帽子編

元々毛むくじゃらなんだから寒くないだろうけどさ、帽子かぶせた方がかわえぇし。深い意味はないよ。じゃ、レイヤー構成を。

帽子の立体感は、毛糸の網目と、影でつけていく。あんまりやりすぎると他の部分より浮いちゃうから適当なところでストップ。

1. 色相・彩度
   • 色相：0
   • 彩度：+35
   • 明度：-11
   • レイヤーマスク
   • 描画モード：通常
2. 影
   • R:128/G:140/B:135
   • 描画モード：乗算
3. 色002
   • R:160/G:162/B:166
   • 描画モード：乗算
4. 色001
   • (縞色01)R:156/G:158/B:162
   • (縞色02)R:133/G:114/B:137
   • (縞色03)R:37/G:43/B:62
   • (縞色04)R:27/G:68/B:126
   • (縞色05)R:130/G:173/B:192
   • (縞色06)R:19/G:12/B:22
   • (ボンボン01)R:120/G:148/B:165
   • (ボンボン02)R:79/G:115/B:147
   • (ボンボン03)R:33/G:64/B:119
   • (ボンボン04)R:170/G:190/B:204
   • 描画モード：通常

ここでも新規調整レイヤー「色相・彩度」で色合いを調整してるから、上記のカラー数値と完成した帽子の色は相違してる。こういう状況作ったときによくやる失敗は、「色相・彩度」レイヤーONにしたままスポイトで色を取ってきちゃう事ね。元色と違う色を取ってきちゃうから。元色取りたいときは、上にかぶさってる調整レイヤーや描画モード、レイヤー不透明度を通常値に戻してから取ってこないとね。

次回は「影」編。簡単だけど簡単じゃない。奥の深い世界だよん。

第十一回はホワイトタイガー！主役の登場だ！

かわいいねぇホワイトタイガー。絶滅危惧種だからね。大事にしないとね。黄色い毛が白くなる変種らしいんだけど、黒い縞は白くなんないんだね。不思議～。ホワイトタイガーってより白黒タイガーだよね。オセロタイガー・・・・かわいくねぇやｗ

じゃ、レイヤー構成いってみよう。

白って難しいね。よく見ると黄色がかった白になってると思う。もともと黄色の毛の白変種だし、そういうこと。

1. 色相・彩度（レイヤー>新規調整レイヤー>色相・彩度）
   • 色相：0
   • 彩度：-33
   • 明度：+10
   • レイヤーマスク
   • 描画モード：通常
2. 色004
   • （体）R:217/G:217/B:207
   • （口）R:92/G:73/B:58
   • 描画モード：乗算
3. 色003
   • R:239/G:241/B:213
   • 描画モード：乗算
4. 色002
   • R:198/G:190/B:159
   • 描画モード：乗算
5. 色001
   • （縞）R:120/G:97/B:62
   • （鼻）R:152/G:68/B:58
   • 描画モード：通常

ここでのポイントは、新規調整レイヤーにマスクかけて色調補正してるトコロかな。補正しないと、黄色が勝ちすぎてるから。色味は好みの問題だと思うけど、なるべく第三者視点の ” 期待色 ” を意識していくのがコツだと思う。

次回はホワイトタイガーにかぶせる帽子編だよー。

第十回は雪かきスコップ編

やったー！楽な工程だー！ってナメてんじゃねぇーーー！

そうそう楽できると思うなよっニャロめ。

今回も地道にマウスで色塗りだ。レイヤー構成いってみよー。

ここまでずっとレイヤーの名前に「色001」とか続いてるけど、他にねぇのかネーミングｗ 凝りたい人は凝ればいいや。ここも面倒だから手抜いてる箇所といえるね。もっと手を抜けばデフォルトの「レイヤー1」とかでもいいけどさ、これやると終いにゃ「レイヤー52」とか「レイヤー5のコピー10」とか所属不明のレイヤー増産することになっちゃうでしょ。手抜きは適度にね！

1. 色004
   • （赤）R:255/G:220/B:190
   • （茶）R:239/G:218/B:184
   • 描画モード：通常
2. 色003
   • （赤）R:187/G:25/B:2
   • （茶）R:226/G:191/B:135
   • 描画モード：乗算
3. 色002
   • （赤）R:187/G:25/B:2
   • （茶）R:226/G:191/B:<135/li>
   • 描画モード：乗算
4. 色001
   • （赤）R:225/G:32/B:0
   • （茶）R:213/G:180/B:126
   • 描画モード：通常

もっと質感だしたかったらレイヤー増やして重ね塗りしてくのもいいと思う。

次回はやっと主役の登場！ホワイトタイガーだー！

第九回は陶器っぽいヤツ

陶器っぽいてｗｗｗ元写真そのままだから、正体不明ｗ 本当は質感を把握できる別モノに置き換えるところなんだろうけどね。面倒だからしない。ここ手抜きポイントねｗ

雪に半分埋まってて、ホワイトタイガーが座れる強度を持ってる陶器っぽいヤツってのもイイでしょ？てことでレイヤー構成いってみよう。

続けて各レイヤーの詳細も

1. ハイライト
   • R:233/G:238/B:238
   • 描画モード：ソフトライト
2. 模様
   • R:39/G:33/B:9
   • R:78/G:51/B:20
   • R:79/G:69/B:29
   • R:104/G:86/B:49
   • R:175/G:135/B:100
   • 描画モード：通常
3. 色003
   • R:193/G:169/B:158
   • 描画モード：乗算
4. 色002
   • R:193/G:169/B:158
   • 描画モード：乗算
5. 色001
   • （右）R:213/G:124/B:80
   • （左）R:193/G:130/B:99
   • 描画モード：通常

この工程はタブレットがあった方が楽。自然にできた陶器の模様や陰影は、フリーハンドで表現した方がそれっぽくなるからね。もし、マウスでやる場合は、クリック連打するか、右肩ピクピクするような細かい動きが必要だよｗて言う自分がマウスだけで描いてるワケだけど。

次回はスコップ編！やったー楽な工程だー！

第八回は塗る人を塗る人

これは簡単。写真のおっちゃんそのままだからｗ

絵に起こすときにちょっとデフォルメしあるけど、もっと時間かけていいときは服、性別、ポーズも変えていっていいと思う。

じゃ、レイヤー構成ね

本当は１色につき1レイヤー使いたいところだけど、レイヤー多すぎると管理が面倒になるからほどほどに。結果、全身の色を6層のレイヤーで塗り重ねる結果に。

1. 色006
   • （ハケの毛）R:39/G:37/B:38
   • （ハケのペンキ黄）R:211/G:137/B:20
   • （ハケのペンキ紫）R:211/G:42/B:100
   • 描画モード：通常
2. 色005
   • （帽子・ジャケットの影）R:184/G:194/B:212
   • （髪の影）R:163/G:163/B:163
   • 描画モード：乗算
3. 色004
   • （シャツ・パンツの影）R:194/G:200/B:209
   • （ハケ全体の影）R:188/G:172/B:147
   • 描画モード：乗算
4. 色003
   • （ジャケット・ハケ金属部分のハイライト）R:149/G:146/B:164
   • 描画モード：通常
5. 色002
   • （帽子・ジャケ・手袋・靴）R:91/G:94/B:125
   • （帽子の帯）R:190/G:200/B:218
   • （パンツ）R:221/G:226/B:235
   • （肌）R:200/G:155/B:127
   • （ハケの柄）R:39/G:37/B:38
   • （ハケ金属部分）R:156/G:138/B:125
   • 描画モード：乗算
6. 色001
   • （帽子・ジャケ・手袋・靴）R:94/G:103/B:134
   • （シャツ・パンツ）R:189/G:200/B:218
   • （髪）R:52/G:52/B:54
   • （ハケの柄）R:39/G:37/B:38
   • （ハケ金属部分）R:188/G:170/B:148
   • （肌）R:200/G:155/B:127
   • 描画モード：通常

色塗る人のポイントは、「ハケについてる黄色ペンキ」ね。地味だけど黄色いトラの絵を塗ってる人なんだって言う説明になるから。冒頭でも書いたけど、細かいとこほど手を抜かない。復唱してねｗ

次回はトラが座ってる陶器っぽいもの編