Marrying off pixelated icon styles - some food for thoughts and a little guide

Avery

Sleeping Dinosaur
Restaff
Joined
Oct 13, 2012
Messages
3,728
Reaction score
25,211
First Language
German
Primarily Uses
N/A
Something that VX Ace did insanely better than its successors are the icons. The icon style of MV and MZ is not my cup of tea, that is why I made a replacement set (like, share and follow :p). But I was not the only one to create their own 32 x 32 style, which is why pixelated icons for these two makers branch out a bit.
And since clashing styles are maybe not what you want in your iconsheet, let’s have a look on how we can bring icons by various artists closer to each other.

Icons I used in this tutorial:
My own
Caz by @Caz, leave her some love here as well
7soul
Un Almacen - Link to translated terms

!Do not use anything from this tutorial, since there are multiple artists involved I don’t want to take responsibility when you get the terms mixed up or wrong!

Why would I need this, when all of the sets have the base I need to cover a whole game?
  • You might just want more variation, for example have different types of one thing and not just use recolors
  • Each set has their own special icons, so while you might be happy with Caz’ set, you might wanna add one or two of mine and maybe a handful from Un Almacen for some specific things


So, for a starting point, let us pick some similar icons from every set and compare them:
1686260108639.png
Here is my test array of icons. To be able to show all aspects properly, I used multiple examples for each style.

We will use them to understand what makes the icons from each style look a little different from the others and gain a blueprint on how to actually adjust them to match each other.

Outlines

I have basically seen two options here (maybe 3, if there is an extra white outline around the whole icon, but that could easily be removed usually), and those are:
1686260108695.png
A colored line to fit the shade inside of it (here the case for mine and Caz’) and a solid one, usually a darker brown or black (here the case for Un Almacen and 7 soul).
I did not picture all Outline colors on Caz’ and mine, it is just important to show that there is more than one ;3 It also shows that even if there is a solid outline, the shade can differ!

Palette
1686260108745.png
Talking about shades, the colors inside of the icon can vary a lot! With 7soul having the least saturated colors and usually the shortest color ramp to mine being the most saturated of the bunch, you can see clear differences in the look and feel of the color choice.
In saturation I would say the order would be: 7soul, Un Almacen, Caz, Avery, though that depends on the picked shades.

Shading

Talking about shades, there is also a difference in how those are used on the actual object.

A good thing is that for all of them the light comes from the upper left, which means the lightsource position is the same!

1686260108796.png
Just a coincidence, but yet again, we have a similar pairing for the swords.
Un Almacen and 7soul have a very flat shading, and they don’t work as much as structure as Caz and I do. And while it depends on the type of object, here I for example added a lot of shimmer and reflection to the blade, while Caz’ had it a little simpler comparingly.
You can also see how the left pair of handles looks flatter than the right one.


1686260108849.png
And this kinda goes through all the icons. While Un Almacen has more structure on the diamond comparingly, if we step back a little, it shapewise still looks kinda flat.
7 soul worked out the shape more than Un Almacen, BUT here you can see something only he does in his icons: maybe due to the more limited colors, he often dithers (the checkerboard pattern) to create a shade in between his colors, while the others than simply rather have a color more and try to avoid it.
Again, Caz and I are the ones who have the most details in the shading and work out the shape the most.

1686260108907.png
But sometimes, everyone does their own little thing.
I used a thick glass container for the potion and a very detailed shading to have the materials come out. The potion cap top is visible.

7soul’s cap top is not visible, the shading is reduced and dithered and his glass is only 1px thick.

Caz’ bottle seems to be either very thin or colored, her shading is glossy on the glass and her cap top is visible.

Un Almacen’s shading is very reduced, similar to 7souls, but less feathered out and the cap top is visible.

A bonus point is that my icons tend to be a little more cartooized to be able to show more details, e.g. with the swords generally being a bit shorter but wider so I have room to add in extra things.

So what to do to make them match?

For my own sanity’s reasons, I will do the swords only and bring them to 7soul’s and my own style.
Starting with this:
1686260108963.png

  1. Bring them to the same palette.

I have a full tutorial on recoloring pixel art, so I will just refer to that here as how to:
https://forums.rpgmakerweb.com/index.php?threads/recoloring-pixel-art.156977/

1686260109015.png
Note: keep the original palette on hand in case you need to pick more colors in later steps, e.g. for the outlines or the shading.

  1. Make the outlines match

Then we use either the darker colors from the shade the outline surrounds or we replace the colored outline with the solid one of the style we want to get to.
1686260109061.png

  1. Bonus: Adjust the proportions a little
This might not be necessary, but since it is very obvious in the swords, I did it here:
1686260109107.png
For my style, I made the blades and handles wider, getting closer to that cartoony proportions I wrote about earlier. And since my icon is the odd one out here, it had to be altered for the 7 soul style.
As you can see, with these three steps the two sets of icons that started out the same, already have a very different look and feel to them. Now that I am writing this down for the finished images, I could have shortened every but the default’s sword handle on 7soul as well.

  1. Adjust the shading
As you saw above, the icons are already a lot closer than they were. Rather omit this (and maybe step 3) step and just do the first two if you are overwhelmed instead of doing nothing because this seems to be complicated.
But you should have a whole sheet of references at hand and you can see of you can do smaller changes on a pixel level to make the icons look even more uniform.
1686260109151.png
My blades usually have a strong shine and a bright line to show that there is an edge, that is what I did here. I also added a little more shine and shape to some of the handles.

For 7soul I killed a lot of the shine and kinda tried to emulate his shading style. And there we go: two uniform sets of icons!

1686260109202.gif
 

Jeremiah Eastman

Gladiator
Regular
Joined
Apr 24, 2017
Messages
579
Reaction score
373
First Language
English
Primarily Uses
RMMV
Wow what a great resource! I make my own icons and have taught myself how to do it on the same project, so my icons went through style changes as I developed my own style. Seeing this post, wow my icons are a mess lol. This gives me real direction and understanding of how to better go about things. Love it.
 

Avery

Sleeping Dinosaur
Restaff
Joined
Oct 13, 2012
Messages
3,728
Reaction score
25,211
First Language
German
Primarily Uses
N/A
Thank you :3

Sometimes such things can be quite overwhelming, since you have several factors at play - but if you break it down, every little step towards a more uniform style is better than none. For the overall look I think color and outline are the most important part, with the shape and shading depending on the actual object and your level of comfort touching them.

I realised that I forgot to mention that I picked those four styles because I think they are some of the more well known MV/MZ styles and because I've seen them used a lot. Un Almacen is probably the one I've seen the least, but it is an impressive collection with many cool ideas!

Now, there are many other artists and styles out there that you can either use as base or bring closer to one of the mentioned styles with the blueprint I provided here.

Some shoutouts and recommendations:
Crazy_Leen https://forums.rpgmakerweb.com/index.php?threads/crazy_leens-crazy-resources-retro-resources.31274/
1686305228749.png
(colored but not shaded outlines, shapewise usually kinda slim,shadingwise in the middle, probably closest to Caz from the examples)
You might especially want her amazing elemental equipment!


The Hide Ito Icon pack that is completly buried and forgotten:
1686305502635.png
(solid black outline, very detailed icons, sometimes quite a lot of dithering)
Since those were not made for games in the first place, some of the content can be a little off, but especially his food icons are a must have for any modern game!

1686305840629.png
(solid black outline, a flatter shading with sometimes dithering and very slender icons)
With some fun and unique icons, this set might have some thing you did not even know you want to have in your game!

...and I guess there is a lot more. Is there an interest for an updated list on MV/MZ fitting icons that you might be able to marry off this way?
 

Jeremiah Eastman

Gladiator
Regular
Joined
Apr 24, 2017
Messages
579
Reaction score
373
First Language
English
Primarily Uses
RMMV
I'd love to see an updated list. =) Seeing all these icons I'm noticing my icons seem to be very different style wise. I'm wondering how much of an issue it would be now if I use any others to marry them to my style. This has been really eye opening, thanks so much for the resource. =)
 

Latest Threads

Latest Posts

Latest Profile Posts

So, I just found out you can hit ctrl+F to search the database...WHAT??
1695805675906.png
Added a normal tent and a landing stage for worldmaps :3 Is there anything you think worldmaps in MZ are desperately lacking?
4 main factions and a very rough exploration of their iconography :o
image.png


Some are aligned with the Moon, while the others are aligned with the Sun.
After taking yesterday off I finally made the sprites of the boys of the main trio.
Ton.gif

Ton

Dolph.gif

Dolph(might fix his hair that the blue color is more clear in the sprite)

Also fixed eliza's sprite:
Eliza-sprite-v2.gif


At last here they are ingame:
trio.png
i've started the second game
check daily/weekly progress here
wish me luck :)
i'll be sharing a lot of stuff, sort of a developer log
(if its allowed)

Forum statistics

Threads
134,837
Messages
1,251,074
Members
177,632
Latest member
sleptzguy
Top