Tutorial Pokemon Trainer Card Tutorial

Discussion in 'Help' started by Boy Wonder, Jul 4, 2011.

  1. Boy Wonder Dark Phoenix in Training

    Joined:
    Aug 31, 2008
    Gender:
    Male
    Location:
    Genosha
    2,239
    [​IMG]


    This is my first tutorial so it'd be a fairly simple one. In fact, the main purpose of this one is for people in my Pokemon RP lol.
    Anyway, things we'll be covering:

    • Where to get Gimp
    • Where to find Trainer Cards
    • How to make a Trainer Card using Gimp.
    • How to save it so you can change your party and badges later on.
    Think of Gimp as a free version of Photoshop. I personally have Photoshop but I understand that not everyone has it or can afford it, so I'm going to use Gimp for this tutorial.

    But Red Robin, why do we need Trainer Cards, you may ask.
    Well, for my RP, it's not mandatory, just a fun little thing another member (Bushy-Brow-1992) decided to do and we all followed. For my RP, I'll be using mine as banners, images that accompany every post. You can use them as banners, simply to show what Pokemon your character have, or just for fun! Anyway...here you go~


    Step 1
    Have images of your character and Pokemon ready (or at least an idea of what Pokemon you want to use).

    Note: I go through this tutorial assuming that all of your images are rendered. That is to say that it's only a figure and no background. There are a few ways to render images. I personally use Photoshop and Magic Wand selections then erase or CTRL+X them. Gimp does it, too, but it's called Fuzzy Select. If you have no idea what I'm talking about right here, then I will try to render images for you, but I'm not much of an expert on it. Simply ask and post your images you wish to render. Pokemon images from Bulbapedia (and I assume Serebii) should already be rendered so Copying them directly (Right Click->Copy Image) should work.
    Step 2
    If you don't have Gimp already installed, download it here.
    Install it and, once you're done, open it.

    Step 3
    Find a blank Trainer Card online. Ideally, you want one that's completely blank, without gym badges, Pokemon, or anything else. You can google it, Photobucket it, whatever. I personally used Google and I found this very nice collection.
    Here, I'll be nice and give you another selection of Trainer Cards.
    I will be using three different cards.
    [​IMG]
    This one is for my main character, Castiel, who will start out with an Elekid, Turtwig, and a Pokemon egg.

    [​IMG]
    This one is for my G-Men (Pokemon Police Officer). This one is ideal because, in my RP, G-Men can only have three Pokemon instead of six. This card has no Pokemon slots like the last one so I don't have to worry about having extra slots leftover. My character, Black/NP3228, will start with a shiny Bisharp, Anorith, and a Pansage.

    [​IMG]
    I'm going to use this one for my main bad guy, Zelos. Zelos' Pokemon Party is going to stay secret (well, part of them), so I'm going have some Pokemon blacked out to keep their identities secret until he uses them.

    Before we go any farther, I want to state that there are very different styles you can go about for these cards. In fact, most people use sprites for theirs, but I'm going to use a mixture of sprites and actual images. In the end, it's all up to you.

    Step 4
    Find the image of the Trainer Card you want to use and right click it. Depending on your browser, it'll say different things. You want to click what says 'View Image Info' or 'Properties,' whatever brings up the dimensions of the card. Castiel's card for me is 228 x 147.
    In Gimp, click 'File,' and then 'New.' Change the Width and Height to match your card's dimensions. Also, in Advanced Options, change the Fill with to 'Transparency.' Finally, click OK.
    Click here to see!
    Also, if you don't have the 'Layers' Window open with Gimp, press Ctrl+L. (Or go to Windows, Dockable Docks, Layers).

    Step 5
    After the new document in Gimp, you should see a gray checkered box.
    [​IMG]
    Go to the image of your trainer card, right click, Copy Image, go back to Gimp, and either Ctrl+V or Edit->Paste. In the Layers Window, right click the 'Floating Selection/(Pasted Layer)' and click on Anchor Layer. You should also click View->Zoom->Zoom in as many times until you get a good view. I did it twice.

    Step 6
    These next few steps can be done in any order.
    Now, I'm going to put in my character's image. For Castiel, I'm using Hilbert's image. Hilbert is actually the person you play as in Pokemon Black/White. Who names their kid 'Hilbert,' right? Anyway, find the image of your character, right click, and copy it, just like you did with the Trainer Card.
    Back in Gimp, press Shift+Ctrl+N (or go to Layer->New Layer). Make sure the background is also on 'Transparency.' If I were you, I would also name the Layer whatever your character's name is. Click OK and then paste your image in the new layer.
    Chances are that it's too big (at least mine was) so we're going to shrink it. In the Toolbox, you can find the Scale Tool. It looks like a small blue window with an arrow going out of into a bigger blue window.
    [​IMG]

    Click on the Scale Tool and then hold Ctrl. While holding it, scale down your character image. Holding Ctrl keeps the proportions the same. You might have to select the Move Tool (the Cross looking with arrows on all ends in the Toolbox, Up1 and Right1 from the Scale Tool) and move the character image back onto the Trainer Card. I had to alternate between Scaling and Moving until it was in the right spot and right size. When you get to the size you need/want, simply move your image to where it goes.

    Now this is where I'm doing something for my personal Trainer Cards. For Castiel, I used two images for him, both from the game. Having more than one image really depends on the kind of image you're using. Since I'm using an actual character and not a random drawing or image, there's plenty of images of him. I made a new layer, put an image from the game (Castiel's back), pasted it, scaled it, and moved it behind the first image (I moved the layer down by pressing the green 'down' arrow in the Layer window). Then I blurred and darkened it a bit (both found in the bottom row of the Toolbox). Then I right clicked the top layer and Merged Down to make both Castiel layers one single layer. This entire part is optional.
    Here's what I have so far:
    [​IMG]

    Step 7
    Here's where I added my character's name. Click the big bold 'A' in the Toolbox and make a box big enough so you can type your character's name. I used the full name "Castiel Nuvola." You can change the font color and size in the toolbox as long as the Text Tool is selected. You can experimented with different things if you want, but I'll leave that up to you. When you're done with the text, you can move it to where you want it. Here's what I have:
    [​IMG]

    Step 8
    Now for the part we've all been waiting for: Putting in the Pokemon.
    As I said earlier, Castiel starts out with an Elekid, a Turtwig, and an Eevee egg. I'm going to use a generic Pokemon egg for Eevee instead of it's specific one for various reasons. Make a new layer (you're going to make one for each Pokemon you want to use in your party) and name it after the Pokemon you plan on using.
    This part is optional but it's what I'm doing. Most people will use the sprite of the Pokemon in place of an actual picture. I'm going to use both to see which looks better in the end. So I will use two layers for each Pokemon instead of one.As with every image we've used so far, copy and paste it into the new layer, scale and move, then anchor if it's still 'floating.' Regardless of whether you're using a sprite or picture, it is not necessary to have the entire image in the card. If you want to erase anything, click the Eraser, change the brush to a square one, and erase everything you're leaving out (It's best to zoom in while you do this).
    If you're using both pictures (an image and a sprite) like me, make a new layer and add in the Sprite. In the Layers Window, you can click the eye next to each layer to make that layer invisible. This will help you decide which picture looks better. I like the image better so now I'm going to delete the Sprite layer.

    Step 9
    Repeat Step 8 for all of your Pokemon.
    This was my Trainer Card with my character's image(s), three Pokemon, and his name.
    [​IMG]


    Step 10

    Get fancy with it. Here's where you do anything you want to do, add whatever, make some effects, etc. For example, since I'm going to have a Shiny Eevee after it hatches, I'll add some stars around it's picture. Once I get a badge, I'm going to put its picture of the badge at the bottom where it goes. Also, since my character is a Shiner (which is something specific to my RP), I'm going to put the Shiner symbol in the corner of his image. For my bad guy, I'll use the bad guys' symbol, etc. Make sure you use a new layer for everything you add.

    Step 11 (Optional)
    This step is completely optional and is just a fun little thing I would do. For those of you who've played Pokemon Black/White, you know about the Xtransceiver (Pronounced "Crosstransceiver" apparently) which is a cell phone/watch/communicator thingy. I'm going to add mine to my Trainer Cards. First, get an image. I'll help you.
    Here's the image
    [​IMG]

    Image is a little sloppy, but eh, I'm lazy.
    As always, new layer, copy, and paste. If you want to change the color, that's up to you. I'm leaving mine blue.
    Just for the sake of this step, I made every other layer invisible.

    Step 12 (Optional)
    Get an image of your character (which works great for people with actual characters like me because there's plenty of pictures.) Copy and paste it into a new layer. Scale and move it over the screen of the Xtransceiver. If you notice that your picture may stick out from the image a bit too much, you can experiment with it. I blurred the edges and lowered the opacity to 85. Merge down when you're done and make the other layers visible again~

    Step 13 (Optional)
    Click Image->Canvas Size and increase the width by 115 if you want to put the XTransceiver on the side. If you want to place it above or below your Trainer Card, increase the height by 150. (You might have to play with these settings because of the size of the XTransceiver image.) You could also rotate the XTransceiver layer and place it sideways on top or bottom. (and you would only have to increase height by 115). If both height and width increase when you're only changing one, click the chain next to these two and 'break' it.
    Anyway, before clicking Resize, in the preview of your image, drag the image to where you want it and leave a space where you want the XTransceiver to be.
    Click Resize and drag the XTransciever layer to the blank part.
    If there's still a large blank space, keep playing with the settings.

    Step 14
    Now back to the parts that aren't optional. Go through each layer, right click each one, and click "Layer to Image Size" for each one. You can fine tune by erasing some stuff from the XTransceiver layer around the edges. If you zoom in far enough, you'll see some white around it. Get a round brush, shrink it down, and erase~

    Step 15
    NOW, you should have a good number of layers. I have nine, from top to bottom:

    1. XTransceiver (If you decided to follow Steps 11-13)
    2. Shiner (which is the symbol specific to my character. You may or may not have a layer here at all).
    3. PKMN 3 Sprite (which for me is the sprite of the egg)
    4. PKMN 2 Sprite (which for me is the sprite of Turtwig)
    5. PKMN 1 Pic (Which for me is the image of Elekid)
    6. Character Name (Which for me is Castiel Nuvola)
    7. Character Image (Which for me is two different images merged into one layer)
    8. Background (Which is the Trainer Card with a blank space to the right below the XTransceiver)
    GO TO FILE->SAVE AS. Save it wherever you want to (I have a folder myself for RP related material), but make sure you save it as a .xcf file. This is Gimp's native file type and will allow you to come back and change stuff around. More on this later.
    After you save it as an .xcf file, right click any layer and click 'Merge Visible Layers.' Select "Clipped to image" to be safe and then click Merge.

    Go to File->Save as. Save it wherever you want, but this time as an actual image. I personally use .png, though I don't know much of the difference. If a little box pops up, just select OK.

    Now you can go to wherever you upload pictures (I use Photobucket) and upload it.

    Step 16
    Probably the most important thing I have to say here so listen up. Over time, your Pokemon party may change (due to catching, evolving, trading, whatever) or you may receive a badge. So what you do is open the .xcf file. Make New Layers for your new Pokemon and badges and make the other layers invisible (the Pokemon you are taking out of your party). Save the .xcf file again.
    Then Merge Visible Layers again and save it as an image file (I use .png) then reupload it. Because you have invisible layers, a little window will pop up. Click Merge Visible Layers and make sure 'Save Background Color' is select in the next window.

    There you go, you should be good to go!
    Here's my final result (I'll post my other two when I get to them):
    [​IMG]

    Share yours!
     
  2. Bushy "Don't think. Imagine!"

    Joined:
    May 27, 2008
    Gender:
    Male,
    Location:
    On the other side of the internet.
    750
    Yo people!
    A lot of people have already seen mine! But here:



    Mine and Bueno's (Red Robin's) cards are different in style, but yeah lol.











    Anyway, to help Bueno (Red Robin) out.
    If you have problems rendering like Step 1 says, (although please try first, don't just be lazy and just send us images to do for you.)
    You may also ask me for help with that.


    PS: Bueno, love the trainer card(s)!
    XD
    Yours look awesome.
    Even I may have to edit my own a little to get them up to par with yours. :P