夢幻AtaraxiA

まだまだトーシロですが、PSPの楽しさを伝えてこうと思います。 Key作品が大好き！現在完了の継続用法でPSPRスキン、DWI作成＆配布中！！あと遊戯王に心酔してます＾＾

PSPRスキン製作方法

PSP Revolution専用スキンの製作の、実際にはありませんが「製作法」を

Fate for...スキンを例にして解説していきます。

-準備物-
・PSP Revolution
・画像編集ソフト(座標表示のできるものが良)
・画像ファイル
・SE(効果音)、BGM

※この記事で紹介する以下の私自作の画像を使用・加工しないでください
個人で楽しむ場合の加工・使用はOKです＾＾

■Life_Bar.png
■Feet_Light_Dark.png
■Loading_Bar01.png
■Loading_Bar02.png
■Score_bar.png
■Grade_E、D、C、B、A、AA、AAA

Ⅰ- 構造確認

まず初心者の方には、ファイル構造＋フォルダ階層の確認で、理解を深めていただきます。

ここではPSP Revolution v4を例に解説

↓フォルダ階層↓

PSPRevolution v0.4/
　　| - EBOOT.PBP
　　| - PSPR .INI
　　| - Themes/
　　　　　　| - Default/
　　　　　　| - Instructions.txt
　　　　　　| - *
　　　　　　| - *
　　　　　　| - *
　　| - Songs/
　　　　　　| - *
　　　　　　| - *
　　　　　　| - *

と上記のようになっております。

今回用があるのは、赤字のDefaultフォルダです。

中身には

GRAPHICSとSOUNDSというフォルダと、metrics.INIというファイルがあります。

それぞれ解説

-GRAPHICSフォルダ-
中身にはスキンの命とも言うべき、画像が入っています。

ここにある画像と同じファイル名・拡張子・サイズにして、上書きすることで画像の

差し替えが行えます。たくさん画像があり、思わず「これ全部作るの？」と驚愕し、

リバースしそうになったことが思い出されます(汗

-SOUNDSフォルダ-
ここには、スキンのBGMと選択時のSE、セレクト時のSE、DWIクリア失敗時の

音楽が入ります。これらは色々と応用が利きます。セリフであったり・・・とか。

それぞれ、拡張子・ファイル名を同様にして変更してくださいな。

-metrics.INI-
あまり見かけない拡張子だと思います。コレ、実は開けます。

開いて見るとなにやら怪しげな文字列が多々あり・・・ｳｩ・・ってな感じでリバース寸前（汗

ここでは、各行の数値を自由に変更することで、メニューの文字や、画像などの表示位置

を指定することができます。位置は関数と同じくX座標とY座標で表されます。

(X,Y)で(0.0)は画像の一番左端を示しています。

★これは全ての画像に言えることなので、覚えておいてください

例

PSPの画面は縦：横＝480：272(pixel)です。

なので、画面右上端は(480,0)、画面左下端は(0,272)、画面右下端は(480,272)

となります。まぁ、これは数学を勉強すれば分かることです。

いよいよ本格的なスキン製作へと移ります。

Ⅱ- 画像製作

-メニュー画像-

まずは一番簡単なメニュー画像から製作していきます。

GRAPHICS/Menu/Main_Menu_Bkground_01.png

を画像編集ソフトで開きます。

まぁこれはかなり自由に製作できるはずです。

こんな具合に↓
　　　　

上の画像では、左下の白っぽい枠の部分には文字が入ります。

文字とは、Main_Menu_Text.pngのことです。

この画像は透過PNGです。透過させないと

四角の枠みたいのがプレイ時に写って、変になると思います。

-メニューテキスト-

GRAPHICS/Menu/Main_Menu_Text.png

を開きます。これの製作は結構面倒くさいです。

サイズ確認　縦：横＝180：80(pixel)

とりあえずは、横幅半分の90：80で製作して行きましょう♪

※実際には文字の周りの水色部分は透明です

ファイル→新規作成→90：80

選択→全て選択→Ctrl+C(コピー)→ファイル→新規作成(180：80)→Ctrl+V(貼り付け)

大体の画像編集ソフトならば、上記の方法で貼り付けできると思います。

また、透過させるためには背景画像を消去せねばなりません。

レイヤー→背景からレイヤーへ→選択範囲→全て選択→Delete

上のは例ですが、これで背景は消去できます。

pict bearSE(フリー)の場合の選択方法例

分からない方は、ソフト説明をされているサイトで学んできてください（汗

同様にもう一つ製作します。全く同じ文字位置でないと、重なるときにズレてしまい、

変になります。

するとこんな感じ↓

保存するときには、レイヤーの結合ではなく、表示レイヤーの結合、もしくは

いらないレイヤーを残らず削除して、レイヤーを1枚にしてPNG形式で保存してください。

★これは全ての画像に言えることなので、覚えておいてください

★完成品★
　　　　
　↑キルヒベルク製作例

-ソングセレクト画像-

まずは構成を確認♪

　　　　

　↑キルヒベルク製作例
※必ずしもこうなるとはかぎりません。自由に変更ができますので

①バナー画像表示位置
→移動不可。よって位置固定

②ソングセレクト位置
→移動可。metrics.iniの編集で、表示する曲数も変更可

※moreの表示位置をとっておく

③難易度表示位置
→移動可。難易度画像の製作は下部にて。metrics.iniで最高難易度も変更可

④Stage・BPM表示位置
→Stage(現在何曲目か)、BPM(テンポ)の表示位置。移動不可

大まかには上記4つを考えて製作します。

とりあえず・・・

　　　　

バナーの位置は固定なので、先にバナーの位置を確保しておきます。

Defaultのでも上の画像でもいいので、バナー位置を作っといてください。

そうすると作りやすいです。

同様にBPM・Stage位置も作っておきます。

残りは全て移動ができるので、安心して作れます！

後はお好きなように♪

★完成品★
　　　　

ちなみにDWIはataraxiaです

-ソングオプション背景-

GRAPHICS/Song_Options_Background.png

を開きます。コノ画像も透過処理して作成してください。

サイズ確認　横：縦＝280：194

デフォルトの画像の、枠内をコピーなどしてスペースを作っておくとやりやすいです。

★完成品★

-難易度画像-

GRAPHICS/Feet_Light_Dark.png を開きます。

Feet_Light_Dark.png のサイズは横：縦=60：17(pixel)です。サイズは固定なので、

このサイズからはみ出してしまうと正常に表示されません。

必ず60：17に収めてください！！

この画像も透過PNGです。したがって、Main_Menu_Text.png と同じ感じで製作します。

★このときに、横：縦=10：17(pixel)の画像で6つある色の画像を1個づつ製作すると割と楽に製作できます。

つまり、1個だけ形を作ってしまえば、後は色を変えてコピー＆ペーストだけで済む

わけです。

↑キルヒベルク製作例

-スコア画像-

GRAPHICS/Score_Screen_Empty.png を開きます。

　　　　

　↑キルヒベルク製作例

まず、スコア画像の構成を確認♪

①バナー画像表示位置
→位置固定。移動不可

②グレード表示位置
→位置固定。移動不可

★その他★
全て移動できます

・総合スコア
・最大コンボ数表示
・marvelousなどの判定
・モード(x2速、dizzyなど)表示
・難易度(HARD、CHALLENGEなど)表示

上記の通りです。言ってしまえば、ソングセレクト画像となんら製作方法に差異はござい

ません。ちょっとムズくなっただけ。

　　　　

したがって↑画像の、バナー画像位置、グレード表示位置を、ソングセレクト画像

同様に、あらかじめ場所取りしておくと製作しやすいです＾＾)

なので、後はキルヒベルク製作例のようにMarvelousやdifficulty、modsなどの位置を

お好きにデザインしていったください。

※必ず数字が表示される欄を作ること！総合スコアなら数字10桁、goodなどの判定なら4桁

-グレード画像-

GRAPHICS/Grades/

8つファイルがあると思います。どれでもいいから開きます。

見れば分かると思いますが、判定です。AとかAAとかの。

サイズ確認　横：縦＝210：95(pixel)

とりあえず、8個全て作ります。また、文字位置は真ん中にしてください。

この画像も透過PNGですので、メニューテキストなどと同様の方法で製作します。

↑キルヒベルク製作例

そしてこれが・・・・

★完成品★
　　　　

ちなみにDWIはhollowです。

-クリア画像-

GRAPHICS/Song_Pass.png を開く・・・必要はいたってありません（笑

この画像は、特に注意点はありません。480：272で製作してもいいですし、

透過PNGで480：272より小さい画像を製作してもOkです。つまり自由。

強いて言うならば・・・「Clear」や「PASSED!!」などのセリフ等々を入れることですかね？

★完成品★
　　　　

　↑キルヒベルク製作例

-ファール(失敗)画像-

GRAPHICS/Fail_Screen.png

を開きます。この画像もクリア画像と同じく自由に製作できますので、同じ要領で

作ってください。Failed！などの文字とかを入れてみるのも良。

　　　　

↑キルヒベルク製作例

-デフォルト背景画像-

GRAPHICS/Backgroud_Image_01.png

を開・・・・く必要もなし。自由に製作してください。480：272で。

★完成品★
　　　　

↑キルヒベルク製作例

-ローディングバー-

GRAPHICS/Loading_Bar01.png

GRAPHICS/Loading_Bar02.png

今回は上記2つを開きます。コノ画像は意外と難しいです。

サイズ確認　01 横：縦＝306：31
サイズ確認　02 横：縦＝300：31

サイズを見るとおり、01の方が6pixel程長くなっております。

これは、02には左右の枠がなく、01には枠があるので、左右3pixelずつ02に

枠のラインが追加されたのが01だということです。

横が長いこと意外は差異ございません。

では長いほう・・・つまり01から作成していきます。

デフォルトでも、自分で作るのでもいいので、枠をつくります。

好きに色づけしたりして、枠内に収まる程度、画像やら文字やらをいれます。

そして次に02の作成。01の枠をコピペすると楽。

コピペすると、すこし横が余るので、削除して新しいラインを引くか部分的に切って

ペーストして修正してください＾＾

ここでは枠内を半透明にぬったりして、ロードが分かるようにします。

大体はこれだけです。2つとも、透過PNGで保存してください。

★01完成品★

↑キルヒベルク製作例↓
★02完成品★

※この画像では枠の色を上下逆転させて、枠の色の変化でロードが分かるようにしています。

-ライフバー-

GRAPHICS/Life_Bar.png
GRAPHICS/Life_Bar_Fills.png

の2つを開きます。

サイズ確認　横：縦＝480：18(ライフバー)
　　　　　　　　　　　　　360：36(ライフバーフィル)

ライフバーは文字どうり、ライフを表示します。

ライフバーフィルは、ライフの色です。

製作するときは、ライフバーフィルを背景に設定して、その長さの分だけライフバーを

透過させていきましょう。つまり、ライフバーは透過PNGです。

難しいので、無理に自作する必要はないかと（＾＾；

★完成品★
　　　　

-スコアバー-

GRAPHICS/Score_bar.png

を開きます。

サイズ確認　横：縦＝480：18

ハッキリ言うと、ライフバーと同様の方法で製作できます。枠内に収まるように画像

を作ります。左下部分にはスコアが表示され、右下にはHARDなどの難易度表示が

されるので、見やすくなるように作成しましょう＾＾

★完成品★
　　　　

-オプション画像-

GRAPHICS/options_Screen/Options_Background.png

を開く・・・・必要は特にないです。480：272の画像なので。

ただ、右側にはオプションスクリーンが、左上にはOptions_title.png

が表示されるので、それだけ気をつけることですかね（汗

-オプションスクリーンテキスト画像-

GRAPHICS/options_Screen/

Text_***.pngという形で入っています。

サイズ確認　横：縦

Text_themes.png　220：30

Text_system.png　292：30

Text_how.png　340：30

Text_exit.png　110：30

また
Options_title.png　220：45

上記4つがオプションテキスト。最後1つはスキンの名称とうとうなんでも（笑

この画像の製作方法は、メニューテキスト（Main_Menu_Text.png）と方法が

ほぼ同じです。なので、また各画像の横幅半分で製作してください。

同様の方法で貼り付けたら、文字が左右で同じ座標位置にあうかどうかを見ます。

OKならば、透過PNGで保存。

↑キルヒベルク製作例

★完成品★
　　　　

-その他等々-

■Please_Hold_To_Exit.png
→デフォルトを開き、サイズ・位置などを合わせて透過PNG保存で作成

■Song_Pass_Swipe.png
→サイズは90：80。固定サイズの模様。どうやら画像が9分割？されるようです。
　正直言って、よく分かりません。まぁ最初はテキトーで（汗

残りの画像は正直よく分からないです。これから精進して理解を深めていきます

ここまでで、既にスキンの命ともいいえる画像が全て完成したはずです

Ⅲ - Metrics.INIの設定

とりあえず、1つ1つ解説をば。

Fate...スキンのMetrics.INIよりコピペ

//This is the metrics file for a theme's configuration
//Colors in 0xAARRGGBB format

[Main Menu]　メインメニュー
Main_Menu_Text_Start_X_Y=70,180　メニューテキスト表示位置
Main_Menu_Text_Swipe_Frames_Per_Row=5　不明
Main_Menu_Text_Swipe_Number_Of_Frames=10　不明

[Song Select]　ソングセレクト
Feet_Start_X_Y=56,172　難易度画像(Feet_Light_Dark.png)表示位置
Max_Feet_To_Show=15　Feet_Light_Dark.pngの表示する最大数の設定
Banner_Cover_X_Y=20,20　バナーカバー表示位置
Song_And_Pack_List_Start_X_Y=30,206　曲名＋グループフォルダ名表示位置
Song_And_Pack_List_End_X=260　曲名表示枠の終わり位置
Song_And_Pack_Number_Of_Lines=6　枠内に表示する曲の最大数
More_Text_Top_X_Y=30,194　スクロールウしたときにでるmore...の上部表示位置
More_Text_Bottom_X_Y=30,262　スクロールウしたときにでるmore...の下部表示位置

[Main Game]　メインゲーム
Hold_To_Exit_Numbers_In_Image_X_Start=330　Please_Hold_To_Exit.png の表示位置？
//Size Ratio means the animaiton will enlarge the Hit_text to 1.xx times the original size over animation
Marvelous_Animation_Size_Ratio=1.12　マーベラス画像のアニメーション拡大率
Perfect_Animation_Size_Ratio=1.12　上記と同様
Great_Animation_Size_Ratio=1.06　上記と同様

[Score Screen]　スコアスクリーン
Song_Title_Center_X=338　不明
Song_Title_Y=38　不明
Song_Title_Max_Display_Width=284　不明
Song_Difficulty_X_Y=388,110　HARDなどの表示位置
Center_Song_Difficulty_On_Its_X=No　不明
Mods_List_X_Y=295,248　dizzyなどのMods表示位置
Center_Mods_List_On_Its_X=No　不明
Combo_Display_X_Y=352,229　最大コンボ表示位置
Score_Display_X_Y=68,250　総合スコア表示位置
Marvelous_Count_X_Y=110,166　マーベラス取得数の表示位置
Perfect_Count_X_Y=76,188　パーフェクトで上記と同様
Great_Count_X_Y=64,209　グレイトで上記と同様
Good_Count_X_Y=64,230　グッドで上記と同様
Boo_Count_X_Y=286,166　Booで上記と同様
Misses_Count_X_Y=286,188　ミスで上記と同様
OK_Count_X_Y=286,208　OKで上記と同様

これで大体スキンの製作方法の解説は終了です。

ふぅ、長かった！！自分にグッジョブ∑ｄ（￣∀￣ｄ）

また、機会があれば更新する予定。なにはともあれ、完成オメデトウ！

では、楽しいPSPRライフを～♪

[ 2008/12/25 00:00 ] PSPRスキン製作方法 | TB(0) | CM(9)

≪PSPRスキン配布Ⅲ-Fate for...スキン- | HOME | 隠しキャラ全部出現≫

参考になりました。

ありがとうございました！

[ 2009/05/24 03:41 ] [ 編集 ]

サノ

あのスキン作成のときに使っている画像は自分で作成しているんですか？？
それともどこかのサイトからダウンロードしているのか教えてください…

あと自分で作っていたら作り方などを教えていただければうれしいです♪

[ 2009/08/17 16:27 ] [ 編集 ]

Re: サノ

本当に自作したものが一部、拾い物を編集したものがほとんどです。

どの画像の作り方を質問しているかは分かりませんが、記事中に全て書いたつもりでいます。

なので読み直してみてくださいな。

[ 2009/08/18 01:05 ] [ 編集 ]

サノ

ありがとうございました♪

[ 2009/08/18 10:58 ] [ 編集 ]

サノ

何度もすみません…

素材の画像（メニューテキストなど）の素材？（画像）
はどのように作っているんですか？
あとできれば画像などが置いてあるサイト教えてください！

[ 2009/08/18 11:02 ] [ 編集 ]

Re: サノ

メニューテキストですか＾＾
あれは自作しましたね。記事の最初に色字で記述してあるのは全部自作したものです。

素材は申し訳ありませんがググってください。
私は画像編集ソフトで1から作ったので素材配布をしているサイト様を知りませんので（汗

自作されるのでしたら何か助言をできると思うのですが・・・。

[ 2009/08/18 12:00 ] [ 編集 ]

skn

初めましてです。管理人さん

いきなりで申し訳ないのですが、透過PNGの減色作業は必要ですか？
教えてください。

[ 2009/09/15 20:18 ] [ 編集 ]

必要ありません。

やっていることは透過というよりも、背景なしに画像や文字を作成して貼り付け、pngで保存するだけですので。

[ 2009/09/16 18:32 ] [ 編集 ]

わかりました^^

ありがとうございます！

[ 2009/09/17 20:29 ] [ 編集 ]

コメントの投稿

トラックバック

この記事のトラックバックURL
http://corbenik8.blog106.fc2.com/tb.php/626-9297f613

≪PSPRスキン配布Ⅲ-Fate for...スキン- | HOME | 隠しキャラ全部出現≫

管理人ステータス

キルヒベルク

Author:キルヒベルク
-究極的に好きなアーティスト-

・アジカン
・BUMP

-PSP2台所持-

メタリックブルー
痛PSP-1000・・・5.00M33-3(月姫フォント+起動画面=射殺す百頭)　　　　

ラベンダーパープル
PSP-2000・・・3.90M33(スパロボA一色)

-備考-

→DWI製作歴は2008.3月～現在　　　
→スキン製作歴は2008.9月～現在

★型月が大好き＾＾)
★KEYもモチロン！
☆P3,4やtalesもこよなく好き
☆遊戯王へのハマり度は異常

　　　　★遊戯王所持デッキ★

■キャラスリ
テーマ：デッキ名

■セイバー
光：暗黒魔轟神

■藤林杏
光：ワーム星雲

■朱鷺戸沙耶
地：X<ｸﾛｽ>-ナチュル

■能美クドリャフカ
風：ドラグニティ

■イリヤスフィール・フォン・アインツベルン
火：☆スカルフレイム☆

■間桐桜（予定）
AKB：とある魔術のAKB☆

■アル・アジフ
ガチ：ジェネクス帝Zero

デッキ大分崩しました＾＾；

○無限収集中カード

・レプティレス・ナージャ（現在18枚）

　　　　　　　★神ゲー★

・Fate
・リトバス
・CLANNAD
・Air
・マヴラブオルタネイティブ
・サモンナイト3
・P4
・P3
・うたわれるもの
・.hack//G.U
・TOA
・車輪の国
・G線上の魔王
・FFⅧ
・FFⅩ
・聖剣伝説2
・聖剣伝説3
・聖剣伝説Legend of MANA

　　　　★-相互リンク募集中-★

相互リンク申請用記事

上記にコメントください＾＾