menu button

The Android

Something Easier

I can hear you saying:

"Oh... the spaceman sprite is nice and easy to do!
But I would have to practice a bit before create a sprite like that...
Don't you have something easier for me?"

Yes! I do!


The Android Magnified

The Components

We construct the android overlapping similar disks.

These disks differ on size:
- 12 x 12 pixels
- 16 x 16 pixels
- 20 x 20 pixels
- 23 x 23 pixels
Android Disks Zoomed In

Note:
Don't copy the disks from the sheets.
Because they are zoomed in, the android would look bad.
Don't be lazy!

The Colors

Android Palete



All disks are made with the palette above:
- light purple is rgba(160,45,190,255)
- mid purple is rgba(100,10,120,255)
- dark purple is rgba(25,5,30,255)

The Circle

SHIFT Roll Icon
If needed, clean the layer Sprite.

Resize the layer to a smaller size than the disk you are making:
- 12 x 12 pixels ==> 10 x 10 pixels
- 16 x 16 pixels ==> 14 x 14 pixels
- 20 x 20 pixels ==> 18 x 18 pixels
- 23 x 23 pixels ==> 21 x 21 pixels

Select color light purple from palette.

Ellipse Icon
Select tool Ellipse.
Place the mouse near the upper left corner of the layer.
SHIFT drag the mouse to the opposite corner.
Make sure the circle touches the 4 sides of the layer.

Note:
That are two circles that need a small fix.
You have to paint a few dots (shown below in different color).
Android Circles Fixing Zoomed In
Resize (NOT scale) back the layer to its correct size.

Press CTRL ARROW DOWN once.
Press CTRL ARROW RIGHT once.
The circle is centered again, with space for antialiasing.

Android Circles Zoomed In

Tool Paint Border

Paint Border Icon
Select tool Paint Border.

Select color dark purple from palette.
Click once in the center of the circle.

Select color mid purple from palette.
Click once in the center of the circle.

For the 23x23 disk, click once more.
Android Circles Paint Border Zoomed In

Tool Blur Border

Blur Border Icon
Select tool Blur Border.
Make sure its intensity is 4 (default intensity).

Click the center of the circle as shown:
- 12 x 12 pixels ==> no clicks
- 16 x 16 pixels ==> 3 clicks
- 20 x 20 pixels ==> 4 clicks
- 23 x 23 pixels ==> 5 clicks
Android Circles Blur Border Zoomed In

Blur And Inliner

Apply effect Blur once (panel Effect).

Select color dark purple from palette.
Apply effect Inliner(panel Effect).
The purpose is to darken the edge.

Apply effect Blur again.

Android Circles Effect Blur Zoomed In

Finishing The Disk

Apply effect Antialiasing Strong once (panel Effect).

Save Image Icon or CTRL S
Save your sprite.
Android Disks Zoomed In

Note:
The final android sprite will have a classic black outline.
But the disks don't have a black outline.
Because some effects work bad with black pixels.
"black" means rgba(0,0,0,255).

Composing

Start with a clean layer Sprite.
Set its size to 60 x 90 pixels.

Show Both Layers Icon
Set both layers on.

Load Image Icon or Previous Slot Icon
Load the disk from file or from slot memory.

SHIFT Hand Icon
Move layer Mask positioning the disk where you want.

Paste Icon
Click the icon Paste or press CTRL V to paste layer Mask on layer Sprite.

Repeat the two last steps at will.


Note:
Pasting layer Mask always turns Mask off.
Trying to move it (SHIFT pressed) automatically turns it on.


Note 2:
Press CTRL B when you need to paste Mask BEHIND Sprite.


Right leg:
Android Right Leg Zoomed In

Left leg:
Android Left Leg Zoomed In

Right arm:
Android Right Arm Zoomed In

Left arm:
Android Left Arm Zoomed In

Mounting:
Android Mounting Zoomed In

Finishing

Start with the mounted android. (sprite 1)

Apply effect Weaken Black Pixels (panel Effect).
Apply effect Erase Translucent (panel Effect). (sprite 2)

Apply effect Sepia Tone twice (panel Effect). (sprite 3)

Apply effect Emboss (panel Effect). (sprite 4)
This effect will give volume and change some spherical forms into cubic forms.

Apply effect Add Noise 4 times (panel Effect). (sprite 5)

Lighten Icon
Use tool Lighten to fix the ugly dark pixels marked in sprite 5. (sprite 6)

Select color black (rgba(0,0,0,255)).
Apply effect Outliner (panel Effect). (sprite 7)

Apply effect Antialiasing Strong (panel Effect). (sprite 8)


Android Finishing Zoomed In

Conclusion

Probably you need to invent more components for other positions.

Don't forget: each sprite must match the general look and feel of the game.

Anyway, we learned more about BobSprite.

And we realize that we can make sprites more by assembling than by drawing!


Android Front View Zoomed In

(Ok. This is ugly!)