Theme Builders Assemble

[**Scannigan**]

Morning all,

I am about to embark on my first ever totally from scratch theme and was looking at putting together some resource material before jumping in, I've got the ES theme tool kit, the ES theme helper, had a butchers through the guide over at github.....however with all this information, where the hell do I start?

Any advice or pointers you can give me before I start would be greatly appreciated.

Thanks

[EctoOne]

What I did was to download as many themes as possible, choosed one that I liked the most, compared elements with other themes, merge them together, fix the positions. That gave me a good insight of what the elements do.

[**Scannigan**]

@EctoOne That's not a bad shout

[Nismo]

@__Scannigan__

Reading the tutorials is a good starting point...

https://github.com/RetroPie/EmulationStation/blob/master/THEMES.md

https://github.com/RetroPie/RetroPie-Setup/wiki/Creating-Your-Own-EmulationStation-Theme

Then try downloading the simple theme and start to modify to your liking following the tutorials.

[Keigan]

Sketch out what you plan on doing. There is nothing worse than starting out a design and winging it as you go. Things will change, but overall the main idea will stay the same.

In Photoshop create the screens the way you want them to look. Splash screens, system select, basic and detailed versions. Use rulers and guides to square up and align everything. This will help when coding the XML file.

Other than that there isn't much else to know to start from scratch.

I wouldn't suggest using elements from other themes, simply because you stated you're starting from scratch. Focusing too much on other themes will have you basically building them, and tweaking what you want. It's ok to look and see some elements they use, but overall I'd avoid using them as a guide.

And lastly, create the theme for you. If you only play 1 system, only make it for that system. Don't spend time making a theme for every system out there if you don't play them, it's pointless. If eventually you would like to release it for people to use, then fine, but get it the way you want first, then start to add more. I've made multiple themes over the last 3 years, but I've never made a theme for more than about 5 systems, since those are the only ones I use.

[mattrixk]

@Scannigan: I'm with @Keigan on this one.

Before you do any coding, sketch a rough layout of how you want the theme to look. You can start with simple pencil and paper to get the basic layout of elements, or use a design tool such as Photoshop, GIMP, Paint.net, Inkscape, Illustrator, etc.

Here are some simple basics. There are 4 main Views:

• System
  • Carousel with System Logos
• Basic
  • Gamelist
  • System Logo
• Detailed
  • Gamelist
  • System Logo
  • Metadata (image, description, rating, genre, etc)
• Video
  • Same as Detailed View, but with a Video instead of an Image

You don't need to support the Video View if you don't want to. Chances are, if other people like your theme, there will be someone out there that will add the Video support for you.

Start by working out what elements you want to show on each View.

• The Basic View is pretty rigid, but you can add System specific images like controllers and consoles if you want.
• The System View used to be pretty set, but now you can style the Carousel to look however you want. Check out the BaseVid theme in the Toolkit as an example. As with the Basic View, you can also add extra images to each System if you want.
• With the Detailed View, you don't have to show all the metadata if you don't want to. Maybe you don't care about number of times played, or the name of the publisher. You can hide any info you don't want to show.

Now just draw some rectangles. For the Detailed View as an example, maybe you want the Gamelist on the right of the screen, so you draw a rectangle on the right of the screen. You might want a big image in the middle, so draw a big rectangle in the middle. Maybe you want the System Logo under the Gamelist, so you shorten the Gamelist a little and draw a smaller rectangle under it.

Keep going until you have a layout that you like the look of. If you are using pencil and paper, now might be the time to move to a computer program so you can get exact numbers for the <pos> and <size> poperties.