1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Problem Signing up?

    Please use the contact us link at the bottom of the site listing the problem with your email & ip addresses & the problem will be looked into by our admin team
  3. Temporary emails are not supported for signing up accounts on 3DS Chaos, this includes 10 minute emails. All will be detected by our system & the accounts will be deleted
  4. Shared accounts, multiple accounts & inappropriate usernames not allowed on our site

    Please use a legit email account from a reliable email provider, temporary email accounts are not allowed & will be rejected by our system

[TUTORIAL] - Create banners/icons for NES/GameBoy/GameBoy Color/GameGear/Genesis

Cha0s Em3rald Oct 18, 2015

  1. Cha0s Em3rald

    Cha0s Em3rald Chaos Immortal Staff Member Administrator

    Joined:
    Oct 1, 2015
    Messages:
    3,591
    Likes Received:
    77,557
    Trophy Points:
    148
    [TUTORIAL] - Create banners/icons for NES/GameBoy/GameBoy Color/GameGear/Genesis


    This guide was originally writen by davhuit of GBA Temp, credit & thanks go to him for allowing me to repost his guides on 3DS Chaos


    This tutorial is created as a standalone one because I plan to post injection tutorials for NES/GameBoy/GameBoy Color so for the banner part of those tutorials, I'll directly link to this thread, as the method is the same for near all systems (except GameBoy Advance which have it's own program to create the banner, too bad no one seems to have created a similar program for the other systems).

    1) First, you need Python Download python msi and Pillow Download Pillow win amd64 py2 exe installed on your computer.

    2) Download this archive : Download 3DSBanner Maker Modified Pack rar and extract it in a folder.

    3) Choose the image you'll use for the banner/icons (as original VC games, I use a screenshot of the title screen for most systems, except GB/GBC where I use the original cover).

    4) You'll find in the "cbmd_bannerImage" sub-directory several files (templates) :

    - nes_and_genesis-example.png
    - gameboy_and_gameboy_color-example.png

    So you have to resize the image you choose and paste it in the template for the right system. If you can't resize precisely to this resolution, uncheck the "keep ratio" option in your image editor to be able to do so (a few pixels off for the ratio won't be visible anyway). Here's the size you need to resize the image to fit the banner :

    NES/Genesis : 146x128 pixels
    GameBoy/GameBoy Color : 128x128 pixels

    I don't have a template for GameGear nor the size you need to resize the image to because I never done a GameGear VC game yet but it's pretty easy to find. Just take your image/screenshot and keep in mind the banner whole size should be "256x128" so the height have to be 128 pixels exactly. So, in your image editor, check "Keep ratio" and put 128 in the height and then it'll give you the width size. Let's say it give you 176 for example. To find how much blank pixels you need to add to the left/right, you just need to do (256 - 176) / 2 = 80 / 2 = 40 so you need to add 40 pixels to the left and 40 pixels to the rigtht of your
    image to create the template.

    Once your image is resized, you need to paste it on the right template and save it. You have to know that you need to keep the transparency of the white
    background (PNG). There are several ways to do that. I'm not really good with image editors so I have my own method (not very good for pros I guess, but it works fine so I don't really care).

    If you know how to edit an image and keep transparency (the white part) in an image editor, just avoid the spoiler tag to spare some times. Put the resized image on the template, keep transparency for the white and save the file.

    If you don't know at all how to do so, two solutions, either check google to see how to use transparency with a PNG file or follow my "weird" method, in the
    spoiler tag.

    Personally, I use Paint (the one you can find in Windows XP/Seven) and Paint Shop Pro 7. Here's my method for a NES banner for example :

    - In Paint, I load my template, for example : "nes_and_genesis-example.png" and keep Paint opened.

    - In Paint Shop Pro, I load my screenshot (title screen) and I resize it to "146x128" pixels (I uncheck "keep ratio" to be sure to have the good size, I don't
    mind the ratio to be a few pixels off, it won't be visible).

    - I copy-paste the resized image from Paint Shop Pro to Paint, then fit it on the template, at the right place.

    - I save the file in Paint with a new name, "name-of-the-game_banner.png", then I close Paint.

    Now, the image is created but the transparency is lost, so we'll reactive it :

    - I load the new created image, "name-of-the-game_banner.png" in Paint Shop Pro and go to "File => Save As" (F12).

    - In the save options, I choose "PNG" then I click on "Options => Run Optimizer".

    - Then, I click on the "Transparency" tab and choose those settings :

    * What type of transparency do you want : Alpha channel transparency
    * What area of the image would you like to be transparent : Area that match this color => White => Tolerance 1 (note that you can also use : "Outside the
    current selection", if the title screen have blank in it for example, it's up to you)

    - Then, click on OK and save the file again and transparency will be back.

    I guess you can do everything in Paint Shop Pro but when I first tried, I got some problems so I came up with this weird method and it's working so I stick to it as an habit.

    Once your template banner is ready, with transparency for the white part, save it/rename it "256x128.png" and put it in the "cbmd_bannerImage" subdirectory.

    5) The two others icons, 48x48 and 24x24 are easier/quick to do, as they don't require transparency but I still got problems with them so against, there's two method :

    - The pro method : Resize your image to 48x48, save it with the name "icon.png" in the "ctpk_48x48icon" subdirectory and it's done. Do the same for the 24x24, resize your image to 24x24, save it with the name "icon.png" in the "ctpk_48x48icon" subdirectory and it's done.

    - My method : Resize the image twice in Paint Shop Pro, one with a 24x24 size and the other one with 48x48. Load the icon.png file from "ctpk_48x48icon" in Paint and copy-paste the resize 48x48 image on it then save the file. Then, do the same for the other icon. Load the icon.png file from "ctpk_24x24icon" in Paint and copy-paste the resize 24x24 image on it then save the file.

    It's up to you to find the quickest/best method to convert your images to a proper format the converter will recognize.

    6) Once the images are created, put them in the right subdirectory with the right name if it's not done already :

    * Banner should be named "256x128.png" and go into the "cbmd_bannerImage" directory.
    * The small icon (24x24) should be named "icon.png" and go into the "ctpk_24x24icon" subdirectory.
    * The big icon (48x48) should be named "icon.png" and go into the "ctpk_48x48icon" subdirectory.

    In these three directory, you'll find a "convert.bat" file. Once your files are placed in them, just run the "convert.bat" file in each of these three directory
    to convert your images to the right format.

    7) Once it's done, go to the root of the directory of the tools and edit the "AppData.txt", pretty easy.

    Only modify the longtitle, shortitle and publisher lines, leave the others untouched.

    For example :

    longtitle="The Legend of Zelda - Link's Awakening DX (USA)"
    shortitle="The Legend of Zelda - Link's Awakening DX (USA)"
    publisher="GameBoy Color"

    "shortitle" can support long ones so except if your title is really really too long, I often use the same for both and never got any problem. If you have one, it
    mean the title is too long or use not-standard characters.

    Once the "AppData.txt" file is edited, save it and run the "_build_ICNandBNR.bat" file to finalize the banner/icons creation.

    It should create two files, one called "banner.bin" and another one called "icon.bin". Those are the two files you'll need to paste in the injection tools to
    have proper banner/icons.

    Once you'll have understand how to do banners, the rest of the injection will look like a peace of cake to do (except maybe NES ones but even NES ones aren't that hard).
     
  2. BK Switchblade

    BK Switchblade New Member

    Joined:
    Jan 21, 2016
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    If I were wanting to do this through an older version of python > verion 2.4 > the oldest version that will still work with pillow, how would I go about that? Would I need to edit some of the text in the image compression program or is there a simpler way to make it work with older PCs?
     
  3. Cha0s Em3rald

    Cha0s Em3rald Chaos Immortal Staff Member Administrator

    Joined:
    Oct 1, 2015
    Messages:
    3,591
    Likes Received:
    77,557
    Trophy Points:
    148
    Sorry but I'm not sure about that, I've always used 2.7, you could give it a try & see what happens