注意(重要)
PCモニタは正方画素なのに対して、TVの画素は1割ほど縦が長い長方画素です。
従って、PCでそのままメニュー(720×480)をつくった場合、TVではやや縦長のメニューに写ります。
PCでDVDを観る場合も、再生ソフトがアスペクト比をTV用に修正するため、同様にやや縦長のメニューとなります。
つまり、メニューを作るときには縦長になることを想定してやや横長に作っておく必要があります。
その1 Photoshopを使ってメニューの壁紙画面を作成
映像規格(NTSCまたはPAL)および画面のアスペクト比(4:3または19:9)に一致するPhotoshopのプリセットを選択して、新しい画像を作成します。 「モード」で「RGB」を選択します。
映像規格 | アスペクト比 | 幅 | 高さ | 解像度 | カラーモード |
---|---|---|---|---|---|
NTSC | 4:3 | 720pxel | 534pixel | 72pixel/inch | RGB |
16:9 | 854pxel | 480pixel | |||
PAL | 4:3 | 768pxel | 576pixel | ||
16:9 | 1024pxel | 576pixel |
必須事項
- 背景にテキストを追加する場合は、TV画面に表示したときのちらつきを抑えるために、3pixel以上の大きさにしてください。
- NTSC方式のDVDを作成している場合は、「NTSCカラー」を使用します。(注: NTSCカラーの基準外の色を使うと、TVでは違う色で表示されてしまうことがあります。)
- ボタンは70x60pixel以上を推奨します。
- ボタンにテキストを追加する場合は、フォントサイズを 20point以上を推奨します。
- 確実に表示させたい部分はセーフエリア内に配置してください。(下図参照/注:PCモニター上ではフルサイズで表示されますが、TVでの表示は画面の上下左右が約10%切り取られて表示されます。背景画像は画面全体に配置します。)
- ボタンの選択範囲は重ねることが出来ません。また5pixel以上間隔をあけてください。
- フォントを含むレイヤーは、全てラスタライズしてください。
- 全てのレイヤーを統合してください。
セーフエリア作成例(NTSC)
可能な限り、ビットマップではなくベクトルシェイプとマスクを使用します。これらの要素はスケールしても品質が低下しません。 ボタンやロゴなどのピクセルコンテンツを作成する場合は、ディスクで必要となる最大サイズで作成します。 要素のサイズを変更する必要がある場合、ピクセルオブジェクトを拡大するのではなく、縮小することをお勧めします (画像を拡大すると品質が劣化することがありますが、縮小した場合は劣化しません)。
その2 壁紙画面をリサイズする
下表を参考に、[イメージ→画像解像度]でリサイズして下さい。(注意/重要:必ず全てを完成させてからリサイズしてください)
映像規格 | アスペクト比 | 幅 | 高さ | 解像度 | カラーモード |
---|---|---|---|---|---|
NTSC | 4:3 | 720pxel | 480pixel | 72pixel/imch | RGB |
16:9 | |||||
PAL> | 4:3 | 720pxel | 576pixel | ||
16:9 |
最大ボタン(リンク)数 4:3 = 36個/1画面
最大ボタン(リンク)数 16:9 = 18個/1画面
その3 ボタンを作成する
ボタンの作成(動作)には様々な方法があります。よく使う方法を下記に紹介します。
レイヤーをボタンとして表示させる作成する方法
1.無選択・選択・決定とも共通のボタンを使用し、色だけを変える場合
無選択 | 選択 | 決定 |
---|---|---|
「ボタン1」「ボタン2」「ボタン3」とボタン1つに対し1つのレイアを作成してください。
色や不透明度はオーサリング時に設定しますので、(RGB/%)でご指示ください。
*ボタンの数だけレイアが必要です。(選択・決定の色をRGBで、不透明度を%でご指定ください)
無選択 | 選択 | 決定 |
---|---|---|
2.無選択・選択・決定時に、それぞれ違うデザインのボタンを表示させる場合
レーヤーを差替える構造のため、ボタンのデザインが自由です。(注意:メニューにBGMを設定できません。)
「ボタン1 無選択」「ボタン1 選択」「ボタン1 決定」 とボタン1つに対しそれぞれ3つのレイアを作成してください。
*ボタンの数×3個づつレイアが必要です。(下段の例だと、合計9個)
ボタンハイライトマスク(オーバーレイヤー)を作成する方法
作成したマスク(レイヤー)がハイライトボタンの形として表示します。
- マスク用の新規レーヤーを作成する。(背景は白=R:255 G:255 B:255とする。)
- ボタンとして表示させたい形を壁紙画面にあわせて黒(R:0 G:0 B:0)で作成・配置する。
- 色や不透明度はオーサリング時に設定しますので、別途ご指示ください。
- 全てのレイヤーを統合し、リサイズてください。
マスク作成例 | 選択の表示 | 決定の表示 | 選択時カラー | 決定時カラー | 不透明度 |
---|---|---|---|---|---|
R:255 G:000 B:000 |
R:000 G:000 B:255 |
30% | |||
R:255 G:000 B:000 |
R:000 G:000 B:255 |
100% |
注意
マスクにはアンチエイリアス・ドロップシャドウ・光彩・グラデーション等の「効果」は使用できません。マスク作成では下記4色しか使用できません。(同時に3色までしか表示できません。)
白 | (R:255 G:255 B:255) | 背景 |
黒 | (R:000 G:000 B:000) | ボタン(通常は黒のみ) |
赤 | (R:255 G:000 B:000) | 同時に2色を表示させる場合 |
青 | (R:000 G:000 B:255) | 同時に3色を表示させる場合 |