FC2ブログ

2009.01/20(Tue)

PSPカスタムテーマのフォーカス付きのアイコンの作り方をまとめてみました

完成したカスタムテーマ
このエントリの続き。

フリーソフトのGIMPを使ってぼちぼちと作っていたPSPのカスタムテーマが完成しました。「レイヤ?なにそれおいしいの?」状態から始めて、なんとかフォーカスの処理(上の画像では【フォト設定】のアイコンが光っているように見える)までできるようになったので、自分用にやり方をまとめておきます。

ツール

・ 公式ツールCustom Theme Converter
カスタムテーマ作成に使うツールは、プレイステーションの公式ページからダウンロードできます。カスタムテーマの詳細な仕様も同梱されています。
http://www.jp.playstation.com/psp/dl/tool/psp_customtheme_tool_eula.html

・ フリーの高機能グラフィックソフトGIMP2
非常に高機能ですが、初心者や情弱にはあまり優しくありません。
http://www.geocities.jp/gimproject/gimp2.0.html

・ *.pngファイルの減色ソフトpngquant
カスタムテーマ作成@wikiより。単機能でお手軽。
http://www42.atwiki.jp/psp_theme/pages/27.html

素材

・ デフォルトのアイコン
Custom Theme Converterの添付のマニュアルを開いてAlt+PrintScreenでキャプチャしたものから切り抜きます。

・ 嫁画像
お好みで。イラスト描ける人が羨ましい><
THE iDOLM@STER Live For You(L4U)には、背景を青などの単色にするブルーバックモードが使えて便利です。
基本設定画面>Stageのタブで、ライブハウスを選択した状態でRS→LT→LT→RT→RT→X→X→RSで選択できます。通称765コマンドらしい。

壁紙、プレビューアイコン

壁紙は480×272の*.bmpファイル(24bitカラー)、サイズがちょっと半端ですが特に苦労することはないかと。自分はXbox360のテーマファイルのキャプチャ画像を使いました。
http://hanemitsuru.blog105.fc2.com/blog-entry-256.html

デフォルトアイコンの切り出し

32×32で作業をしました
マニュアルのアイコン画像をスクリーンキャプチャして、大きさを決めます。
このときは32×32にしてしまいましたが、もっと大きなサイズで作って、最後に縮小した方がきれいにできるかもしれません。
で、「色を透明度に」で白を透明にしてやって、「階調を反転」でできあがり。手抜き作業です。

あとでまた編集するので、GIMPのファイル形式である*.xcfで保存しておきます。

キャラクター画像の切り出し

Live For Youのブルーバックを使って画像をキャプチャします。
バックの色は輪郭に色が残ってしまったときに一番目立たなそうな青を使いました。いい表情をしているスクリーンショットを選んで、480×480の範囲を切り出します。なお、作業の最後に48×48まで縮小します。左下にオリジナルのアイコンを重ねるため、キャラをできるだけ右上に寄せて切り出しておきます
【矩形選択】で480×480の範囲を切り出す
1番下になるレイヤは「背景」として色々制限があるため、レイヤを1枚コピーしておきます。また、1番下になるレイヤは黒で塗りつぶしておきます。
「背景」レイヤをコピーしておく 「背景」レイヤを黒で塗りつぶしておく
背景を消去するため、【ファジー選択】で青い部分をざくっと選択します。「しきい値」を変えると選択結果ががらっと変わりますので、試行錯誤して「しきい値」を決めます。細かい部分は【自由選択】を使って手動で修正しておきます。
【ファジー選択】しきい値は試行錯誤で決めた 【自由選択】で細かい部分を修正
不要な部分の選択ができたら、「消去」で不要な部分を透明に。
不要な部分を「消去」
フォーカス用の光っている効果をもたせるためのレイヤを複写しておきます。
なお、フォーカス用のレイヤは、640×640で作成して、作業の最後に64×64に縮小します。
光っている部分用にレイヤをもう1枚コピーしておくキャンバスと、フォーカス用のレイヤは640に拡大する


キャラクターを塗りつぶす

選択範囲を反転 念のため、選択範囲を「チャンネルに保存」
レイヤーの大きさを480×480から640×640に広げたため、選択範囲に大きさの違うレイヤの間が含まれてしまっているので、選択範囲をキャラの外形をなぞった形に作り直します。
この選択範囲は、あとで使いたくなることがありそうなので「選択」→「チャンネルに保存」で保存しておきます。
「選択範囲を拡大」 指定した色で塗りつぶす 真っ白ではなく、少し壁紙の色と合わせてみた 「描画色を変更」は色が入っている箱をクリック、「塗りつぶし範囲」を選択範囲を塗りつぶすに変更するのを忘れずに
「選択範囲の拡大」で、範囲をキャラより大きくしてます。拡大する量はお好みで。
拡大した範囲を「描画ツール」→「塗りつぶし」で好きな色に塗りつぶします。今回は、真っ白ではなく壁紙にあわせて、薄い紫色にしてみました。

【追記090601】
描画色の変更はツールボックスの色が表示されている箱をクリックするとメニューが開きます。また、選択範囲を塗りつぶす場合は、「塗りつぶし範囲」のところを「選択範囲を塗りつぶす」に変更しておきます。

塗りつぶした範囲をぼかす

ぼかす前に「選択の解除」を忘れずに ガウシアンぼかし ガウシアンぼかしのパラメータ設定はこれくらいでやった もう一度ガウシアンぼかし
選択を解除してから、「フィルタ」→「ぼかし」→「ガウシアンぼかし」を適用します。
パラメータは今回のものをそのまま使ってもよし、多少見直してもよし、お好みで。
ぼけぼけにしたかったので、「「ガウシアンぼかし」を再適用」で2回目のぼかしをかけておきます。

デフォルトアイコンと組み合わせてできあがり

アイコン用に画像サイズを縮小 デフォルトのアイコンを持ってきてドロップ 左下に寄せてできあがり
640×640で作ってある画像を64×64に縮小して、32×32で準備してあるデフォルトのアイコンをドロップします。
左下のよさげな位置まで引っ張って配置すれば完了です。

別々に保存

アイコン本体は48×48、フォーカス用のもやもやの画像は64×64で保存しないといけないので、64×64のフォーカスと背景のレイヤをいったん削除して48×48の*.pngで保存し、保存後削除したレイヤをUndoで復活、逆にキャラクタ画像とデフォルトアイコンを削除して64×64の*.pngで保存しました。
とっても原始的なやり方で恥ずかしいのですが…。何かスマートなやり方があったら教えてください。

pngquantで減色してできあがり。

完成品(原寸)

完成品・キャラ画像+デフォルトアイコン 完成品・フォーカス用のアルファ

思いつきとか

キャラクターの周りがボヤッと光るだけじゃなくて、ブーストメールのwktk状態みたいにキラキラさせたり、TV出演のアピールみたいに音符やハートマークがピカピカしても面白いんじゃないかなって思いました。
ブーストメールでワクテカ状態

参考にしたところとか

・ GIMPでのアイコンの作り方の簡潔な解説。
カスタムテーマ作成@wiki
http://www42.atwiki.jp/psp_theme/pages/16.html
なお、GIMPでは透過されているのに公式ツールで見ると透過されていないという不具合は、自分が使用したGIMP2.6では起きませんでした。

・ お金を取ってもいいレベルのカスタムテーマの作者さん達
PASPiCth :GIMPによる壁紙の作り方のチュートリアルがありました。
http://paspicth.net/index.php

PSP-OMEGA
http://blogs.yahoo.co.jp/braveomega

PSPカスタムテーマ製作所
http://pspcustomtheme.blog94.fc2.com/

SK@LLCAT WEB :リンクしたページはデフォルトアイコンの作り方とか
http://blog.livedoor.jp/skallcat/archives/50519242.html

・ GIMPのチュートリアルとか
「GIMP チュートリアル」とか「GIMP 技法」とかでググればいくらでも出てくるけれど…

GUGチュートリアル日本語版
http://www.geocities.jp/gimproject2/tutorials/gug-tutorials/

GIMP思い込みチュートリアル
http://gimp.blog.shinobi.jp/

【More・・・】

誰得。
関連記事

テーマ : PSP - ジャンル : ゲーム

04:44  |  PSP  |  TB(0)  |  CM(13)  |  EDIT  |  Top↑

Comment

ここを拝見させていただいて、テーマを作ってみました。
分かりやすい解説ありがとうございました。
Sig | 2009.01.20(火) 22:25 | URL | コメント編集

これは超絶情弱の俺には素晴らしい教材です!
PSP本体とSPも紆余曲折を経て何とか買う決心がつきました。
購入した際には参考にさせてもらいますね。

…まぁ、キャプチャできる環境が無いんですけどねorz
たつ | 2009.01.20(火) 22:34 | URL | コメント編集

●>みなさま

>Sigさん
お役に立てて何よりです。あと、拍手コメもありがとうございました。
分かってしまえば意外と簡単ですし、何より嫁テーマを作るのは楽しいです。

>たつさん
SP発売日には対戦オフ繪ですねわかります。
自分のPSPに嫁が常駐しているのはすごくいいですよ~
羽根 | 2009.01.20(火) 23:38 | URL | コメント編集

描画色の変更の仕方がわかりません。あと選択範囲の拡大のあと塗りつぶしができません。どうしたらいいですか?
マコマコ | 2009.05.31(日) 21:05 | URL | コメント編集

●>マコマコさん

後で記事に追記をするので、少し時間をいただきたいと思います。

【追記090601】
記事に追記しました。
羽根 | 2009.06.01(月) 02:35 | URL | コメント編集

●ビットの深さが・・・

分かりやすい説明でかろうじでアイコンを完成する事が出来たのですが・・・
ビットの深さが原因でカスタムテーマのアイコンに入れられません。
ビットの深さを8に変える方法はというのはありますか?
kiki | 2009.06.03(水) 20:22 | URL | コメント編集

●>kikiさん

ビットの深さというのがよく分かりませんが、pngquantで減色してありますか?
http://hanemitsuru.blog105.fc2.com/blog-entry-256.html#pngquant
羽根 | 2009.06.04(木) 02:14 | URL | コメント編集

●こんばんは

こんばんは
説明がわかりやすくてすごいですね
あと、pngquantで減色しなくても、GIMPの[画像]メニュー→[モード]→[インデックス]をクリックして、出てきたダイアログで、「最適パレットを生成」の、最大色数を255色にすると8bitに変換できるみたいです
Shungo | 2009.12.13(日) 19:58 | URL | コメント編集

●>Shungoさん

これは良い情報をありがとうございます。
GIMPを使いこなせていないのがバレバレですw

この時作ったカスタムテーマは今でも愛用しています。
自分で手間を掛けて作ったものには愛着が湧きますね。
羽根 | 2009.12.13(日) 23:21 | URL | コメント編集

わかりやすくていい記事だと思います。参考になりました。
れろれろさん | 2010.02.01(月) 00:49 | URL | コメント編集

●>れろれろさんさん

お役に立てて幸いです。
自分で作ったカスタムテーマは愛着も格別ですよね。
羽根 | 2010.02.01(月) 01:54 | URL | コメント編集

非常に参考になりました、ありがとうございます!
ただ、記事の画像が表示されていないのですが、これはこちらの環境が悪いのでしょうか
ちゃみ | 2011.01.25(火) 18:16 | URL | コメント編集

●>ちゃみさん

お役に立ったなら何よりです。

画像はFC2の調子が悪かった頃に消失しちゃってます。
手許のバックアップからぼちぼちと復元作業中ですが、どれだけ時間がかかるかわかりませんね…。
はね | 2011.01.26(水) 03:04 | URL | コメント編集

コメントを投稿する

URL
COMMENT
PASS  編集・削除するのに必要
SECRET  管理者だけにコメントを表示  (非公開コメント投稿可能)
 

▲PageTop

Tracback

この記事のトラックバックURL

→http://hanemitsuru.blog105.fc2.com/tb.php/267-6afd2cf7
この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

▲PageTop

 | BLOGTOP |