.

The Deadliest Kvetch

Your Custom Menu Screen Tutorial

Rating: 5 votes, 5.00 average.
I am assuming that anyone attempting to make a custom menu screen has some type of feature filled graphics manipulation program and is comfortably proficient using it. I use PSP8 myself, but I'm sure that most programs are similar. I bear no responsibility for your project or the outcome, because if you perform the very first step there should be no issues with "breaking your game"!

The First Step:

Make yourself a new folder, place it somewhere you will recall and name it "Original Menu Files". This folder will backup the original files in case you need to reinstall them.

Close Trainz 12, then navigate to your Trainz 12 folder in Explorer, open the "Bin" folder and then the "Launcher" folder. In the Launcher folder, find the appropriate folder for the version corresponding to the nation in which you live, assuming that's the language your version is using. I live in the US, so I opened the "images-US" folder. Copy and save the following files to your Original Menu Files Folder:

btn_start (START BUTTON GRAPHIC)

btn_trainzmap (EXTRAS BUTTON GRAPHIC)

btn_manual (MANUAL BUTTON GRAPHIC)

btn_options (OPTIONS BUTTON GRAPHIC)

btn_manage content (CONTENT BUTTON GRAPHIC)

btn_readme (FORUMS BUTTON GRAPHIC)

btn_website (WEBSITE BUTTON GRAPHIC)

btn_quit (QUIT BUTTON GRAPHIC)

main_back (MENU SCREEN IMAGE)

ts12 (MENU SCREEN HEADER... the space at the top of the image where the Trainz Simulator 12 graphic displays)

Now all your original files are safely copied and saved in case you should need them later.

The Second Step:

Open your graphics program, then open each of the files above except for main_back. You should be altering the files that are still IN YOUR TRAINZ 12 FOLDER, not the ones you have copied and saved. Once open, fill each of them with a color that you can easily detect, consider, perhaps a blue or red set at about 30 to 50% opacity. Save all files, but you shouldn't need to close them.

The Third Step:

Start Trainz to the menu screen. You should see the colored areas you have inserted as a larger box around the header, and then 8 smaller rectangles around each button. Take a screenshot and then open that shot in your graphics program. Quit Trainz from the menu. Crop the image to the exact outline of the menu screen, it should measure 640 x 480 pixels when complete. Use your select tool to outline each of the colored areas. You will want to be as exact as possible during this procedure. Invert the selections, then copy and paste the inversion as a new image, fill the areas outside your selections with a solid color, (I used black at 100% opacity). This graphic will be used as a mask in the future, so do not merge the layers, or save as any other format than your graphics programs native extension. You should undo all your selections on your screen shot graphic and save that also, it helps when working with the buttons later. You should now have a graphic that looks like this:




The Fourth Step:

Prepare your custom image to your liking. I try to center the main subject near the center of the image, but keep in mind the buttons on the right hand side extend slightly more to the center than those on the left. Your finished image should be 640 x 480 pixels in dimensions. Save the image as a Windows or OS/2 Bitmap (*bmp.). You can then use this image to replace the "main_back" image in your Trainz folder. After saving your custom image to the Trainz folder, make a copy and apply the mask you made above to the copy (they should be exactly the same size). You will now have something like this:

main_back, BOTH ON YOUR GRAPHICS WINDOW, AND SAVED IN YOUR TRAINZ FOLDER:



Masked image (on your graphics window):



The Fifth Step:

Using your select tool, outline the large rectangle at the top of your masked image, copy and paste that as a new image. You may use your tools to add whatever you want to the image, by default in the original files, this is where the Trainz Simulator 12 writing appears, but you can use a text tool to write "Peter's Trainz Toot Toot" or "Norfolk Southern Trainz 12" or a picture of Thomas the Tank Engine, or whatever you want. Whatever you decide to do, that rectangle is going to show up, superimposed over your custom image, so beware not to obscure the image too much. When you are done wreaking havoc, save the image to the Trainz 12 folder as a Windows or OS/2 bitmap (*bmp.) named ts12. My file looks like this:



The Sixth Step (buttons):

The original buttons are laid out horizontally, three instances of the same graphic in a row. The first from the left is the button as it appears when the menu is displayed on the screen. The second is the button as it appears when you mouse over it, (the color of the writing changes from white to yellow), the last is the button when you click upon it, (the yellow writing moves downward). See below:



If you don't care about transparency you can just fill the graphic with color and place text of your choice three times across the graphic, or you can select each rectangle and buttonize the selection. You can change the color of the writing or place a "light" next to each "Start" that changes for each state of the button, but you have to do something, because you don't want those bits of the original main_back showing up on your new custom image!

I use the masked main_back file and selected each rectangle where the buttons appear and copied them one at a time, three times across each "btn" image. Patience and precision are called for. I then filled each btn image with a black color, at 10%, six times to achieve a transparent, yet darked area where the buttons will display. I then applied the words with the text tool, and added a drop shadow. I took care to postion the last word on the far right a bit below the other two instances of the word to maintain the original scheme as much as possible. Below is my result:



You must repeat this step for all eight buttons, using the selection for the appropriate location where each button will appear.

Save each in the Trainz 12 folder as Windows or OS/2 bitmaps (*bmp.). Start Trainz to the menu screen and see what you've wrought, then make changes as desired. You may want to consider saving a copy of each of these altered images to a folder named to represent your new scheme.

Note that the build number will be displayed in the lower right hand corner. This is not a function of buttons. If you wish to change the area it uses, you must do so on your main_back file. The original gray semi rounded rectangles that each button is displayed in are also "painted" on the Main_back file.

My final results look like this (for now):



Good luck, and please post your thoughts, or any questions you may have!

Thanks for visiting "The Deadliest Kvetch"!

Updated February 8th, 2012 at 03:05 AM by Euphod

Categories
Trainz Simulator 12

Comments

Page 2 of 3 FirstFirst 123 LastLast
  1. Euphod's Avatar
    Quote Originally Posted by leeferr
    Thanks Ed. I just don't like the blocks around my text. As long as I can see the text (after all, it'll be the same each time that I launch), then that's all I need. I'm thinking about doing some little logos instead of text for each, but those thoughts really haven't taken shape yet. It opens up all sorts of possibilities. I don't know much about gifs, but I was wondering if gifs could be used in order to get me some animation in the buttons.

    Mike
    As far as I know Mike it has to be a bitmap.
  2. Euphod's Avatar
    Quote Originally Posted by captainkman
    Hi,

    I thought I'd try this out, and I came up with this: (pic removed)

    My favourite loco, as close to being in Trainz as she'll ever be for the next year or two...

    (Image hosted at Host Then Post, may expire)
    Pretty cool pic K man, you did really well!
  3. russellwhite2007's Avatar
    Here's my new launcher screen not the best I must admit.



    Ed I knocked up a printable version of this in case it ever gets lost
    here's the links

    PDF
    Openoffice

    If you're not happy let me know I'll take them down....

    They do have to be .bmp I tried and no other format worked.

    Cheers Rusty
  4. Euphod's Avatar
    Quote Originally Posted by russellwhite2007
    Here's my new launcher screen not the best I must admit.
    That's fine Russell, it will make it easier for some to download I suspect.

    The screen looks great, you've done a real nice piece of work there! Thanks for reading, and commenting!
  5. captainkman's Avatar
    Hello everyone,

    I decided to add a colour picture for (slightly) more difficulty. Here's what I came up with. (Note, the words turn yellow when you hover the mose on them and click on them.)



    Edit: I wonder if a video tutorial would be good? I can make one on a spare weekend. Just not for a few weeks, maybe about the end of the month, then I'll get some time to do it.
    Updated February 15th, 2012 at 06:26 AM by captainkman
  6. Euphod's Avatar
    Quote Originally Posted by captainkman
    Hello everyone,

    I decided to add a colour picture for (slightly) more difficulty. Here's what I came up with. (Note, the words turn yellow when you hover the mose on them and click on them.)
    Edit: I wonder if a video tutorial would be good? I can make one on a spare weekend. Just not for a few weeks, maybe about the end of the month, then I'll get some time to do it.
    Nice, I like the screen. Knock yourself out on the video tutorial, but please do mention you read it first at The Deadliest Kvetch. That seems fair to me.
  7. captainkman's Avatar
    Quote Originally Posted by Euphod
    Nice, I like the screen. Knock yourself out on the video tutorial, but please do mention you read it first at The Deadliest Kvetch. That seems fair to me.
    Will do! I'll have a link in the description to this thread, so others can look at it too.
  8. pcas1986's Avatar
    This is my second offering using a photo this time. It's a photo of the "City of Truro" that I took at the York National Railway Museum back in 2010. This is one of my favourite British locos.



    I added some icon style graphics where it made sense although my "no trains" icon is not as obvious as I would prefer. The build number was a problem since it is white lettering on a pale surface so I added a small 30% black layer in that position.

    I know I said this earlier but this has been a very useful little exercise. I've learned a whole lot more about layers, transparency and other effects in my graphics program. I can hardly wait to use these new skills in my next model - whatever that might be.
  9. Euphod's Avatar
    Quote Originally Posted by captainkman
    Will do! I'll have a link in the description to this thread, so others can look at it too.
    Thanks K-man, that sounds great!
  10. Euphod's Avatar
    Quote Originally Posted by pcas1986
    This is my second offering using a photo this time. It's a photo of the "City of Truro" that I took at the York National Railway Museum back in 2010. This is one of my favourite British locos.
    I added some icon style graphics where it made sense although my "no trains" icon is not as obvious as I would prefer. The build number was a problem since it is white lettering on a pale surface so I added a small 30% black layer in that position. (picture removed from reply)

    I know I said this earlier but this has been a very useful little exercise. I've learned a whole lot more about layers, transparency and other effects in my graphics program. I can hardly wait to use these new skills in my next model - whatever that might be.
    Paul, each one gets better and better! That's a great screen, and I'm glad someone has learned something from the blog. What can be done with a graphics program is nothing short of amazing! Thank you for your consistent following, and for your comments and examples.
  11. russellwhite2007's Avatar
    My new screen for 2010 using an old picture taken of Fratton depot with Cigs, Bigs & Veps.


    Once again Thanks ED for taking the time to help others....

    Cheers
    Rusty.
  12. Euphod's Avatar
    Quote Originally Posted by russellwhite2007
    My new screen for 2010 using an old picture taken of Fratton depot with Cigs, Bigs & Veps.
    Once again Thanks ED for taking the time to help others....

    Cheers
    Rusty.
    Hey great screen Russell, and you are quite welcome! Thanks for posting this one!
  13. pcas1986's Avatar
    Quote Originally Posted by russellwhite2007
    My new screen for 2010 using an old picture taken of Fratton depot with Cigs, Bigs & Veps.
    (snip)
    Once again Thanks ED for taking the time to help others....

    Cheers
    Rusty.
    I rather like the font you used for the menu items. Can you tell me what you used?

    TIA

    Paul
  14. PerRock's Avatar
    That's a great picture Rusty!

    peter
  15. russellwhite2007's Avatar
    Hey great screen Russell, and you are quite welcome! Thanks for posting this one!
    No problem Ed.

    I rather like the font you used for the menu items. Can you tell me what you used?

    TIA

    Paul
    Paul I used AriaScriptSSK-Regular

    It's not installed with windows but download link below.
    download
    Just double click to install once downloaded.

    That's a great picture Rusty!

    peter


    Many thanks got some other older pics which I might knock up later.

    Cheers Rusty
  16. pcas1986's Avatar
    Quote Originally Posted by russellwhite2007
    Paul I used AriaScriptSSK-Regular

    It's not installed with windows but download link below.
    download
    Just double click to install once downloaded.
    That worked a treat. Thanks.

    Cheers
    Paul
  17. russellwhite2007's Avatar
    Quote Originally Posted by pcas1986
    That worked a treat. Thanks.

    Cheers
    Paul
    Not a problem hope you enjoy the font.

    Two more fonts that may be of interest are.

    BritishRailLightNormal
    &
    BritishRailDarkNormal

    Cheers
    Rusty
  18. russellwhite2007's Avatar
    I've done a couple more screens today.




    Once again Thanks to Ed more to come lots of pictures still to do...

    I'm thinking of packing all these screens up for people to download and install.

    Cheers Rusty.
  19. russellwhite2007's Avatar
    Hi done some more today as I had nothing else to do.







  20. russellwhite2007's Avatar


Page 2 of 3 FirstFirst 123 LastLast