Start with how it flies
This fireball is for a rocket launcher, a classic in action games. Look at the shape: it's long and straight, almost a rectangle. That's because rockets are fast. They fly straight and don't drop in an arc. A cannonball is slower and heavier, so its fireball would follow a slight arc instead. The shape tells the player what kind of weapon fired it.
Where the heat is
Like any fire, a fireball has a heat source, and here it's the front. Two reasons. The rocket itself is at the front, hidden under the fire. And the front cuts through the air first, so it gets the most friction, which makes even more heat.
You already know the rule from the bonfire: the hotter the part, the lighter the color. The body behind the head is a bit cooler, so it's a bit darker. The particles at the back are falling apart and cooling down, so they're the darkest.
Step 1: Outline
Leave room on the left for the particles, then draw the long body: about 18 pixels long, with a 3 pixel front. It's close to a rectangle, with one pixel moved out of line so it doesn't look too stiff.
Then add the particles. You can almost throw them in and they'll still read as particles. One thing matters though: keep them within the height of the fireball. If they spread up and down, it stops looking fast.
Step 2: Color
Fill the body with the mid-tone using the fill tool, and color the outline and the particles the same. The outline has done its job.
Step 3: Highlight
With the bonfire we did the highlight last. Here I start with it, because the head is where everything begins. Going from the head to the tail, right to left, is just easier. Fill the front with light yellow, then break it up with a little zigzag going back into the body.
Step 4: Shading
Now the cooler parts. Take the deep red for the particles and the edges of the body, then fill in with orange between the red and the yellow. When you draw your own, it doesn't have to match pixel for pixel. The reference is a guide, not something to copy exactly.
Finally, the background
Put the fireball on its own layer, add a background layer below it, and fill it. Done.
Your turn: two more fireballs
This one looks harder, but it's just a bunch of spheres, like a cloud. Every sphere is an explosion, so every sphere has its own heat source, and on each one the light sits on the right side. Between the spheres the shading flows in deep orange and red, which gives it depth, and the particles are mostly deep red. For this one I'd copy the outline pixel for pixel before you texture it.
And your challenge: a round fireball, the kind a cannon fires. The heat source is at the front again, but this time it's big and scattered, because a cannonball is big. The tail and the particles cool down as they fall behind, so they're deep red, and the part that connects the ball to the tail is deep orange. Same 48 by 22 canvas, same palette.