Starting with Themes

[herb_fargus]

@itsnitro for starters it has rookerviks theme helper in the release.

Just extract it anywhere and run the batch file and it is up and running on your windows PC. It has readmes explaining everything

[A Former User]

Ok, I didn't know that it had the theme helper in the release. That's amazing.
Second, I don't want it on my pc, but instead on a flash drive. Can I do that with keeping all of my files on the Flash Drive?

[herb_fargus]

@itsnitro absolutely. It can be run directly off a USB, it should be completely portable. You have to run the .Bat launch scripts, the exe won't work being portable

[A Former User]

Alright, thanks!

[A Former User]

I get this error when trying to run Rookervik's theme helper. also, the August 2008 DirectX Runtime is not avaliable on Microsoft's website, only the 2009 one. And that one doesn't work.

[mattrixk]

@itsnitro Your background is trippy.

I'm sorry if the tutorial is complicated. I tried to include everything that a person needed to know, if they started from the Jon Snow point of coding experience (eg: knowing nothing). Themes are very simple to make when you already know what to do, but there is quite a bit to them, so the tutorial became quite long.

You don't really need the Theme Helper to make themes. All it does is give you the coordinates of the items in your design.

What program would you use to design your theme? You say you're a designer, so I'm guessing you'd use Photoshop, or maybe Illustrator (or GIMP or Inkscape)? I'm going to continue as if your answer to my question was "Photoshop", because that's what I use and am familiar with.

This is my basic workflow for creating a theme

• Open Photoshop
• Create a new 1920 x 1080 file
• save it as "newtheme.xml" (where "newtheme" is the name of your theme)
• Set up a grid to help with sizing and positioning of elements. Here's how:
  • Go into Edit -> Preference -> Guides, Grid & Slices.
  • In the "Grid" section set your colour to something light (eg: #bee7ff).
  • Set "Style" to Lines (you could use dots or dashes if you prefer, I like Lines).
  • Set "Gridline Every" to 1 Percent.
  • Set "Subdivisions" to 1.
  • Click "OK"
  • Right click on your Rulers and set them to Percent (If you can't see your rulers, use ctrl+r to turn them on)
  • Make sure "Snap to Grid" is turned on View -> Snap To -> Grid
• You should now have a 1920x1080 image with grid lines at every 1% (if you can't see your grid lines, use ctrl+' to turn them on)

Now you can use the grid to design the perfect layout

• I start by deciding which View I am going to design first (System, Basic, Detailed or Video). For this example I'll use Detailed View.
• Make note of each of the elements that View requires. For Detailed View you can have:
  • <image name="logo">
  • '<image name="md_image">'
  • <textlist name="gamelist">
  • <text name="md_description">
  • <text name="md_lbl_players"> / <text name="md_players">
  • <text name="md_lbl_genre"> / <text name="md_genre">
  • <text name="md_lbl_playcount"> / <text name="md_playcount">
  • <text name="md_lbl_developer"> / <text name="md_developer">
  • <text name="md_lbl_publisher"> / <text name="md_publisher">
  • <text name="md_lbl_releasedate">
  • <datetime name="md_releasedate">
  • <text name="md_lbl_lastplayed">
  • <datetime name="md_lastplayed">
  • <text name="md_lbl_rating">
  • <rating name="md_rating">
  • <helpsystem name="help">
• Most of that is metadata that you don't really need if you don't want it. The important ones are "help", "logo", "md_image" and "gamelist".
• Now I place boxes around the screen where I think they will look good.
  • I'll start with a long strip down one side for the Gamelist.
  • Then draw a big square box somewhere for the "md_image".
  • Another box somewhere for the "md_description"
  • The rest of the metadata gets placed wherever they'll fit. It's all up to you.

• You can then use the "Info" pane to get the <size>/<maxSize> and <pos> tags for your XML code.

• I also use the guides to find the middle of the boxes. This is handy for images that use <origin>0.5 0.5</origin>

I hope this has started you off. If you have specific questions you can ask me and I'll do my best to answer them.

[A Former User]

First, I don't use Photoshop, I use Paint.net, a free program.
Second, I have a plugin which allows me to use .psd files, so is it okay if you send your template over? It would really help me a lot.
Third, I know. I make a lot of psychedelic art.

[mattrixk]

@itsnitro It kinda sucks for paint.net that their website isn't actually paint.net.

I had a quick look at paint.net and couldn't see a way to change the ruler to percentages. The only options I found were pixels, inches and centimetres.

Any photoshop file I sent you would just be a blank 1920x1080 file, which is something paint.net can already do. The reason it would just be a blank file is that all the magic happens with the grid and ruler set to a percentage, which it appears paint.net can't do. There may be some plugins or something that let you do it, but I haven't found anything (I didn't search very hard).

What I can do for you is give you this:

It's a 1920x1080 grid with light blue grid lines at roughly every 1%. You should be able to load that into it's own layer on paint.net and use it as a base. It's not much, and it won't help with getting the numbes for size and position, but it's a start.

[A Former User]

Alright. Thanks.

So I'm starting with the tutorial. Can I use .png files instead of .svg?

[mattrixk]

@itsnitro I think you can use just about any image format, but you can definitely use png.