Making Field App Graphics (Patreon)

I've finally caught up with updating all of the older field graphics, so today I thought I might show you all how I make these. The answer is that Graphics Gale is a wonderful program. Let's start. 

So I have a folder like this which has not only all of the field graphics (note they are all at 1x resolution for ease of editing instead of the 2x resolution the game uses; we'll fix that later), but it also has .gal files (GG's native file) which contain templates for every field. 

http://prntscr.com/e5g9i0

I've already copied New World's to reuse for Psychic Terrain, so I'll show you how it's built. The main thing that .gal files offer over other types is that they are able to save layer data. Here's our layers for this file:

http://prntscr.com/e5ga02

Wow, that's a lot! I'll explain them:

• FE35 P[3/2/1] are the pages that actually have the text and attributes on them. Each one is a different page as you can click through it in the Field Note App. I'll change the 35 to 37 since 35 is New World, but we need 37 for Psychic Terrain (36 was Inverse which only has one page so it'd be tedious to use that template when we need multiple pages).
• The Visuals layer contains everything I might need to copy and paste onto the attribute pages. It looks like this-- http://prntscr.com/e5gap2 . This layer never appears in the app itself but I made it so I could easily copy and paste these things within the same file.
• The MORE Markers layer is the little stars you see on the side. http://prntscr.com/e5gb0h I use these to indicate where the player can click for more information about an attribute.
• NextBack has the Next/Previous arrows at the bottom of pages. When I need to save a page that doesn't have one or the other, I just delete the other side for a moment. http://prntscr.com/e5gb9f
• This is the Frame. http://prntscr.com/e5gbdh You've seen it before. The center part is transparent so that we can see the background through it.
• Skipping to the end, here's what the Background looks like alone: http://prntscr.com/e5gbkc It's positioned to fit into the frame perfectly. However, if we just left it as is, it could be hard to read the attribute text against some backgrounds. That's why we have
• The Transparency Layer: http://prntscr.com/e5gbx0 It fits in between the frame and the background to darken it, making the background subtle enough to be cool, but not distracting enough to be unreadable. We use GG's alpha-feature for this: http://prntscr.com/e5gc4e . If we didn't have this layer, here's how it might look: http://prntscr.com/e5gcaz ....pretty messy. And with it on for quick comparison- http://prntscr.com/e5gcdl 

Now that we've got all our layers lined up, let's start building in Psychic Terrain.

First, we'll bring in Psychic's background which we already made (and you can see how in a previous tutorial!) Here it is behind the frame: http://prntscr.com/e5gd10 and with the frame: http://prntscr.com/e5gd4v

Then I'll go ahead and clear our attribute pages, giving us a blank slate: http://prntscr.com/e5gdc0

Time to input the data. Using GG's font tool, I have a preset font saved so that I can automatically keep the text consistent all the time without having to memorize or fuss with settings: http://prntscr.com/e5gdwg

Each page on the field app has 8 rows for attributes. I can put all 8 in at once here. The text should be aligned two spaces from the bottom of each row, two spaces from the left of the frame, and should always have at least one space to the right edge. Let's see it: 

• Page 1- http://prntscr.com/e5guvj
• Page 2- http://prntscr.com/e5gwnc
• Page 3- http://prntscr.com/e5gwwr

and no, the field did not """"""get weird."""""

Note I try to keep these attributes in a fairly predictable order. It is not always followed to the letter for various reasons but in general it goes:

• Intro text
• Main field gimmick
• Field creation
• Boosted moves/types
• Misc
• Transformations/destructions
• Nature Power/Camouflage/Secret Power/Seed

Anyway, it's lookin' pretty barren here. One of my goals when I contrived this system was to present fields in as intuitive and as visually interesting of a way as possible. To that effect, I wanted to use the canon icons, type buttons, color coding, etc as much as possible. I left room for it here (about 10 spaces for a type symbol, 6 for most of the others). I try to have a color or symbol in every single line. Now we'll add that into each page. 

We pop open the Visuals tab, and just do some quick reorganzing http://prntscr.com/e5h3yo

What I tend to do here is copy paste everything from the Visuals layer back onto the Visuals layer itself just so I don't have to keep clicking back and forth. Then when I'm done, I'll select and cut the entire text area and then paste it back onto the right layer all at once. 

And then the text. A keen reader will have noticed from the previous screenshots that I have text presets for every color in the field app. We'll just draw over it and drag it into place, like so.

http://prntscr.com/e5h3hr

As for the colors themselves, you can probably already tell this but I think of it this way-

• Green: This effect and this field are totes buddy-buddy and you would do well to hit 'em up
• Red: You should probably think twice about using this effect on this field (unless you're an anarchist and want to destroy everything)
• Yellow: This is for 'field language' stuff, so the player knows okay "Chess Attacks" are some kind of special thing in this game.

So here's the page. http://prntscr.com/e5h4nn We'll do this for the other two now. 

• 1- http://prntscr.com/e5h7lu
• 2- http://prntscr.com/e5h7nd

Now we're nearly done. I'll prepare to save these pages. This is where we flick on the MORE Markers

http://prntscr.com/e5h8ga

They're kind of just wherever right now, but we need to move them to the lines that have more to talk about. Fortunately it only takes a second to move these thanks to GG's custom grid and snap feature. 

Here's a custom grid on the image. http://prntscr.com/e5h8mc It's 256 x 16, and matches up with our rows perfectly. When we select to have our markers snap to this grid, we can easily just pop them into any other row in a hot second. 

http://prntscr.com/e5h8w7

The grid lines won't save to the image, so we're all set. Note I had to make sure to include these markers even on a couple lines where I didn't have room for the typical "..."s. Sacrifices have to be made for space. 

With the NextBack flicked on, we have a completed page: http://prntscr.com/e5h91u

We repeat that for the last couple pages and are done-- almost! 

The one thing left to do is to take these up to a 2x resolution like we mentioned before. These are all the files that have been modified for all of the fields in this cycle. And again, since Graphics Gale is the primadonna of get'er-donna, it'll only take a second.

I'll just open the program and go to File > Batch Conversion. Then there's just a few options to click through-- input, output (always make sure to keep backups or output to a separate location, kids!)... but the real treasure is here: http://prntscr.com/e5ha7f

Pull the lever, Kronk. 

And voila! all the files are the right size and ready to go. We're done here!