Streamed Nmt Bootleg Beta V0.9.0220 Diy 1.0 Readme

Release thread: http://www.networkedmediatank.com/showthread.php?tid=12449 ================================================================================ ================================== TESTED ON =================================== ================================================================================ 1. Microsoft Windows XP Professional SP 3 2. Photoshop CS4 Version 11.0. You can try to use a previous version or another program altogether, although I can't support it if something doesn't work. Below, there's a detailed rundown of what the script does, so you can do it manually if you need to. 3. myiHome 5.1.3 for Windows 4. Popcorn Hour A-110 with firmware 01-17-090125-15-POP-403-000 5. Streamed NMT Bootleg Beta v0.9.0220. Although I've only used it for the myiHome skin, the index version uses the same images, so you should get similar results. Also assume that even though this is for version 0.9.0220 of the skin, it may work for future releases. ================================================================================ ================================= INTRODUCTION ================================= ================================================================================ This pack contains everything you need to make custom menus and backgrounds for the applications. The myiHome documentation refers to the VIDEO, MUSIC, and PICTURES sections as "applications", so that's how I'll be referring to them. I wish I had enough programming skills to have a full program that'll create/ automate all of these for you, so you wouldn't need Photoshop or any of these files. This is the best I can do at this moment in time. Anyway, if you don't end up using these, this readme is still chock full of good information and might help with creating your own skin. ================================================================================ ==================================== NOTES ===================================== ================================================================================ Please note that you'll need basic understanding of how to use Photoshop. I've tried to make the directions as clear and concise as possible, which is why it's so long. Please read this document in full detail. We're working with HD images, but we're not working with massive files. You probably won't have to worry about hard drive space or RAM, but if it gives you insufficient scratch disk errors, you might want to free up some hard drive space/memory. Throughout this document, I'll be using file extensions. So you might want to have your file extensions showing in case you're having a difficult time keeping up. I go into great details with both PSD files and their corresponding action scripts. I've sort of split the document into 2, one for each PSD. At the end of each section, there's a set of directions to apply the new images (if you're not sure how to). If you're doing work in both PSDs, you might be able to save some time by finalizing all your images and following one set of directions to apply the new images. Read both because their 1st steps are slightly different. So again, read everything now so you have less questions later. ================================================================================ =================================== INCLUDED =================================== ================================================================================ 1. Nine (9) Default background images, in case you want to just change the text and keep the same backgrounds.

2. 3. 4. 5.

Two Two One One

(2) (2) (1) (1)

font files: AltDefaultCaps.ttf, TitleCaps.ttf Photoshop PSD files: Applications.psd, Menu.psd Photoshop ATN file: v0.9.0220.atn readme.txt file.

================================================================================ ================================= INSTALLATION ================================= ================================================================================ 1. Install the two (2) fonts in the fonts folder. For most of you, this means to drag and drop both of the font files to "C:\Windows\Fonts". 2. Double-click the "v0.9.0220.atn" file. This will automatically open Photoshop and load the actions. You may need to have Photoshop running before double-clicking it. You normally won't see the newly loaded actions until you activate the ACTIONS menu by pressing ALT+F9. ================================================================================ =============================== Menu.psd DETAILS =============================== ================================================================================ Open Menu.psd. You want to keep all the layers exactly where they are so it'll come out properly. The first six layers (1-system,2-exit,watch your,3-videos,4-music,5-pictures): These are text layers. This is what changes the menu text on the left side. When you change these, you have to note which categories go where. So in this example, when you hit DOWN on the remote, you would be on "MUSIC". So when "MUSIC" is in the middle, everything would move up. So the list would be "EXIT", "VIDEOS", "MUSIC", "PICTURES", and whatever the next category is. The "menu bg" layer: This is the black bar on the left that the text sits on. There's no need to change this. The "right overlay" layer: This is a faded bar that sits on the right side of the screen. There's normally no need to change this layer either. Because every television is different and have different overscans, this right overlay can be moved left so you can actually see it on your television. It's a very minor detail anyway, so move it at your discretion. The "black bar" layer: This is the horizontal black bar that sits on the bottom of the screen. This bar serves as a spacer that's essential to making the skin work. There's no need to change this layer. The "background" layer: This layer is self-explanatory. You can leave this layer alone, but if you're using another background, make sure it shows up RIGHT BELOW the "black bar" layer. The only thing you have to worry about is the action script cropping. This cropping is necessary because of how the NMT displays images. It'll crop 32 pixels from the top, and the lower "black bar" layer will cover 22 pixels on the bottom. So you can normally just paste a 1280x720 image as the background, but you have to keep in mind the cropping. So if you want to see the ENTIRE background image without anything getting cropped, make sure to resize it to a height of 666. Then when you paste it, move it to the right so the right side is fully covered. It might be a good idea NOT to do any resizing if you want to use the same image

for the APPLICATION backgrounds. If you notice with the default images, for example, when you hit ENTER on VIDEOS from the main menu, the background image matches EXACTLY with the application background. If you want to have the same background from the main menu to the application screen, you simply have to paste the same image into both PSD files. If you start messing around with cropping, things might get weird and the images won't match up. They don't really have to, but that's up to you. Another note on image size is that, on average (4 of my HDTVs), only 1191 pixels wide will show. There's an 89-pixel wide bar on the left side of the screen. Those 89 pixels plus the 1191 pixels gives you 1280 pixels. A normal HD image is 1280 pixels wide, so the rest of image will just get cropped out beyond the right side of the TV. So keep this in mind when resizing your images and moving the "right overlay". This script will produce a left image with resolution 1024x688 and a right image with resolution 167x688. Don't worry, just paste a 1280x720 image like normal, the script will take care of the rest. ================================================================================ ============================= Menu.psd DIRECTIONS ============================== ================================================================================ 1. Change the text to your likings. 2. Copy the new background image you want to use. The easiest way to do this is, is to open the image in your web browser, right click on it, and choose "Copy Image" or whatever the equivalent is for your browser. 3. Click the "background" layer once so it's selected. Press CTRL+V and it should create a new "Layer 1" right between the "black bar" layer and the "background" layer. "Layer 1" will contain your new image. Keep "Layer 1" selected; if it isn't, click it once to select it. 3a. If you're making a new VIDEOS screen, but keeping the background image (new text only), still paste the included "hover_my videos.png" as the "new" "Layer 1" background. 4. Make sure your "ACTIONS" menu is showing. This is normally activated with ALT+F9. Make sure the "ACTIONS" tab is selected. Scroll down on this list and you'll see "v0.9.0220". Below this, you'll see "Menu Merge & Split". Click "Menu Merge & Split" one time so it's selected. Make sure you still have "Layer 1" selected so you're not accidentally running the script on something else. 5. At the bottom of the ACTION menu, press the PLAY button. It'll automatically create a "left.jpg" and a "right.jpg" in wherever your last saved image was. Because it automatically saves these images for you, so you won't have to go searching for it later, I would save something ANYTHING to the Desktop first so it'll save these images there and it'll be easy to find. ================================================================================ ========================= "Menu Merge & SPlit" DETAILS ========================= ================================================================================ In case you want to work with different image dimensions or these PSD/ATN files don't work for you, I'll give you a rundown of what the script does. 1. Makes selections out of the "1-system" layer, makes a new layer, moves the selection one pixel down and one pixel right, fills it with black, then moves the layer UNDER the "1-system" layer. It repeats this for the "2-exit", "3-videos", "4-music", and "5-pictures" layers. 2. It moves your new background image "Layer 1" 89 pixels to the left. 3. All the layers are merged and then copied, unmerged, moves your image back to the right 89 pixels (so you can work with it again afterwords if you need

to), then deletes the shadows and your "Layer 1". 4. It pastes the entire image to a new canvas, crops it to 1191x688 bottom-left anchored, copies it, crops it to 1024x688 left anchored, saves it as left.jpg, and closes it. 5. The 1191x688 image is pasted again to a new canvas, crops it to 167x688 right anchored, saves it as right.jpg, and closes it. ================================================================================ ============================== APPLYING NEW MENUS ============================== ================================================================================ 1. Now you have to move the created JPG files to the "home" directory of the skin. Unless you want to do some editing in the HTML, I think the easiest way to get the images changed is to rename the JPG files. So in the case of this PSD file, it's created files for the VIDEOS screen. Rename left.jpg to videosl-nojb.jpg. Rename right.jpg to videosr.jpg. You'll notice I have a "videosl-nojb.jpg". This is for the case where you're NOT using the JUKEBOX plugin in myiHome. If you ARE using the Jukebox plugin, make sure you get the categories correct and rename left.jpg to videosl.jpg. 2. After moving all the image files to their appropriate folders in the skin's directories, copy and paste the entire skin folder. 3. Rename the skin's folder to "Streamend NMT Custom", for example 4. In the myiHome program, go to Edit > Preferences. In the Appearance tab of the General menu, drop down the Select theme drop-down box and choose "Streamed NMT Custom". 5. Restart the myiHome server on your computer (optional?), then reload your myiHome HTTP server on your NMT. Normally I did not have to restart the myiHome server on my computer, but lately, for some reason, the skin wouldn't take unless I restarted it. So if the skin doesn't take after simply choosing the new skin, restart the server and try again. ================================================================================ =========================== Applications.psd DETAILS =========================== ================================================================================ Open Applications.psd. You want to keep all the layers exactly where they are so it'll come out properly. The "videos" layer: This is a text layer and is the title of the category. Change the text to "music", "online", "pictures", or whatever category you want to make a background for. The "overlay" layer: This is the horizontal semi-transparent bars above and below. There's no need to change this layer. The "background" layer: This layer is self-explanatory. You can leave this layer alone, but if you're using another background, make sure it shows up RIGHT BELOW the "overlay" layer. ================================================================================ ========================= Applications.psd DIRECTIONS ========================== ================================================================================ 1. Change the text to your likings. 2. Copy the new background image you want to use. The easiest way to do this is, is to open the image in your web browser, right click on it, and choose "Copy Image" or whatever the equivalent is for your browser. 3. Click the "background" layer once so it's selected. Press CTRL+V and it

should create a new "Layer 1" right between the "overlay" layer and the "background" layer. "Layer 1" will contain your new image. 4. Make sure your "ACTIONS" menu is showing. This is normally activated with ALT+F9. Make sure the "ACTIONS" tab is selected. Scroll down on this list and you'll see "v0.9.0220". Somewhere below this, you'll see "Application BG". Click "Application BG" one time so it's selected. Make sure you're still looking at Application.psd so you're not accidentally running the script on something else. 5. At the bottom of the ACTION menu, press the PLAY button. It'll automatically create a "background.jpg" in wherever your last saved image was. Because it automatically saves the image for you, so you won't have to go searching for it later, I would save something ANYTHING to the Desktop first so it'll save these images there and it'll be easy to find. ================================================================================ =========================== "Application BG" DETAILS =========================== ================================================================================ In case you want to work with different image dimensions or these PSD/ATN files don't work for you, I'll give you a rundown of what the script does. 1. 2. 3. 4.

Merges all visible layers. Saves as "background.jpg". Unmerges it so you can work with it again afterwords if you need to. Deletes your "Layer 1" background image.

================================================================================ ===================== APPLYING NEW APPLICATION BACKGROUNDS ===================== ================================================================================ 1. Now you have to move the created background.jpg file to the "background" directory of the skin. If you're creating a background for the VIDEOS application, rename "background.jpg" to "video.jpg". "music.jpg" if you're making it for the MUSIC application. Similar for ONLINE and PHOTO. 2. After moving all the image files to their appropriate folders in the skin's directories, copy and paste the entire skin folder. 3. Rename the skin's folder to "Streamend NMT Custom 2", for example 4. In the myiHome program, go to Edit > Preferences. In the Appearance tab of the General menu, drop down the Select theme drop-down box and choose "Streamed NMT Custom 2". 5. Restart the myiHome server on your computer (optional?), then reload your myiHome HTTP server on your NMT. Normally I did not have to restart the myiHome server on my computer, but lately, for some reason, the skin wouldn't take unless I restarted it. So if the skin doesn't take after simply choosing the new skin, restart the server and try again. ================================================================================ ================================== CHANGELOG =================================== ================================================================================ Mar 01, 09 - 0.9.0220 - 1.0 - Initial release.