I think it will be fun to give a glimpse into my work flow now and then. It's never boring in the land of Splinterlands, and I often find myself tackling a wide variety of creative tasks.
A huge chunk of my responsibility is UX/UI, however there's a LOT of design needed just to support that. Stuff like branding, copywriting, backgrounds, animations, and graphics. Now and then, I'll try to share a sliver of the creative process for those who are interested.
So one of the things that a game like Splinterlands will always need is game art. More specifically, small graphics that represent abilities, combat rules, and navigation buttons. We don't have the huge resources of a major game studio, however I think it's worthwhile to step up our production quality at every opportunity. And that means doing what we can to add bits of flavor and character to even the smaller aspects of the game.
Right now, we have a mix of raster and vector based digital art. Raster = painting with pixels. Vector = shapes based off mathematical formula. The first one (raster) feels very intuitive and natural for most artists (once they get used to using a screen and stylus instead of a pen and paper). Vector has a slightly higher learning curve, but the pay off is well worth it if you're creating game art.
Vector is cool, because it opens up so many possibilities. Scalability, quicker load time, animation, and perfectly clean lines. Little by little, we are introducing vector art to open up a more polished game experience in the future.
One of the tools I utilize to create vector art is an app on the iPad called Affinity Designer. It's basically like Adobe Illustrator...but natively developed to work flawlessly on the iPad. It's a beautiful program. You can also get it for desktop.
I highly recommend it if you want the benefits of vector while maintaining the user-friendliness of raster-based art. If I ever feel like I can produce better art with a stylus than a mouse, I find a comfortable place to sit, pump up One Republic on my ear buds, and go to town with Affinity Designer.
For example, let's look at some of the graphics created for the newer Orb cards:
The trick is to add enough detail to make it exciting, yet simple enough to use at very small sizes. It's possible that one day we may wish to make these icons large and impactful. However, we can't ignore the fact that the ability icons are usually very small. Players must be able to identify the icon easily when they glance at the card. So there's always a balance to keep in mind.
For these particular icons, the Repair ability drives me crazy. Holy crap, I hate going up against a Life team with that annoying Hammer Guy. Ugh!
On the other hand, don't mess with my Skelly Archer. I always try to squeeze him in when I can. He's fun to play.
To give you a better idea of the process, here's a few screenshots of a graphic I made last week. This one is of an Inventory Bag, an idea I had for the mobile app. It's quite possible that this doesn't even make it into the final design of the app. But that's okay, because that just means I can use it for something else down the road. So don't be surprised if you see it pop up as an Ability or Combat Rule icon instead, haha.
Once I finish a design in Affinity Designer, I bring the vector into Adobe Illustrator (on my laptop). From there, I make any final tweaks and optimize it for export as a PNG or SVG.
The story doesn't end there though...I'll usually then plop the newly-exported image into a UI layout in Adobe XD. But hey, that's another post for another day.
Hope you enjoyed seeing some of the work that goes into making the game. I definitely enjoy creating it!
Now go play some Splinterlands!