Street Fighter IV Style

In honor of the eminent release of Street Fighter IV, I’ve tried my hand at emulating the art style from their character illustrations. They have a unique look that makes use of vibrant paint strokes and splatters prevalent in current design and juxtaposes it with the anime aesthetic that has been associated with the Capcom fighting games. I’ve drawn one of my favorites, Cammy, and did my best to pay homage to the return of the World Warriors.

In the first step, we’re going to see how to colorize the pencil art. I scanned at 300 dpi to get all the high resolution details of the lead work. Also scanned in color even though it’s just lead on white. I did this because when scanning pencils, there are different variations of pressure on the lead verses the very black nature of ink. To make them a little darker I adjusted the levels like so:

Press ctrl+A to select all and ctrl+C to copy the lineart then open the Layers Panel and go into the Channels tab. Click the icon on the bottom that says “Add New Channel” and paste the image into the channels. This should have created an “Alpha 1”. Press ctrl+I to invert the art so it looks like white lines on a black background.

Now click back on to the Layers tab and make a new layer. Go to the Select menu at the top of Photoshop and scroll down to “Load Selection”. Choose Alpha 1 and the pick a dark color on the color picker. Shift+F5 or Fill this selection and you should have a layer of colored lineart.

Lock the transparency by clicking this icon and now you can color the lines anything you want.

I chose dark versions of the colors I plan on coloring each section.

On a new layer underneath the lineart painted in some flat colors simply using the pencil, lasso and paint bucket tools.

I used a softer brush with lower opacities and flows to paint these shades. I pretty much just used the same colors I used for the lines but brushed around the shapes to give them some volume. The progress done on the next few sequential images were all done in their own layer.

I used the Lasso Tool and filled in some darker shadows that might be cast around the figure.

And yet another layer for some highlights.

I found that my painting looked somewhat muted so after selecting al the layers with the figure in it I pressed ctrl+E to merge all the layer art the went to Image>Adjustments>Brightness/Contrast and increased them both. At this time I placed a logo I found of the upcoming title.

Now we’re going to see how this piece was given some Street Fighter IV personality. I added 3 or 4 new layers behind the flattened art. On the very bottom layer I started on some underpainting by choosing the green and painted with a large very soft brush.

On a layer on top of that labeled, Smoke, I decreased the brush size and increased the pressure. After applying a few strokes I took the smudge tool and pulled around to make the smoke feel a bit more swirled and organic.

Next I kept the same green color I’ve been using and filled the next layer with Filter>Layer>Clouds. I set the Blend Mode to Soft Light in the Layers Panel.

Some downloaded Photoshop brushes help to really personalize the piece and, in effect, are really what makes it look like Street Fighter 4. Splatters and Strokes are the order of the day and these brush packs really delivered.

If you select the paintbrush tool you can click the brush options at the top of Photoshop. Here you can manipulate the size and direction of the custom shape. I squeezed and stretched mine to splatter.

The stroke layers I actually painted with black and changed the blending mode to Overlay.

I hope you enjoyed the piece!

By Mark Rivera

Mark is an animator and ad designer for WebProNews. He has a passion for illustration and 3D art.

Leave a comment