Designer and art director Ricardo Ajcivinac works at TBWA Guatemala. He combines Adobe Photoshop with traditional illustration and graffiti principles to create pieces that jump off the screen. Ricardo is also a graffiti writer and has a blog that he uses to showcase street art from all around the world.

Intro

A small character can tell a big story – but traditional character art can be rather flat and one-dimensional, tending towards a cartoonish feel.

In this tutorial, Ricardo Ajcivinac shows how to recreate this brilliant image, and how to give your character art extra punch by using lighting and layer styles.

The principle of this tutorial is to create a complex background with a focal point that hints at a story behind a character. Once you’ve mastered it, it’s a highly versatile technique.

Light effects are very trendy these days but you can avoid clichés by mixing them with something different and interesting; the result will always be an amazing image that gets everybody’s attention.

Time to complete

Software

Project Files

Step 2

Create a Photoshop document measuring 934 x 1,280 pixels and fill the background layer with a greenish grey (#bec7bb). Paint this with a large yellowish grey brush (#c9c3ad), then create a new layer.

Set the blending mode to Soft Light and paint with a black brush around the top right corner, and white brush for the middle and bottom.

Step 3

Download the cloud brushes created by JavierZhX on deviantArt then load them. Create a new layer and use the brushes to start creating some clouds in white and various tones of grey.

Step 4

Create a new layer, and download the nebula brushes created by Matkraken from deviantArt.

Load the brushes as shown on the palette and use the different settings to make some stars in the sky. Next create sofog around the central area where we’ll be placing the character.

Step 5

Go here and download the lightning brushes created by *Adaae-stock. Load the brushes and paint lighting forks around the area where you are going to set your character. Double-click on the layer in the Layers Palette to open the Layer Styles dialog box.

In the Drop Shadow menu, set the blending mode’s opacity to 65%, the angle to 120º, and tick both the Use Global Light and the Layer Knocks Out Drop Shadow boxes.

In the Outer Glow menu, set the blending mode to Screen, the opacity to 75%, the colour to solid, and the range to 50%. The drop shadow should be #ff7814, and the outer glow should be #fffecc.

Step 6

Create a new layer and set the blending mode to Soft Light, then use a round brush to add some black in the corners. In a new layer, use an off-white brush to add some dots around the lightning, then copy the layer styles you applied in step 4.

Step 7

Create a new layer and, using the polygonal lasso tool (L), make a selection like the one you see here – with one side straight at 45º. To do this, hold Shift and move the cursor to create a perfectly angled line. Now pick a round white brush and brush a little around the straight line.

Step 8

Repeat Step 6 until you have a number of striking diagonal lines going across the image like the example shown above. Open the Layer Style dialog and in the Outer Glow menu, set the blending mode to Screen, the opacity to 77%, the colour to solid, the technique to Softer, and the range to 30%. The glow’s colour should be #ff0000.

Step 9

Create a new layer and, using the Polygon tool (U) set to three-sided shapes, create a triangle.

Set the layer fill to 0% and its blending mode to Overlay. In the Layer Styles palette set the values to those shown in the screengrab. Repeat this three times to get three triangles in separate layers.

Step 10

Open abstract lines.psd from the download, and copy-and-paste these into the area where the figure will be. Set the layer’s opacity to 17%.

Step 11

Create a new layer and make some white lines at a 45º angle, using the Line tool (U) set to two pixels wide. As in step 6, hold Shift to make a straight line. Now the background is completed.

Step 12

Now open the Rise of Sumo character from the download, copy it and place it where the abstract lines are so that it’s above all the previous layers. With the Magic Wand tool (W) make a selection around the character and invert the selection (Cmd/Ctrl + Shift + I), create a new layer and fill the selection with black.

Step 13

Set the layer fill to 0% and open the Layer Style dialog. In the Outer Glow menu, set the blending mode to Screen, the opacity to 75%, the colour to solid, the technique to Softer, the size to 16 pixels, and the range to 50%. The colour should be #c6faff. Set the Inner Glow palette’s settings as shown immediately above, in #fefecc.

Step 14

Create a new layer and use the Matraken Nebula brushes to add some stars and fog around the character and the top. Add the layer styles shown in these screengrabs (drop shadow #ff570d, outer glow #fffecc).

Step 15

Create a new layer and set the blending mode to Color. Add some red and blue around the character’s head and the top lightning with a round brush. In a new layer, set the blending mode to Soft Light, and paint a little around the top right corner with black. Create another layer and do the same, this time adding more black around all the corners and some around the character.

Step 16

Create a new layer and fill it with black. Add some noise (Filter > Noise > Add Noise) and set its opacity to 40%, then erase small areas around the character and the top and bottom lightning. Now go to File and save your image as a JPEG document.

Step 17

Now open the JPEG file you created and download the free Actions set 50 Photoshop Postwork Actions by Manicho from here. Experiment with these to get different colour results: when you’ve found one you like, you’ve finished.

Comments

Erik Jam said: esta genial!!!

Yogesh Mankani said: A very nice tutorial and it is featured in our list of best Photoshop Tutorials of year 2014. Check here :http://theneodesign.com/best-p... and don't forget to give a shoutout on social networks :-)

Yogesh Mankani said: Awesome Photoshop tutorial, we have featured it here : http://theneodesign.com/best-p...

Martin Lee said: I agree Dave!

davemac2012 said: Is it just me, or do the screen shots appear to be overly compressed? I have a very difficult time reading what the writing is supposed to be on the menus and settings.