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

This is the second 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

In this post, I will import the circle which I created in first post to Adobe Photoshop. I am using Photoshop CC 2015. Of course, you can use the older or newer version of Photoshop to import the circles as the steps will be the same, not much changes among those versions regarding the UI.

Step 1: In Illustrator, select menu "File" -> "Export...", in "Save as type" dropdown, select "Photoshop (*.PSD)".

Step 2: In the next dialog, leave the default settings and click "OK".

Step 3: Open that exported file in Photoshop. Rename "Layer 1" to Head. Then Create more 4 layers, each layer will contains a circle. Name the circles' name to: Body1, Body2, Body3, Body4.

Step 4: Use "Lasso Tool" to select the second circle.

Step 5: Drag mouse to select around the second circle.

Step 6: Make sure that you are selecting the layer "Head", press Ctrl+X to cut it. Then select layer "Body1" and paste it. Now, the second circle are in layer "Body1". Do the same steps with the other circles. Here are the results after moving the circles to the proper layers:

In the next post, I will color these images to make the worm look better.

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

Yumiki.