[Guide] Custom Layout Artwork

A nice (keyboard based) front end for Arcade / Console game emulators.

Moderator: battlecat

[Guide] Custom Layout Artwork

Postby codefenix » Sun Aug 22, 2010 4:22 am

It can be frustrating combing the internet looking for just the right layout design that suits your personal taste-- at least that's been my experience. So I came up with a quick and easy way to make my own. I'd like to share with everyone a simple method to design custom layout backgrounds for use with Wah!Cade, MameWah, and any other emulator frontend that supports similar customization, using a free image editor called Paint.NET.

Just a quick note before I go on: I fully realize I'm on a forum whose members are mainly Linux users. Please don't flame me for mentioning a Windows image editor in this guide; it just happens to be an editor with which I'm familiar and comfortable. If you want to use G.I.M.P. or some other editor to design your layouts, then please knock yourself out. This guide assumes you have at least some experience using image editors and working with layers.

  • First, use Google image search to find a desktop wallpaper you like. Typing "abstract wallpaper" or "retro wallpaper" yielded very good results for me. You might even try "arcade wallpaper" or "game wallpaper" just to see what you find.

    I found this very simple, yet elegant, design. We'll use this for the guide.
    Image

    Once you've found one you like and have downloaded it to your hard drive, open it in your editor of choice. Re-size it to match your desktop resolution. This is done in Paint.NET by clicking on Image and then Resize... For this example I used 1024x768. This is your Background layer.


  • Add New Layer on top of your background. Now we're going to add some translucent boxes to the layout. These will serve as containers for things such as the game list and screenshots.

    In Paint.NET click the Rounded Rectangle tool, and make sure you have the Draw filled shape with outline mode selected (this is the dropdown icon next to the Tool selection on the toolbar. Pick a primary color you'd like to use for the border, and then a darker, semi-transparent, secondary color for the filler. You'll need to click the More >> button on the Color panel to access the transparency slider.

    Draw a rectangular shape anywhere you like. If you make a mistake, or don't like the colors you've chosen, simply undo (Ctrl-Z) the action and try it again.
    Image

    Draw a few more. As many as you like depending on the amount of different elements you'll be including on your layout.
    Image
  • Now would be a good time to add some clip art. Revisit Google image search and look for a transparent MAME logo, and maybe some optional buttons. I found a nice large transparent MAME gif by simply typing "mame logo".

    Add New Layer, and paste in the logo. Resize and reposition it however you like.
    Image

    Optionally, you can add a drop shadow to the logo to make it pop out. Paint.NET doesn't support this feature, so we'll have to improvise. Add New Layer behind the logo layer and copy the same logo to it, and offset it slightly down and to the right. Adjust the brightness & contrast levels (under Adjustments) all the way to black. Then add a Gaussian Blur (under Effects, Blurs). If all went well you should have something resembling this.
    Image


  • Starting to look pretty good. I'll add in some button clip art as well, employing the same drop shadow technique as above.
    Image

  • And Bob's your uncle. Save the final project as a PDN Paint.NET project file. Then save an additional JPG copy for use with your frontend.

  • If at any time you decide you want to change the background, you don't need to repeat all of the steps. Simply open the PDN project file you saved, and change only the Background layer.
    Image
    Image

    Pretty slick.

    And if you want to change the MAME logo to, say, a Super Nintendo logo, then you would simply change the layer containing your logo. Just keep in mind that whatever logo you use must be a transparent GIF or PNG file.


Of course, if you are the artistic type, then create your own background layer. If you decide to distribute layout artwork you made using a background created by someone else, then make sure you acknowledge the original artist where applicable. The example designs used in this guide were anonymously created, as far as I know.

Hope you all find this guide useful!
Last edited by codefenix on Wed Jan 04, 2012 4:16 pm, edited 1 time in total.
User avatar
codefenix
 
Posts: 219
Joined: Fri Sep 25, 2009 3:45 pm
Location: USA

Re: Custom Layout Artwork Guide

Postby sarahjohnson » Sat Jan 08, 2011 3:00 pm

Hello,

Yes this is helpful. nice efforts.


Sarah Johnson
Logo Designs Company
sarahjohnson
 
Posts: 1
Joined: Sat Jan 08, 2011 2:58 pm

Re: Custom Layout Artwork Guide

Postby Zombie » Sat Jan 08, 2011 9:40 pm

Given the layout master of the EmuChrist Layout, could you do a better Famicom Disk System layout?
User avatar
Zombie
 
Posts: 791
Joined: Mon Oct 06, 2008 2:52 pm

Re: Custom Layout Artwork Guide

Postby codefenix » Sat Jan 08, 2011 10:54 pm

I'd certainly be happy to try. Funny thing, I was just about to post a thread offering to take design requests. Guess you read my mind.

Give me an idea what you'd like as a background, and what dimensions you need, and I'll see what I can come up with.

EDIT: After re-reading the post, here's a rough draft of what I think you were asking for:
You do not have the required permissions to view the files attached to this post.
Last edited by codefenix on Wed Dec 14, 2011 2:27 am, edited 1 time in total.
User avatar
codefenix
 
Posts: 219
Joined: Fri Sep 25, 2009 3:45 pm
Location: USA

Re: Custom Layout Artwork Guide

Postby Zombie » Sun Jan 09, 2011 3:49 am

Did you see the one I had already? Its discollored, but it is on Wah!Ki.
User avatar
Zombie
 
Posts: 791
Joined: Mon Oct 06, 2008 2:52 pm

Re: Custom Layout Artwork Guide

Postby codefenix » Sun Jan 09, 2011 9:05 pm

I see it now, yes. The "Additonal" sections eluded me previously.

So... you basically asked for something that you already had.


...


...


...

Now what?
User avatar
codefenix
 
Posts: 219
Joined: Fri Sep 25, 2009 3:45 pm
Location: USA

Re: Custom Layout Artwork Guide

Postby Zombie » Mon Jan 10, 2011 4:07 am

No no no. You misunderstood my request. The problem was that the bottom layer had been turned red by the previous artist. I was wondering if you could use hte same logo from that image with the proper color schema. Don't worry about it, I'll use what you made already
.
User avatar
Zombie
 
Posts: 791
Joined: Mon Oct 06, 2008 2:52 pm

Re: Custom Layout Artwork Guide

Postby battlecat » Mon Jan 10, 2011 9:02 pm

Hello all: I am glad to be back in the USA and finally have time to get some work done. I wanted to say that this is a great tutorial and Thank you so much for posting it.
Battlecat
http://www.anti-particle.com - The *nix front end of choice.
http://www.twingalaxies.com - The Official Electronic Scoreboard
User avatar
battlecat
 
Posts: 339
Joined: Fri Aug 03, 2007 12:53 am
Location: Pennsylvania, USA

Re: Custom Layout Artwork Guide

Postby codefenix » Tue Jan 11, 2011 12:37 am

My pleasure! Thanks for the praise.
User avatar
codefenix
 
Posts: 219
Joined: Fri Sep 25, 2009 3:45 pm
Location: USA

Re: Custom Layout Artwork Guide

Postby Zombie » Thu May 05, 2011 6:45 am

I'd like to request artwork for the Atari 800/600XL/130E line of computers.
User avatar
Zombie
 
Posts: 791
Joined: Mon Oct 06, 2008 2:52 pm


Return to Wah!Cade

Who is online

Users browsing this forum: Bing [Bot] and 3 guests

cron