I will go ahead and admit it…this dive into making a vector blowfish has taken more time than I initially anticipated. In a subsequent article I will fully animate this little creature. For now, I decided to break on what will be the first and last frames of animation to write this article. I am eager to bring this tiny villain into the Unity-verse, so I will get right into some art breakdown for how this spikey critter came together.
Start by using the Pen Tool to make a body outline. Then give it a 2-color gradient fill.
The rear fin shapes and colors are added with more usage of the pen tool and another 2-color gradient fill.
The side flipper is added using two shapes. The actual fin part has a transparency fill applied, because porcupine blowfish have semi-transparent fins. The “shoulder” segment remains fully opaque.
The top body and flipper shoulder highlight shapes are created by making two copies of the shape, and using one to cut it’s own shape out of the other. This way only the untrimmed portion remains. A soft body highlight is added as well. It’s just an an oval with no outline, that has a transparent fill starting visible in the center and fading out towards the edge.
The lower body and flipper shoulder shadow shapes are made in the same way, by duplicating the desired shape twice and cutting the shape from itself. I also move the shape up a little to let a small line of reflected light show through from the body background.
The base of the eye is made with a simple perfect circle shape, using another 2-color gradient fill and an outline.
Another smaller circle is added to the center for the pupil. It has an outline as well as a 2-color gradient fill that starts deep blue in the center and fades to black as it reaches the edge.
Two small white circles are added for eye reflection highlights. I use two quarter moon shapes with a transparent fountain fill to fade from white to clear on the other eye reflections. Another version with red is layered beneath the white reflections.
The fin shapes are duplicated, and then the top fin layer is cut away to reveal the lighter layer beneath, using some striped curve shapes I made. The two colors in the gradient fill are changed to match my reference image.
Red spots are added with the Pen Tool using an outline and a gradient fill that radiates from the center like the eye.
Small black spots are added by using the circle shape tool, dragging them out and rotating them. Some are also squished into perspective with the move tool.
Finally, the spikes come into play. I make one, and then make a few variations from the original. These have a gradient fill with 4 colors to really give some added contrast.
Here is a condensed image of the whole art process covered above.
The puffed-up blow fish was made in a similar fashion using the existing elements from the un-puffed blowfish. Simply stretching everything into a larger shape didn’t look good, so I started by incorporating a big imperfect circle shape into the original body shape. From there, I moved and resized the other elements into position, layer by layer. Moving and rotating the spikes from a resting position to a standing position where they fall into perspective took a little bit of time on my end. I also rotated the flipper out a towards the camera to add to the animation. The rear fins of course get repositioned now that the body has ballooned in size.
When it comes to animation, having the first and last frames is always a great starting point. You know where you are and you have a final destination. Now all I need to do is add all of the in-between frames where I am sure those spikes will be a pain in my butt. I hope you join me in my next article where I begin to being this small sharp fish into Unity and give it some exciting behaviors. Thanks for reading!