Another advice: If you want to make sure, that the two pixel border of the levelmeter fill image won't cover the (visible) borders of the levelmeter, use the caps to create a frame around the level meter. Make them half size of the levelmeter, place the left one at the left border and the right one at the center (but not centered of course).
The outer caps will cover the levelmeter text (and unfortunately everything else that might cover the levelmeter except for the inner caps) so you will have to draw some "empty spaces" into the alpha channel. At this point you'll still need a top- and a bottom-border in the letterbox-image which will become visible instead of the the cap-images (but they won't cover anything of course). It's quite painful (my letterbox has three "layers" just for the levelmeter and just because the levelmeter has a stupid "two pixel border) but it works.
You won't have to create an complete levelmeter-frame in the letterbox image since the levelmeter fill image will cover the anything. You just need a top- and bottom-border as mentioned and only when you want to create a two pixel frame around the level meter like I did.
The code for my letterbox. Might become handy too (couldn't test the tutorial highlights yet):
Code:
<PanelFile ID="ID_UISkin_Toolbar">
<Element ID="ToolbarField" X="328" Y="850" Width="1024" Height="200">
<!-- Start Menu Button -->
<Element ID="ToolBarButton_MainMenu" X="230" Y="170" Width="25" Height="25"> </Element>
<!-- We make most of the buttons disappear -->
<Element ID="ToolbarButton_Slot_1" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_Slot_2" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_Slot_3" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_Slot_4" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_Slot_5" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_Slot_6" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_Slot_7" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_1" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_2" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_3" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_4" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_5" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_6" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_RightSlot_7" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="Toolbar_WebstoreButton" X="0" Y="200" Width="1" Height="1"> </Element>
<Element ID="ToolbarButton_CustomizeSlots" X="0" Y="0" Width="1" Height="1"> </Element>
<!-- Levelmeter Frame -->
<Element ID="ToolbarFieldMain_LevelMeter_Left_Cap" X="210" Y="187" Width="302" Height="13"> </Element>
<Element ID="ToolbarFieldMain_LevelMeter_Mid_Left_Cap" X="395" Y="187" Width="16" Height="13"> </Element>
<Element ID="ToolbarFieldMain_LevelMeter_Mid_Right_Cap" X="613" Y="187" Width="16" Height="13"> </Element>
<Element ID="ToolbarFieldMain_LevelMeter_Right_Cap" X="512" Y="187" Width="302" Height="13"> </Element>
<!-- Levelmeter -->
<Element ID="LevelMeter" X="215" Y="181" Width="594" Height="30">
<Element ID="LevelMeterFill" X="0" Y="7" Width="594" Height="11">
<Element ID="LevelMeter_BonusMeter" X="0" Y="0" Width="594" Height="11"> </Element>
<Element ID="meter_fill" X="0" Y="0" Width="594" Height="11">
<Element ID="meter_fill_image" X="0" Y="0" Width="594" Height="11"> </Element>
</Element>
</Element>
<Element ID="LevelMeterText" X="0" Y="5" Width="594" Height="15"> </Element>
<Element ID="ToolbarFieldMain_LevelMeter_Glass_Overlay" X="0" Y="7" Width="594" Height="11"> </Element>
<Element ID="ToolbarButton_Experience_TutorialHighlight" X="216" Y="3" Width="588" Height="17">
<Element ID="TutorialHighlighter_LeftBorder" X="0" Y="0" Width="3" Height="17"> </Element>
<Element ID="TutorialHighlighter_BottomBorder" X="3" Y="14" Width="582" Height="3"> </Element>
<Element ID="TutorialHighlighter_RightBorder" X="285" Y="0" Width="3" Height="17"> </Element>
<Element ID="TutorialHighlighter_TopBorder" X="3" Y="0" Width="582" Height="3"> </Element>
<Element ID="TutorialArrowPointer" X="60" Y="0" Width="1" Height="1"> </Element>
</Element>
<Element ID="ToolbarButton_LevelUpXP_TutorialHighlight" X="216" Y="3" Width="588" Height="17">
<Element ID="TutorialHighlighter_LeftBorder" X="0" Y="0" Width="3" Height="17"> </Element>
<Element ID="TutorialHighlighter_BottomBorder" X="3" Y="14" Width="582" Height="3"> </Element>
<Element ID="TutorialHighlighter_RightBorder" X="585" Y="0" Width="3" Height="17"> </Element>
<Element ID="TutorialHighlighter_TopBorder" X="3" Y="0" Width="582" Height="3"> </Element>
</Element>
<Element ID="ToolbarButton_RestXP_TutorialHighlight" X="2" Y="3" Width="588" Height="17">
<Element ID="TutorialHighlighter_LeftBorder" X="0" Y="0" Width="3" Height="17"> </Element>
<Element ID="TutorialHighlighter_BottomBorder" X="3" Y="14" Width="582" Height="3"> </Element>
<Element ID="TutorialHighlighter_RightBorder" X="585" Y="0" Width="3" Height="17"> </Element>
<Element ID="TutorialHighlighter_TopBorder" X="3" Y="0" Width="582" Height="3"> </Element>
<Element ID="TutorialArrowPointer" X="60" Y="0" Width="1" Height="1"> </Element>
</Element>
</Element>
</Element>
</PanelFile>
P.S.: Another solution: Draw the entire the levelmeter frame (maybe even with the glass overlay) in one image, use this image as mid left cap (not as left cap because the left cap would cover the levelmeter text) and the remove the other caps from the code (and the glass of overlay if necessary).