Import Spine Animation in Cocos2d-x (Part 3): Color images in Adobe Photoshop

This is the third post of series "Import Spine Animation in Cocos2d-x". Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2

In the previous post, I did import the circles to the appropriate layers. And in this post, I continue coloring image for each layers step by step.

Step 1: Select layer "Head", and invisible the other layers.

Fig 1: Invisible all layers: Body 1 to Body 4.

Step 2: Select "Magic Wand Tool".

Fig 2: Select "Magic Wand Tool".

Step 3: Click on the big circle area to make selection.

Fig 3: Select "Head" circle.

Step 4: Select "Paint Bucket Tool" to color.

Fig 4: Select "Paint Bucket Tool".

Step 5: Click on "Color Picker" and select green color to paint.

Fig 5: Pick Green color to fill to circle.

Step 6: Click into selection area , it will paint the green color to circle.

Fig 6: Result after filling color to selection.

Step 7: Repeat step 5 with lighter green color. Then select "Brush Tool".

Fig 7: Select "Brush Tool".

Step 8: Select the setting of Brush like the screen shot below.

Fig 8: Change size and hardness of Brush.

Step 9: Then paint that lighter color on the top-right of circle. Here is the result:

Fig 9: Paint the light shadow to circle.

Step 10: Repeat step 7, 8 and 9 with darker green. And we have a head of worm with green and light/dark shadow.

Fig 10: Paint the dark shadow to circle.

Now, you did know how to color the image with shadow, then use the same steps above to color the eye and other circles. Here we have the final result:

Fig 11: Final result.

In the next post, we will continue to exporting these circles to png files to prepare for animation.

If you have any questions or concerns, please post your comments here, I will take a look and response ASAP.

Yumiki.