Game Design on the iPad - Making Graphics for Splinterlands!

avatar

thumb_gamedesign.jpg

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.

nav.jpg

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:

abilities.jpg

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.

cards.jpg

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.

workflow_gameart_inventory.jpg

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!

sigsteem_nateaguila.png



0
0
0.000
12 comments
avatar

Now I have a better idea about the process. Seems like the process is somehow not that easy looking at the creating, the design and so on. Much work put into it

0
0
0.000
avatar

I'm a huge fan of the Affinity programs. Since graphic design isn't my full-time job and just a hobby, I absolutely cannot afford, nor justify Adobe Photoshop and Illustrator. Those horrible subscription models cost thousands of dollars over a few years and it's horrible for any hobbyist to have to pay such a steep price designed for bigger corporations. Affinity really fills in the gap with their one-time payment of $60 per program on the desktop and $20 on the iPad. And since they just rolled out Affinity Publisher, all three programs run seamlessly together on the desktop. The only thing I wish it could do is the ability to switch from tablet to desktop in the same way.

0
0
0.000
avatar

Yeah, it’s such a good deal! I have no idea how they are able to pay for such great development when they ask for so little.

It’s definitely a bargain! Affinity is becoming a polished, robust ecosystem of high quality applications. And they definitely have a healthy lead when it comes to mobile features.

Posted using Partiko iOS

0
0
0.000
avatar

Thank you so much for participating in the Partiko Delegation Plan Round 1! We really appreciate your support! As part of the delegation benefits, we just gave you a 3.01% upvote! Together, let’s change the world!

0
0
0.000
avatar

Pretty interesting to see your design flow.
Would love to see more of the processes behind the scenes :)

0
0
0.000
avatar

Hi @nateaguila!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 5.252 which ranks you at #848 across all Steem accounts.
Your rank has improved 2 places in the last three days (old rank 850).

In our last Algorithmic Curation Round, consisting of 154 contributions, your post is ranked at #145.

Evaluation of your UA score:
  • You've built up a nice network.
  • The readers like your work!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server

0
0
0.000
avatar

Very interesting, you're doing some great work when it comes to the design. Would love to see more posts like this... I can certainly learn a lot from watching you.

0
0
0.000