[SKINS] Controller Image Kit

[nullPointer]

This is a template I made quite a while back for making controller images. I considered releasing it at the time, but talked myself out of it since 1) it's sort of a niche thing, and 2) my methodology is a bit unorthodox (more on that in a second). I use the default Media Center theme, so this fits my setup pretty well. It would be pretty easy to swap out most of the components in these images to fit your theme as necessary. The images are 1920x1080. The color scheme is classic GameEx blue and orange. Hopefully somebody might get some use out of it.





So this kit essentially consists of two components.

• Background Layout Layer: The background layer is an XCF/PSD which actually contains several layers for customizing the background of the controller images. These layers include the background, the grid, logos, and controller images (both for the emulated system and the main controller). The main controllers included in this set are a Logitech Rumblepad 2, a Logitech F710, a DualShock 3, and an Xbox 360 controller.

• Foreground Buttons Layer: The foreground layer is an SVG file consisting of all the button images (on a foreground layer), and a background layer consisting of the final background layout generated above. All of the vector elements have been grouped. This facilitates easy repositioning of elements, but adds an extra step if you want to edit anything. Pretty much all the SVG graphics can be ungrouped to a very granular level. Some objects may have been grouped multiple times (sorry), so if you’re trying to break something down but can’t, attempt to ungroup it again. This will allow for changes to colors, gradients, labels, fonts, and general manipulation of the raw vector graphics if you wish to do so.

So if you've been following along, that's a rather strange approach. Here's the reason for two different file types used to generate one final image. I wanted to keep the controller images in an XCF ( or PSD) since ultimately they're raster graphics and storing them in a vector format doesn't really buy any additional quality (since they're already raster graphics). Additionally GIMP is a lot easier (and better) to use for editing raster graphics, since that's what it's designed for (I would assume this is also true of PhotoShop).

The Foreground Layer, on the other hand is stored as an SVG being as all the button images are vector graphics. Storing them as an XCF (or PSD) format would cause them to rasterize which I wanted to avoid in order to maintain scalability.

I highly recommend Inkscape for working with the vector graphics. Technically there's not an official specification for the inclusion of layers in the SVG standard, so for all I know the layers in this SVG may not work in a different editor (I've never tried). This is also the reason I didn't want to overload the SVG with all the layers from the background layout, as GIMP seems to be a lot better at handling that many layers. Be that as it may, Inkscape is awesome.

I need to give a special thanks to Draco1962 for most of the logos. I've retouched several for the purpose of this kit (and added transparency), but most of the logos themselves are the result of his excellent work. Thanks Draco!

Download Page

Change Log:

08/18/2012: Draco1962 has developed some really cool schematic style backdrops as additions to this kit. These in turn compliment the really cool theme he's developing called Blue Neon LCD. Be sure to check out the theme if you haven't already, and remember to hit up that 'Like' button if you like what you see!

07/27/2012: Including the font utilized in the foreground buttons as part of the kit.

07/25/2012: Foreground layer has been updated to include a couple of missing button shapes.

07/24/2012: Background layout has been updated to include a primary controller image for the original Xbox controller S. To compliment the addition of the new primary controller I added elements for an original Xbox background. I also added background elements for a PSP layout, since it's a system that was missing from the set.

07/21/2012: The background layout has been updated to include layers for an X-Arcade Tankstick (one for the primary controller, and another which has been downsized to represent an emulated control panel for arcade systems).

Edited August 3, 2013 by nullPointer
Moved files to Downloads section

[KRC]

nullPointer,

This looks so cool, this is one of many things I haven't got round to but I do have to say these are very neat indeed

First time I saw this type of work was on Djour's space theme, I though yeah I could try something like that but I never got round to doing it.

[Tempest]

Awesome. Lately the community has exploded with great ideas, graphics, and themes. Kudos to all who contribute!

[Bigby]

I also have been meaning to setup something like this in GameEx... thanks nullPointer!

[AlphaUMi]

Nice contribution! Thanks null!

[Draco1962]

Awesome job! I like much!!!

[nullPointer]

Thanks a lot guys! I'm still slowly adding systems to this kit as I need them, but at this point progress is fairly slow. If anyone would like to see any additional systems, or controllers added to the background layer I would be glad to make additions as necessary. Everything here is mostly geared towards console and handheld systems, so I'll be adding more arcade systems (and possibly PC based systems).

I've got another project that's been simmering on the back burner for a while, so I haven't been focused on this one. Feel free to let me know if you'd like to see anything added to this kit.

Thanks Again!

[Draco1962]

I know I have promised in the past to a few and will try to get a clean image of an X-Arcade Tankstick that you can feel free to include with your Image Kit.

[nullPointer]

That would be awesome Draco! I’ll look around and see what I can find as well. Interestingly enough, it was when I started working on the arcade systems that I sort of hit a creative block with this kit. I wasn’t sure where to go with arcade controls. For MAME I use the background image in conjunction with HK’s fantastic CPWizard software, but for the other arcade emulators it’s kind of hit and miss due to the fact that there are so many control variations, even within a single platform. I might just decide to do an arcade specific version of this kit.

Also, I’ve added it to the main description, but for anyone who’s messing with the SVG graphics, everything has been grouped. This facilitates easy repositioning of elements, but adds an extra step if you want to edit anything. Pretty much all the SVG graphics can be ungrouped to a very granular level. Some objects may have been grouped multiple times (sorry), so if you’re trying to break something down and can’t, just attempt to ungroup it again. This will allow for changes to colors, gradients, labels, fonts, and general manipulation of the raw vector graphics if you wish to do so.

Thanks again for checking this out!

[Adultery]

Nice work Null! I like these very much!

Damn Tempest, you're right! This place is full of creative juices lately! Props to everyone who takes the time to make this community stand out.

[nullPointer]

Nice work Null! I like these very much!

Damn Tempest, you're right! This place is full of creative juices lately! Props to everyone who takes the time to make this community stand out.

Thanks Adultery! I've always been a huge fan of your awesome controller image set as well. (If I recall correctly it was actually your controller images that inspired me to build this set in the first place!).

nullPointer,

This looks so cool, this is one of many things I haven't got round to but I do have to say these are very neat indeed

First time I saw this type of work was on Djour's space theme, I though yeah I could try something like that but I never got round to doing it.

I meant to respond to this when you posted, but with all the talent you've developed working in GIMP you would have absolutely no problems whatsoever picking up Inkscape and working with vector graphics. Naturally raster graphics will typically be a more practical format for several general applications, but working with vectors can be quite a bit of fun!

[nullPointer]

I know I have promised in the past to a few and will try to get a clean image of an X-Arcade Tankstick that you can feel free to include with your Image Kit.

I've updated the kit to include images of an X-Arcade Tankstick (one layer for the primary controller, and another layer which has been downsized to represent an 'emulated' control panel for arcade systems).

I was surprised at the difficulty I had finding a reasonably high resolution image of this control panel! (I still had to upscale the image slightly, but I don't think it's really noticeable). I was about to use an image of the older version of the Tankstick (the 'rectangular' version, and the only high-res image I had found up to that point), when I stumbled upon this image which I think is quite a bit better. I added transparency and the side buttons to the image (which I tend to think of as pinball buttons) and called it a day.

Original post has been updated.

Draco: I've never used one of these bad boys, so let me know if I'm missing any button cutaways in the final image.

Edit: The new upload didn't overwrite the original one (or else I just had a brain fart, which is not altogether uncommon), so I had to re-up. Everything should be ready to roll now. The new elements can be found in the original post. Rock On, Rock Soldiers!

Edited July 21, 2012 by nullPointer

[Draco1962]

Will still see about getting an updated pic to you. I actually photographed mine which is the newer version.

[nullPointer]

I think the image I'm using now matches what's currently on the X-Arcade website. All the same, I'd definitely incorporate a higher resolution image into the kit if you were to provide one! I meant to post an updated image in my earlier post, Here's what the background looks like with the Tankstick in place. I think I've included all of the 'non-visible' buttons here, but please let me know if not. I mock those up separately, so even if I do incorporate an updated Tankstick image, I'll prepare the extra buttons in advance. Thanks!

[Draco1962]

Actually, that is the same version as mine and I think yours looks perfect! My pics would require too much clean-up and still not look quite as nice.

Here is an image I had of the original Xbox wired controller if you would like to incorporate into your kit. It may require a little cleanup as it is a raster image. I actually use this with my setup as I have a few extras in addition to the ones that came with the console.

[celly]

NP this looks great! Trying it fo show!

[nullPointer]

Thanks for the interest in this project you guys!

I've updated the background layout components to include a primary controller image for the original Xbox controller S. To compliment the addition of the new primary controller I added elements for an Xbox background. I also added background elements for a PSP layout, since it's a system that was missing from the original set. Based on the addition of the PSP images, it looks like I may need to add some additional vector graphics to represent a couple of the unusual button shapes seen on the PSP.

Here's a pic of some of the new background components. I should have some new foreground elements ready soon.

Original post has been updated with new background components.

[Draco1962]

Nice work, null!

[KRC]

Great stuff null

I would like to.do something like this but would feel im riding in null's territory

[nullPointer]

Thanks again guys! I’m should have new foreground components up this week (not that it takes that long to create, but my work (as in my job) has quite suddenly and unexpectedly picked up recently)

@KRC - I think the community would gladly welcome more options in this realm. You’ve got a creative spark going lately that just can’t be squelched! You absolutely have my blessing if you’d like to move forward with a project like this one (not that you need my permission). It’s not like only Drac and Krak can make themes, or only Adultery and Tempest can write plugins. The more options available, the better as far as I’m concerned! As I mentioned before, the inspiration for this particular kit was a similar project that Adultery made, so this project is in and of itself something of a derivative work.

I suspect that you’ve got a lot of resources at your disposal from your logo sets and whatnot, but if you see anything in this set that you’d like to re-use please feel free (Several of the logos were created by Draco, and a handful were created by me. I’m pretty sure he would also give you the green light if you wished to reuse logo components).

So yeah, diversity is the spice of life. Carry on you wayward son!

[vsilvalopes]

Awesome release NullPointer !

You inspired me to do the same for the themes that I'm building, but unfortunatly, because of lack of time, I've scrapped the idea for a while.

With you layout I can adapt my controler and put the layouts.

Thanks for the release and congratulations on your work !

[KRC]

Thanks for the kind words null,

I think if I was going to do this sort of project, I doubt I will do it yet due to me being bogged down with other GameEx projects and trying to complete my KRC google site.

My site will be used for mainly hosting projects and making any kind of graphics to do with Video Games easily available for other users.

Im also working on 4 more themes at the moment but im not putting them onto the User Projects area yet.

Themes due to GameEx soon.

1. Heavens Night

2. Moonlight

3. Pure Adultery (Not based on our own Adultery )

4. KRC Chromium

[nullPointer]

@KRC: Wow, looking forward to seeing all the stuff you've been keeping under wraps! So I've got to ask; is the Heavens Night theme in any way related to Silent Hill!? I'm hoping for a yes! (I'm a bit of a Silent Hill fanboy).

@vsilvalopes: I'm glad this kit has helped you out in some small way. I'm a big fan of your themes!

So just a small update tonight. I updated the foreground buttons layer to include button shapes for the new PSP back, and a missing PlayStation button (the start button). Here's an image of the full PSP layout

Thanks again for checking this project out!

[KRC]

@nullpointer,

Thanks

Yes it is, silent hill 2 is one of my favorite games of all time, I thought why not make a theme on something specific this time, and on the plus side it's not really to difficult to create

[nullPointer]

Just a small update here to address an oversight on my part more than anything. I happened to download the foreground kit on a different machine today, and noticed that the fonts were all messed up. I got home, checked it out again and the fonts were fine. Turns out the font I used in the foreground buttons was an exceedingly odd choice, and may not be installed on your machine by default. The funny part is that I don't remember having intentionally selected such an odd font choice.

I've reupped the foreground layer component with the appropriate font included. I may look into 'standardizing' the font (although I do like the way it looks now), but here's a patch in the meantime. Sorry everybody!

Original post has been updated.

@KRC: Totally agree on Silent Hill 2! It's one of the few games that kept me wondering just exactly what the hell was going on right up until the very end. Also one of the few games I've played through multiple times just to get every ending.