Blu-ray Flash HDMV Viewer »

Blu-ray Tutorial 1: Understanding Designer PSD Structure

Hi there,

I’m going to be starting a set of tutorials that explain how to design menus for Blu-ray HDMV using Sonic Scenarist Designer PS. Unfortunately, Sonic’s help isn’t the best and there aren’t a lot of places online that help explain what you are doing. So I thought I’d give this a shot with my new blog.

So here we go.

Differences Between DVD and Blu-ray HDMV

  • Overlays are 256 colors instead of 4
  • You can have several menu pages onto one background video. You’ll have to be careful designing so that your background video has appropriate space for your text and design
  • Obviously, menus are either 1920×1080 or 1280×720 instead of 720×480. That’s right, no more non-square pixels!
  • You can have different buttons that are hidden until the author chooses to unhide them. This is useful for check boxes for audio setup and commentary type of situations
  • The biggest difference is that now your overlays are your main design. Before your design was in the background video/image. Of course you can still do it that way, but I think most designers will be moving away from this.
  • You can animate your buttons. I’ve noticed when they are set to animate as fast as possible they are probably animating at 18fps or so. It might be the actual speed of your disk (ie. 23.976) but it seemed a little slower than that.
Limitations with Blu-ray HDMV
  • A single menu set can only have a certain amount of used pixels. I haven’t confirmed this yet, but I think it’s 2 1920×1080 screens worth. If you go over Scenarist will give you an error while importing. 
  • The 256 color palette includes transparent pixels, so be careful
  • Buttons still must be square
Photoshop Layer Tree
The most complicated part about designing new menus is the layer tree in photoshop. To be honest, it’s a little overboard. However there are tricks to making it easier, which I’ll go over in future tutorials. For now, the layer tree looks like this:

Layer Tree

IG = Interactive Graphic (there are also Presentation Graphics for subtitles and things)
DS = Design Set
P = Page
BOG = Button Overlay Group
B = Button
Nx = Normal (this is what the button looks like when nothing is happening to it)
Sx = Selected (this is what the button looks like when it’s selected, or has a mouse over)
Ax = Active (this is what the button looks like after the user chooses that option, like a mouse down event)
BG = Background

To animate a button, you simply have more layers and name them appropriately. For example, N1: Button_4_Normal, N2: Button_4_Normal, N3: Button_4_Normal, N4: Button_4_Normal would be a 4 frame animation. You can animate Normal, Selected, and Active states. You could of course animate these in Photoshop, but you’d probably go crazy doing that. In future tutorials I’ll show how to animate buttons using After Effects.

My next tutorial will be a screencast showing how to make a simple menu using Photoshop and all the Designer features.

This entry was posted on Saturday, April 5th, 2008 at 11:32 am and is filed under Blu-ray, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Blu-ray Tutorial 1: Understanding Designer PSD Structure”

  1. Ryan Says:
    June 30th, 2008 at 2:50 pm

    Hey Rey,

    I’m trying to export my menu into Designer, and it is giving me this error : “Non-Display set group/layer in IG. [Path: /IG:Popup}

    The layer that is causing this error is my background Image, which is named ” BG: background ”
    If i delete this layer, it exports into Designer fine. obviously, i do want the BG image under the buttons, so i was wondering if you might be able to help me figure out what I’m doing wrong.

    Thanks!!!

  2. admin Says:
    June 30th, 2008 at 3:20 pm

    Hi Ryan,
    I’m guessing the background image is either in the IG folder, or in the “root” (I guess this is what you would call it). The BG needs to be in either the DS folder or the P folder. I think that will take care of it. Also, make sure there aren’t any spaces in the layer name before BG (it looks like there is in what you typed, but I’m guessing it’s not that way in your PSD.

    If you are still having problems email me over your PSD and I’ll take a look at it.

    -Rey

  3. Grairesaurbut Says:
    December 19th, 2008 at 3:11 pm

    Hi people

    As newly registered user i only wanted to say hello to everyone else who uses this board :-D

  4. Marly Says:
    January 22nd, 2009 at 12:01 pm

    links
    ¥

  5. san Says:
    September 21st, 2009 at 4:27 am

    Hey Rey,

    I set the “BG: Main bg” in DS: Folder, it exports into Designer fine. but the Background are slice in to nine folder.. i don’t know why, i need the background image in full size..

  6. articlegold.ru Says:
    October 30th, 2009 at 2:35 pm

    Стремительное формирование Internet покера притягивает к нему все новых любителей. Которые стремятся познать суть покера и сделаться благополучными игроками. Для успешной деятельности, бесспорно, стоит освоить надобные навыки. Принципы обучения правильнее всего доверить профессионалам, идеально для данного годится школа покера “Pokerstrategy”, имеющая отработанную методику, дающая великолепные знания, начисляющая великолепные бонусы и воспитавшая многих успешных игроков современного покера. Подробнее смотрите на школа покера Pokerstrategy.com.

  7. DueseeEnsueve Says:
    October 30th, 2009 at 2:39 pm

    Looking for Synthroid ?

    You’ve found the best place where you can buy Synthroid online!
    http://drugsovernight.org/thumbs/pharma3.jpg

    **Click to order Synthroid online**

    http://iwebpharma.com/ifeed/img/74/fimg/Synthroid/1.jpg
    http://iwebpharma.com/ifeed/img/74/fimg/Synthroid/2.jpg
    http://iwebpharma.com/ifeed/img/74/fimg/Synthroid/3.jpg
    http://iwebpharma.com/ifeed/img/74/fimg/Synthroid/4.jpg
    http://iwebpharma.com/ifeed/img/74/fimg/Synthroid/5.jpg
    http://iwebpharma.com/ifeed/img/74/fimg/Synthroid/6.jpg

    Order synthroid online Order Synthroid Online!Order synthroid online?Order Synthroid Online Order Synthroid Online.Order synthroid online.buy biaxin online
    Order Synthroid Online, Order Synthroid Online order synthroid online!Order Synthroid Online.Order Synthroid Online!buy ultram er without prescription
    Order Synthroid Online – Order Synthroid Online, Order Synthroid Online.Order synthroid online order synthroid online – Order Synthroid Online order synthroid online order synthroid online, Order Synthroid Online.buy ambien cod online
    Order synthroid online Order Synthroid Online.buy tramadol cheap medication inurl
    Order synthroid online, order synthroid online order synthroid online?Order synthroid online, Order Synthroid Online Order Synthroid Online order synthroid online order synthroid online Order Synthroid Online order synthroid online – Order Synthroid Online.Order synthroid online – order synthroid online order synthroid online order synthroid online!nexium iv
    Order synthroid online, Order Synthroid Online, order synthroid online, Order Synthroid Online: Order Synthroid Online, order synthroid online, order synthroid online, Order Synthroid Online!Order Synthroid Online.Order synthroid online – Order Synthroid Online?buy depo provera shots online
    Order Synthroid Online: Order Synthroid Online.Order Synthroid Online, Order Synthroid Online order synthroid online – order synthroid online order synthroid online.Order Synthroid Online?Order synthroid online – order synthroid online Order Synthroid Online – order synthroid online.length of plavix post stent

    Related links:
    Order Soma Online. Free Prescription. Overnight Delivery
    Order Ephedra Online. Free Prescription. Overnight Shipping
    Buy Atrovent Online. Without Prescription. Ems Delivery
    Order Ultram Online. Without Prescription. Ems Delivery
    Buy Diazepam Online. Without Prescription. Ems Shipping

Leave a Reply