Pixel Art: Difference between revisions
From The Muse
| (2 intermediate revisions by one other user not shown) | |||
| Line 4: | Line 4: | ||
* Slices are just PNGs arranged in the right folder (corresponding to the Slice Type). | * Slices are just PNGs arranged in the right folder (corresponding to the Slice Type). | ||
* Some slice types can accommodate front and back, but at minimum they need a base | * Some slice types can accommodate front and back, but at minimum they need a base | ||
** eg: in the | ** eg: in the <code>hair/</code> folder, we can put <code>bowlcut.png</code>. We could also put <code>bowlcut_front.png</code> and/or <code>bowlcut_back.png</code> | ||
** but in the above | ** but in the above example, we still need <code>bowlcut.png</code>, even if it's a blank image | ||
* all slices are 128 x 128px. You aren't guaranteed to see the top or the sides of this, depending on where the portrait is being displayed | * all slices are 128 x 128px. You aren't guaranteed to see the top or the sides of this, depending on where the portrait is being displayed | ||
* slices are displayed in the following order (subject to change) | * slices are displayed in the following order (subject to change) | ||
clothing_outer_back | |||
accessory_jewelry_bac | |||
clothing_inner_back | |||
accessory_scarves_back | |||
accessory_hair_back | |||
hair_back | |||
body | |||
body_extra | |||
clothing_inner | |||
clothing_outer | |||
head | |||
ears | |||
eyes_back | |||
eyes | |||
eyebrows | |||
nose_back | |||
mouth_bac | |||
face_extra | |||
mouth | |||
mustache | |||
eyes_front | |||
nose | |||
accessory_jewelry | |||
accessory_other | |||
beard | |||
mouth_front | |||
accessory_scarves | |||
hair | |||
accessory_hair | |||
accessory_glasses | |||
hair_front | |||
accessory_hair_front | |||
accessory_other_front | |||
accessory_jewelry_front | |||
accessory_scarves_front | |||
== RGB Color System == | == RGB Color System == | ||
The other main thing that define our portrait maker is that we dynamically recolor the image in a specific way. The important part to know is that you need to make your slices with very specific colors: | |||
* Magenta (#FF00FF) is used as a "mask", covering up | * Magenta (#FF00FF) is used as a "mask", covering up lower layers for slice types set up to do so (e.g. hats cover up hair at all pixels marked with magenta on the hat slice) | ||
* Red, Green, and Blue are our "primary", "seconday", and "tertiary" colors. The easiest way to know which color is being used is to copy another slice in the same category. | * Red, Green, and Blue are our "primary", "seconday", and "tertiary" colors. The easiest way to know which color is being used is to copy another slice in the same category. | ||
* Specific colors map to specific indexes in our 7-color "color ramps", that the user selects in-game | * Specific colors map to specific indexes in our 7-color "color ramps", that the user selects in-game. To be recolored, the pixel needs to be an '''exact''' match to one of these values. | ||
Index Reds Greens Blues | Index Reds Greens Blues | ||
| Line 63: | Line 63: | ||
7 #330000 #003300 #000033 | 7 #330000 #003300 #000033 | ||
* NOTE: | * NOTE: Artistically, we're using index 3 as the "base color" for that entire ramp (not index 4). | ||
* | === Resources === | ||
* Photoshop color palette: [[File:Photoshop_recoloring_pallete.act]] | |||
* Aseprite template files: [[File:Size 1 + half.ase]], [[File:Size 2.ase]], [[File:Size 3.ase]] | |||
Latest revision as of 20:45, 1 September 2026
Portrait Slices
- Portraits are made by lining up a bunch of portraits in order, kind of like a complicated sandwich. These are called slices.
- Slices are just PNGs arranged in the right folder (corresponding to the Slice Type).
- Some slice types can accommodate front and back, but at minimum they need a base
- eg: in the
hair/folder, we can putbowlcut.png. We could also putbowlcut_front.pngand/orbowlcut_back.png - but in the above example, we still need
bowlcut.png, even if it's a blank image
- eg: in the
- all slices are 128 x 128px. You aren't guaranteed to see the top or the sides of this, depending on where the portrait is being displayed
- slices are displayed in the following order (subject to change)
clothing_outer_back accessory_jewelry_bac clothing_inner_back accessory_scarves_back accessory_hair_back hair_back body body_extra clothing_inner clothing_outer head ears eyes_back eyes eyebrows nose_back mouth_bac face_extra mouth mustache eyes_front nose accessory_jewelry accessory_other beard mouth_front accessory_scarves hair accessory_hair accessory_glasses hair_front accessory_hair_front accessory_other_front accessory_jewelry_front accessory_scarves_front
RGB Color System
The other main thing that define our portrait maker is that we dynamically recolor the image in a specific way. The important part to know is that you need to make your slices with very specific colors:
- Magenta (#FF00FF) is used as a "mask", covering up lower layers for slice types set up to do so (e.g. hats cover up hair at all pixels marked with magenta on the hat slice)
- Red, Green, and Blue are our "primary", "seconday", and "tertiary" colors. The easiest way to know which color is being used is to copy another slice in the same category.
- Specific colors map to specific indexes in our 7-color "color ramps", that the user selects in-game. To be recolored, the pixel needs to be an exact match to one of these values.
Index Reds Greens Blues 1 #ff0000 #00ff00 #0000ff 2 #dd0000 #00dd00 #0000dd *3 #bb0000 #00bb00 #0000bb 4 #990000 #009900 #000099 5 #770000 #007700 #000077 6 #550000 #005500 #000055 7 #330000 #003300 #000033
- NOTE: Artistically, we're using index 3 as the "base color" for that entire ramp (not index 4).
Resources
- Photoshop color palette: File:Photoshop recoloring pallete.act
- Aseprite template files: File:Size 1 + half.ase, File:Size 2.ase, File:Size 3.ase
