Calling All Spriters!

[shadowofchaos]

The finished product next to Eliwood has a bunch of shading problems though >_>

[Hero]

Even if the "finished" sprite is not completely technically correct, it's closer than the other example. I would say it doesn't have as much spirit, though.

I think Koi went a step too far in making the sprite look typical of Fire Emblem. So long as everything looks clean and the shading is right, I don't see any virtue in blandness.

Edited December 19, 2009 by Hero

[Lord Glenn]

I've been meaning to post up this tutorial since the topic was first created, so it might need a slight bit of updating in the future. If it does, I'll simply edit it in to the bottom of the post.

Custom Weapon Icon Tutorial

Table of Contents:

- Chapter 1: Getting Started

- Chapter 2: Setup and Line art Phase

- Chapter 3: Flat Colors and Shading

DISCLAIMER:

This tutorial will showcase a way to construct Fire Emblem style weapon icons from scratch. NOTE: This tutorial is largely focused on creating weapon icons in the style used in the three GBA titles. Icons in the style of FE4, FE5, or FE11 can be constructed in a similar manner, though shading conventions and the exact palette used in those respective games may be different. Icons for FE9 and FE10 are not covered in this tutorial.

Please bear in mind that this guide is not 100% accurate to the exact way that Intelligent Systems stylizes their weapon icons. Many icons are inconsistent with one another within the same game, so there may be a few things that my personal style may not completely reflect upon (for whatever reason). I have tried to be as objective as possible in this, limiting the use of as much of my personal stylings as possible.

Also, while I realize that weapon icons aren't the most impressive sprites conceivable, they really give your other sprite works (such as battle scenes or statsheets) some unique flair and are instrumental in avoiding reusing old, bland icons from the games for weapons that aren't suited for them (especially if you're creating new weapons in a hack).

CHAPTER 1: Getting Started

Before getting into creating a weapon icon from scratch, as a spriter, you'll want to have a few resources before beginning.

- MS Paint or equivalent program

-- I've written this from an MS Paint perspective, as it's largely the most common program that spriters are using. While I personally use Jasc/Corel Paint Shop Pro (depending on the version), a high-level image editing tool is NOT required to sprite weapon icons, though these steps can be adapted for most other programs.

- Reference set of game-used icons

-- I personally use Ice Dragon's NA!FE8 Symbols sheet as my reference set whenever I need to check something against how an icon appears in one of the games. While it doesn't have ALL of the icons from the three GBA titles, it has enough that it should get you by. (You can always go to each individual game's page on SF's main site and reference/download any of the other icons that you need.)

- Weapon icon palette (Possibly OPTIONAL)

-- Depending on what you are individually spriting weapon icons for (be it a mock battle scene, mock statsheet, or as icons to be inserted into a hack), this may or may not be required. For icons being inserted into a hack, this is a mandatory step. I've provided the FE6/7/8 weapon icon palette here, as it will need to be used to ensure that your icons are game-insertable (assuming that the palette hasn't been altered intentionally). If you're working on an icon that is for mock-up purposes, you are free to use whatever colors you choose, though sticking to the official style and palette does help if you wish to transition to doing work for a hack.

CHAPTER 2: Setup and Line art Phase

To start spriting a weapon icon, begin with a 16px by 16px box colored in a color of your choosing that isn't part of the palette you plan to use for the icon. Avoiding colors that are similar to the ones in the palette also helps, in order to distinguish colors in the icon from the background. If you're looking for a good starting background color, the one used in Ice Dragon's reference set is a place to start.

(For the entirety of the tutorial, I have provided images in both regular magnification and 8x zoom flavors, so that you can see what the icon would actually look like, as well as actually seeing what I've done in each step.)

Now, depending on what I'm spriting, I either free draw or have a reference image pulled up. Now is the time to decide, and have that ready to go. For this tutorial's sake, I'll be free drawing a Lance-type icon. Always remember to keep in mind what kind of icon you're spriting and remember that the reference set is always there if you need to see examples of existing icons.

At this point, begin by selecting the black color of the palette (RGB 40, 56, 32) as the primary color. You'll likely want to zoom in on the image for better control (8x is probably the best way to go). Once the size is to your liking, select the Pencil tool and begin placing individual pixels in line art fashion. Consult the reference set of icons for basic shaping and design structures if you find that placing pixels by instinct isn't looking quite right.

Weapon icons CAN use the entire 16x16 canvas, though icons in FE6/7/8 tend to avoid this unless it is absolutely necessary. For the most part, the official icons stick to the inner 14x14 pixels (1 pixel border around the outside of the area), though they will stray and touch a side here and there (for best results, consult the reference set).

I finished free drawing (once I got something interesting and close to what I wanted), and came up with this as my icon's line art:

Depending on what you're spriting and how your creative flow is, it may take tens of minutes to even an hour to get line art shaped how you want it.

CHAPTER 3: Flat Colors and Shading

With your completed line art ready to go, begin filling areas with the lightest shade that you want to go in that area. The reference set should provide you with enough general pairings of shade sets (for instance, the white shade, the light blue shade, and the darker gray-blue often tend to be paired together for blade shading) to get an idea of what the lightest shade will be for an area of the icon. If anything design-wise starts to appear off as you're filling in the flat colors, remove them (by Penciling the background shade over them) and alter the line art until you feel that you're ready to add the flat colors again.

(As you can see, I slightly altered the butt of the spear between Image 2 and Image 3 once I decided that, design-wise, the lance didn't really fit what I was aiming for.)

Once everything looks right with the line art and the flat colors, begin adding in the other shades in the shade sets, while trying to match the shading conventions shown in the reference set. At this stage, you may realize that some of Intelligent Systems' conventions are shaky and in need of improvement. If you choose, now would be the time to stray from their conventions and shade things more naturally. Whatever you decide to do, make sure the icon looks right at normal zoom before you finish. If anything looks odd or needs fixed, jump back to Chapter 2 and work on the line art and flat colors (unless it's merely a shading issue, whereby you can just play around with the shading pattern or colors).

And now, we have our finished result:

As you can see, I've shaded the middle of the lance's tip with the darker gray-blue shade and shaded the bottom of the tip with the lighter blue shade. The "wings" to the sides of the shaft are shaded in reference to the shading on the Poison Sword icon (darker gray-blue matching to the brown and red matching to the reddish-grey color). The piece in the center of the wings is shaded in reference to the color scheme pairing on the outside of the Bolting tome. The shaft is shaded instinctively using the red shades found on the Poison Sword icon. Once the inner shading is done, make sure that you edit the outline shading by incorporating the brown shade in places (generally for wood, such as lance shafts (unless they have brown in them, in which case I personally use the other outline shading color to avoid blending the inner shading with the outline shading)) or by using the dark purple shade. It would be a good idea to use the reference set here for examples, depending the kind of icon you're working with.

Different types of icons have different general patterns and structures, so use examples as a guide if you're working with an icon that fits a bit outside of the spectrum given here (magic tomes and staves, item icons, new weapons that might fall under a new designation, etc.).

Hopefully, someone finds this useful. Weapon icons aren't the most challenging sprites to make by far, but you'd be surprised at how much detail you can actually fit into a 16x16 sq. pixel box. And, always remember that the reference sheet is there for shading and design examples, if you need them. As with most kinds of spriting, practicing by continuing to update older icons and spriting new icons will only allow you to get better. Your icons might not perfect when you start, but as you work on them more, they'll start to get flashier and better proportioned.

[Loki Laufeyson]

Hey folks, is there a tutorial somewheres about creating conversation animations? (you know, character convos)

If so, excellent. Please post.