create account

Game Design on the iPad - Making Graphics for Splinterlands! by nateaguila

View this thread on steemit.com
· @nateaguila ·
$4.07
Game Design on the iPad - Making Graphics for Splinterlands!
![thumb_gamedesign.jpg](https://files.steempeak.com/file/steempeak/nateaguila/n8JJrt8Y-thumb_game-design.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](https://files.steempeak.com/file/steempeak/nateaguila/P91VQ7ud-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](https://files.steempeak.com/file/steempeak/nateaguila/JJNTYfVq-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](https://files.steempeak.com/file/steempeak/nateaguila/QNn5IAhq-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](https://files.steempeak.com/file/steempeak/nateaguila/a1qRZiSs-work-flow_game-art_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](https://files.steempeak.com/file/steempeak/nateaguila/mZTAp4kO-sig-steem_nateaguila.png)
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 599 others
properties (23)
post_id79,008,459
authornateaguila
permlinkgame-design-on-the-ipad-making-graphics-for-splinterlands
categorysplinterlands
json_metadata{"app":"steempeak\/1.14.15","format":"markdown","tags":["splinterlands","spt","steemmonsters","palnet","steemace","battle","creativecoin","gaming","art"],"image":["https:\/\/files.steempeak.com\/file\/steempeak\/nateaguila\/n8JJrt8Y-thumb_game-design.jpg","https:\/\/files.steempeak.com\/file\/steempeak\/nateaguila\/P91VQ7ud-nav.jpg","https:\/\/files.steempeak.com\/file\/steempeak\/nateaguila\/JJNTYfVq-abilities.jpg","https:\/\/files.steempeak.com\/file\/steempeak\/nateaguila\/QNn5IAhq-cards.jpg","https:\/\/files.steempeak.com\/file\/steempeak\/nateaguila\/a1qRZiSs-work-flow_game-art_inventory.jpg","https:\/\/files.steempeak.com\/file\/steempeak\/nateaguila\/mZTAp4kO-sig-steem_nateaguila.png"]}
created2019-08-13 10:42:18
last_update2019-08-13 10:42:18
depth0
children12
net_rshares12,103,087,824,623
last_payout2019-08-20 10:42:18
cashout_time1969-12-31 23:59:59
total_payout_value3.098 SBD
curator_payout_value0.974 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length4,366
author_reputation36,215,033,301,240
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars0
author_curate_reward""
vote details (663)
@adedapo-glory ·
$0.01
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
πŸ‘  , ,
properties (23)
post_id79,008,863
authoradedapo-glory
permlinkre-nateaguila-pw6984
categorysplinterlands
json_metadata{"tags":["splinterlands"],"app":"steempeak\/1.14.15"}
created2019-08-13 11:00:06
last_update2019-08-13 11:00:06
depth1
children2
net_rshares91,388,821,280
last_payout2019-08-20 11:00:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.007 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length160
author_reputation862,095,852,155
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries
0.
accountlikwid
weight10,000
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (3)
@nateaguila ·
There’s definitely steps involved!

Posted using [Partiko iOS](https://partiko.app/referral/nateaguila)
πŸ‘  ,
properties (23)
post_id79,019,179
authornateaguila
permlinknateaguila-re-adedapo-glory-re-nateaguila-pw6984-20190813t172043592z
categorysplinterlands
json_metadata{"app":"partiko","client":"ios"}
created2019-08-13 17:20:45
last_update2019-08-13 17:20:45
depth2
children0
net_rshares9,789,453,327
last_payout2019-08-20 17:20:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length103
author_reputation36,215,033,301,240
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@likwid ·
likwid-comment-1566298931948
This post earned a total payout of 0.025$ and 0.019$ worth of author reward which was liquified using @likwid. [To learn more.](https://steemit.com/steem/@likwid/announcing-likwid-the-reward-liquifier)

properties (22)
post_id79,247,436
authorlikwid
permlinklikwid-comment-re-nateaguila-pw6984
categorysplinterlands
json_metadata{"app":"likwid"}
created2019-08-20 11:02:12
last_update2019-08-20 11:02:12
depth2
children0
net_rshares0
last_payout1969-12-31 23:59:59
cashout_time2019-08-27 11:02:12
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length203
author_reputation21,324,992,587,926
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries
0.
accountsteemium.vote
weight10,000
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@stephen.king989 ·
$0.03
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.
πŸ‘  , , ,
properties (23)
post_id79,009,439
authorstephen.king989
permlinkre-nateaguila-pw6as2
categorysplinterlands
json_metadata{"tags":["splinterlands"],"app":"steempeak\/1.14.15"}
created2019-08-13 11:33:39
last_update2019-08-13 11:33:39
depth1
children1
net_rshares95,738,831,235
last_payout2019-08-20 11:33:39
cashout_time1969-12-31 23:59:59
total_payout_value0.024 SBD
curator_payout_value0.007 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length681
author_reputation24,111,388,580,716
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (4)
@nateaguila ·
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](https://partiko.app/referral/nateaguila)
πŸ‘  ,
properties (23)
post_id79,019,128
authornateaguila
permlinknateaguila-re-stephen-king989-re-nateaguila-pw6as2-20190813t171829179z
categorysplinterlands
json_metadata{"app":"partiko","client":"ios"}
created2019-08-13 17:18:30
last_update2019-08-13 17:18:30
depth2
children0
net_rshares9,891,359,385
last_payout2019-08-20 17:18:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length376
author_reputation36,215,033,301,240
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@partiko ·
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!
properties (22)
post_id79,010,953
authorpartiko
permlinkre-game-design-on-the-ipad-making-graphics-for-splinterlands-20190813t123013
categorysplinterlands
json_metadata{"app":"partiko"}
created2019-08-13 12:30:15
last_update2019-08-13 12:30:15
depth1
children0
net_rshares0
last_payout2019-08-20 12:30:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length213
author_reputation38,705,954,145,809
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@criticalthinkin ·
$0.03
Pretty interesting to see your design flow.
Would love to see more of the processes behind the scenes :)
πŸ‘  , , ,
properties (23)
post_id79,011,719
authorcriticalthinkin
permlinkpw6emg
categorysplinterlands
json_metadata{"tags":["splinterlands","battle"],"app":"battlegames\/0.1"}
created2019-08-13 12:56:42
last_update2019-08-13 12:56:42
depth1
children1
net_rshares91,660,253,893
last_payout2019-08-20 12:56:42
cashout_time1969-12-31 23:59:59
total_payout_value0.023 SBD
curator_payout_value0.007 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length104
author_reputation4,398,791,055,950
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (4)
@nateaguila ·
I’ll definitely try to post more about behind the scenes stuff!

Posted using [Partiko iOS](https://partiko.app/referral/nateaguila)
πŸ‘  ,
properties (23)
post_id79,019,149
authornateaguila
permlinknateaguila-re-criticalthinkin-pw6emg-20190813t171944238z
categorysplinterlands
json_metadata{"app":"partiko","client":"ios"}
created2019-08-13 17:19:45
last_update2019-08-13 17:19:45
depth2
children0
net_rshares9,994,519,267
last_payout2019-08-20 17:19:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length132
author_reputation36,215,033,301,240
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@steem-ua ·
#### 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](https://discord.gg/KpBNYGz)**
properties (22)
post_id79,024,966
authorsteem-ua
permlinkre-game-design-on-the-ipad-making-graphics-for-splinterlands-20190813t212203z
categorysplinterlands
json_metadata{"app":"beem\/0.20.23"}
created2019-08-13 21:22:06
last_update2019-08-13 21:22:06
depth1
children0
net_rshares0
last_payout2019-08-20 21:22:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length702
author_reputation21,821,715,475,664
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@c-squared ·
$0.02
c-squared-comment
<div class="pull-left">https://cdn.steemitimages.com/DQmaSUWYsJ3AMUEMRqCSaoKJVNvtsbKm4fNAtmTidr8Uggc/C%20Squared%20Logo%20Transparency%20200px.png</div><br>This post was shared in the <a href="https://discord.gg/B8JFmJ4">Curation Collective Discord community</a> for curators, and upvoted and resteemed by the @c-squared community account after manual review.<br/>@c-squared runs a <a href="https://steemit.com/witness/@c-cubed/announcing-the-launch-of-the-new-c-squared-witness">community witness</a>. Please consider using one of your witness votes on us <a href ="https://steemconnect.com/sign/account-witness-vote?witness=c-squared&approve=1">here</a>
πŸ‘  
properties (23)
post_id79,026,100
authorc-squared
permlink20190813t221359746z
categorysplinterlands
json_metadata{"tags":["c-squared"]}
created2019-08-13 22:14:00
last_update2019-08-13 22:14:00
depth1
children0
net_rshares71,560,346,373
last_payout2019-08-20 22:14:00
cashout_time1969-12-31 23:59:59
total_payout_value0.018 SBD
curator_payout_value0.006 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length655
author_reputation3,530,024,972,859
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@philippekiene ·
$0.03
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.
πŸ‘  , ,
properties (23)
post_id79,037,855
authorphilippekiene
permlinkpw7uhl
categorysplinterlands
json_metadata{"tags":["splinterlands","battle"],"app":"battlegames\/0.1"}
created2019-08-14 07:37:00
last_update2019-08-14 07:37:00
depth1
children1
net_rshares92,296,022,171
last_payout2019-08-21 07:37:00
cashout_time1969-12-31 23:59:59
total_payout_value0.023 SBD
curator_payout_value0.007 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length164
author_reputation7,318,876,931,172
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (3)
@nateaguila ·
Thanks, I’ll try to post more!

Posted using [Partiko iOS](https://partiko.app/referral/nateaguila)
properties (22)
post_id79,079,446
authornateaguila
permlinknateaguila-re-philippekiene-pw7uhl-20190815t094628440z
categorysplinterlands
json_metadata{"app":"partiko","client":"ios"}
created2019-08-15 09:46:27
last_update2019-08-15 09:46:27
depth2
children0
net_rshares0
last_payout2019-08-22 09:46:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length99
author_reputation36,215,033,301,240
root_title"Game Design on the iPad - Making Graphics for Splinterlands!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000