Particle effects like explosions, magic effects, water, and smoke can bring any game to life. To get started with particle effects, you will first need a sprite to use as a particle. Creating these sprites can be easy using free software and minimal drawing skills. Let’s get started!

Recommended software

Any image editing software can be used to follow this guide, but it’ll need to support basic shape creation, gradients and a (gaussian) blur effect. My recommendation for drawing particle sprites is GIMP, which is available for any operating system. Other options include Inkscape, Adobe Photoshop/Illustrator, Affinity Photo/Designer or Sketch.



Image: GIMP image editor



Most game engines will expect your particle sprites to have either a solid black or a transparent background. Make sure you save as either one. It’s always best to also keep a separate source file, so you can always come back to your creation and edit it.

Creating sprites

Smoke

Smoke sprites can be created by arranging a bunch of dots in a circular shape. Start by creating four circles, with each circle having a different opacity. The first one is 80% opaque, the second 60%, the third 40%, and the last 20%.



Steps to create smoke sprite



Make a few copies of the first circle and start placing them in the middle of the sprite. Keep them close to each other, but also make sure there’s some randomness to it. Once done, take the second sprite (60% opaque) and create a circle around the center. Continue doing so until you’ve used all four circles.

After you’re done applying a gaussian blur effect on the sprite until it’s hard to make out each separate circle and it looks like a single cloud of smoke, you can randomize the scale of each circle for greater control over the final sprite.



Sample smoke effect



Smoke sprites are perfect for creating all types of smoke and fog, but when colored blue or red can also be used for water or blood.

Star

A star sprite can be used for all kinds of magic effects. Start by creating three circles. Stretch the first one horizontally and the second vertically. Align the two stretched circles so they cross each other at the center of the sprite. Move the third circle to the center too, as shown in the image. You can optionally add a third ring around the center.



Steps to create a star sprite



Apply a directional blur if your software allows for it. Apply a horizontal blur for the horizontally stretched circle and a vertical blur for the vertically stretched one. Then select the vertically stretched circle and also apply a blur, making sure it’s more blurred along the Y axis than the X axis.

Select the circle in the middle and apply a glow effect if available. You can also change the (optionally) added ring from a solid color to a circular gradient.



Sample magic effect using a single sprite image



A star sprite like this is not only perfect for a wide variety of magic and healing effects, but can also be used as a power-up or coming from the thrusters of a spaceship.

Electricity