New Theme (Work In Progress)

[Keigan]

Working on a new theme, based off an old NES poster. I'm not really sure what I'm going to do with it as far as how to finish it up, but it's coming along.

I like to keep things simple, but perhaps I will add in some more info to fill in the empty spots.

Ideas/Criticism appreciated

[Keigan]

Poster for reference

[FlyingTomahawk]

From the looks that isn't ES based right?
A grid view like in that poster would be sweet.

[edmaul69]

Omg!!! I absolutely need this theme. I love this. I will put this on my nes pi system. You could put the "now your playing with power at the top" and lower the gamelist. Other than that i would keep it clean. What frontend is that?

[Keigan]

@edmaul69

I had thought about that actually, the Playing with Power Part. And I do like how clean it is, maybe I need to adjust the positioning of things. I put the ROB in without actually looking to see if it's balanced.

My setup is 1920 x 1200, so I do not have a 1920 x 1080 layout yet, but once I finish it I may put one together. If not I will give access to the design files, xml files, and all the necessary info for someone to build their own.

I'm going to make a generic post explaining the layout and such in a few minutes.

[Keigan]

@FlyingTomahawk

Yeah a grid setup would be awesome. I know that there is some work being done on it, and if it comes to fruition I would make a grid layout to match that poster.

I'll make a new post in a few minutes explaining the design, how I got it, etc.

It is ES, but I did a lot of cheating and work behind the scenes to get it to look this way.

[backstander]

@Keigan Wow! I use to have the poster! Seeing it again brings back memories! Great idea for a theme and like @FlyingTomahawk said "A grid view like in that poster would be sweet."!

[Keigan]

So... Jump ahead to the break if you don't care to hear me blab on about how I got to the start of the design.

I literally made this layout in the matter of a few hours, however it's been basically ongoing for 2+ years now. I'll explain the back story a little first and then get into the layout.

I made one of, if not my first ES theme 2 years ago. I am very picky about layouts and design and was not a huge fan of the base ES theme. I like the idea behind it, wished it was more editable, but with what you can work with it actually is quite customizable (is this even a word?).

One of my pet peeves in design is consistency and where a huge amount of inconsistency tends to lie is in box art. Reason is that there are only scans, and they range from low res to high res, and somehow are never the same dimensions, so I was not a huge fan of box art being part of ES. What I did like though, was start screens. They also tend to range in size and quality, etc. however, they are also easily accessible and created.

So in my design I planned on using start screens, and came up with this as my first theme. Based on Mega Man.

Now to get all of the start screens I did it by manually opening every single NES rom I had and captured the screen. Easy enough, but can be time consuming on the number of games you have, and the consoles you plan on having. In my case at the time I only had NES/SNES/Gameboy. Still between the 3 consoles I chose to have give or take 1500 games. You can imagine the time it took.

So the problem with start screens is they can only be a certain size before they look all wonky. They need to keep the pixels square, which is fine, but really is gives you 4, possibly 5 sizes max for ES.

---

So fast forward to today. I decided I was wanting a new layout and saw the NES poster and thought it'd be cool to have a clean look like that. Knowing a grid layout isn't 100% yet I tried the next best thing.

This was still all made in ES, so it's a lot of cheating to make it look like it's not. Adding/Removing games would make you have to redo this whole process over again. Which once you've done it would be faster, but still a major ass pain.

Anything that I touch on ahead that does not make sense please let me know I will explain further and add screen shots to help.

So first thing was to come up with the "scrolling" start screens. Again this isn't possible in ES, but Photoshop is your best friend.

If you are not familiar with Actions in Photoshop, I highly suggest familiarising yourself. They are a massive time saver for design, not even just relating to this.

So I created an action with my start screen file

Taking this:

Shrinking it and adding the rounded vintage tv look to it (The purple square was just used for alignment and is removed in the final action).

I am a person who finds it useless to have every NES game on my Pi. There are tons of games I have 0 interest in them so I don't bother putting them on. I cut my ROM collection to about 400 or so NES, but for doing this I have 146, I will likely add more at some point. This is key for taking on projects like this as obviously the more games the more work.

So now what I did was import all of the screen shot files into Photoshop on an art board that was 146x the height of each image. Roughly worked out to be 45000h x 400w. I ran a script to sort the layers in alphabetical order and then put game 1 at the top and game 146 at the bottom and then used distribute vertically to lay them out. Using slices I cut ever 900 px. Exported them to files like this:

146 png's which unfortunately have a generic name, will address this issue later.

Using 1 more Action I added removed the purple border and faded the top and bottom game.

And so this is how I got the grid/scrolling layout.

All of the placement obviously done in the XML, I use Photoshop and guides to get exact measurements, and the font is Helvetica Black Italic to match the poster.

So a tedious process, but made quicker using some tricks. So any time you add a game, you would have to redo all this from the title before the game you added to the end. So best get everything in order first.

Now since I used the slice tool and exported the screenshots, I lost my naming convention as well the way I sliced it

NES1.png = Game 1
NES2.png = Game 3

so they were all out of order.

So this is where Excel comes in hand.

I had created a spreadsheet in the past to easily layout my XML files. So below is a modified version for lining up the proper image filename to the proper game. 3 Tabs in Excel, linked cells to pull proper data. Took a long time to set up, but using it is a breeze now for me.

Anyway that's how I did everything to get this layout, again any criticism or ideas are appreciated, and any questions I will answer as best I can. I cannot create a whole theme since I only plan on having x amount of games, but I can help and provide the tools for you to do it as you please.

[Jerry Curl]

Very clever with using the faded images for before and after in the list. Nice job.