Multiplying pixel art blocks

This is an interesting photoshop technique for multiplying pixel art assets. It applies to any irregular background tile. In our case we doubled the earth blocks present in a couple of minutes.

I started with the following spritesheet with just 16 different earth blocks. We will finish with 32.

block-earth-idle

And using photoshop I did the following.

  1. I duplicated the vertical canvas size and the blocks layer. Now there are two new upper rows. Identical to the lower ones.00-block-earth-idle
  2. And that’s what I got after the swap of the two upper blocks. Each one above is identical to the one below on the other side (notice the corresponding color frame).01-block-earth-idle
  3. Then I duplicated the two rows below, again and, without swapping, created a new layer just below the upper ones.
  4. Using photoshop “blend modes”: “darken” the two new upper rows merge together creating new irregular patterns that remind earth.

So the final spritesheet has doubled the blocks without drawing any pixel, very fast and the new blocks (upper two rows) are even fancier than the old ones !

block-earth-idle

Here is another example with ice blocks.

From this:

block-ice-idle

to this:

block-ice-idle

Just some minor adjustments for hi-res (32×32 to 64×64), rounded corners and opacity for a frost effect.

Leave a comment