Pixel Art - Revision history

Ripcurl: /* Resources */

2026-09-01T20:45:26Z

Resources

← Older revision		Revision as of 20:45, 1 September 2026
Line 67:		Line 67:
	=== Resources ===		=== Resources ===
	* Photoshop color palette: [[File:Photoshop_recoloring_pallete.act]]		* Photoshop color palette: [[File:Photoshop_recoloring_pallete.act]]
			* Aseprite template files: [[File:Size 1 + half.ase]], [[File:Size 2.ase]], [[File:Size 3.ase]]

Olive: Added link to color palette for photoshop

2026-07-22T16:32:14Z

Added link to color palette for photoshop

← Older revision		Revision as of 16:32, 22 July 2026
Line 64:		Line 64:

	* NOTE: Artistically, we're using index 3 as the "base color" for that entire ramp (not index 4).		* 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]]

Olive: copied in carpenter's pixel art guide from discord

2026-07-22T16:22:59Z

copied in carpenter's pixel art guide from discord

← Older revision		Revision as of 16:22, 22 July 2026
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 `hair/` folder, we can put `bowlcut.png`. We could also put `bowlcut_front.png` and/or `bowlcut_back.png`		** 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 ~~the~~ example, we need `bowlcut.png`, even if it's a blank image		** 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)

	~~ZCAT.~~clothing_outer_back~~: 15,~~		clothing_outer_back
	~~ZCAT.accessory_jewelry_back:17,~~		accessory_jewelry_bac
	~~ZCAT.~~clothing_inner_back~~: 20,~~		clothing_inner_back
	~~ZCAT.~~accessory_scarves_back~~: 25,~~		accessory_scarves_back
	~~ZCAT.~~accessory_hair_back~~: 29,~~		accessory_hair_back
	~~ZCAT.~~hair_back~~: 30,~~		hair_back
	~~ZCAT.~~body~~: 50,~~		body
	~~ZCAT.~~body_extra~~: 51,~~		body_extra
	~~ZCAT.~~clothing_inner~~: 55,~~		clothing_inner
	~~ZCAT.~~clothing_outer~~: 59,~~		clothing_outer
	~~ZCAT.~~head~~: 60,~~		head
	~~ZCAT.~~ears~~: 63,~~		ears
	~~ZCAT.~~eyes_back~~: 65,~~		eyes_back
	~~ZCAT.~~eyes~~: 66,~~		eyes
	~~ZCAT.~~eyebrows~~: 67,~~		eyebrows
	~~ZCAT.~~nose_back~~: 68,~~		nose_back
	~~ZCAT.mouth_back:69,~~		mouth_bac
	~~ZCAT.~~face_extra~~: 71,~~		face_extra
	~~ZCAT.~~mouth~~: 72,~~		mouth
	~~ZCAT.~~mustache~~: 73,~~		mustache
	~~ZCAT.~~eyes_front~~: 76,~~		eyes_front
	~~ZCAT.~~nose~~: 77,~~		nose
	~~ZCAT.~~accessory_jewelry~~: 80,~~		accessory_jewelry
	~~ZCAT.~~accessory_other~~: 81,~~		accessory_other
	~~ZCAT.~~beard~~: 86,~~		beard
	~~ZCAT.~~mouth_front~~: 87,~~		mouth_front
	~~ZCAT.~~accessory_scarves~~: 89,~~		accessory_scarves
	~~ZCAT.~~hair~~: 90,~~		hair
	~~ZCAT.~~accessory_hair~~: 91,~~		accessory_hair
	~~ZCAT.~~accessory_glasses~~: 92,~~		accessory_glasses
	~~ZCAT.~~hair_front~~: 94,~~		hair_front
	~~ZCAT.~~accessory_hair_front~~: 95,~~		accessory_hair_front
	~~ZCAT.~~accessory_other_front~~: 96,~~		accessory_other_front
	~~ZCAT.~~accessory_jewelry_front~~: 97,~~		accessory_jewelry_front
	~~ZCAT.~~accessory_scarves_front~~: 99,~~		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		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 ~~parts of other slices, sometimes~~		* 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: it's extremely important you use ''exactly'' the color above. At this point #222200 doesn't map to anything (though it may in the future "blend" the two colors together). And #210000 also doesn't map to anything		* NOTE: Artistically, we're using index 3 as the "base color" for that entire ramp (not index 4).

	* NOTE: Index 3 ~~is important, because that's~~ the "base color" for that entire ramp (not index 4). ~~Not all of the slices currently respect this, but they will. eventually~~

Olive: /* Portrait Slices */

2026-07-13T22:56:40Z

Portrait Slices

← Older revision		Revision as of 22:56, 13 July 2026
Line 1:		Line 1:

	== Portrait Slices ==		== Portrait Slices ==
	~~- First and foremost, our portraits~~ are made by lining up a bunch of portraits in order, kind of like a complicated sandwich. These are called 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).		* 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 `hair/` folder, we can put `bowlcut.png`. We could also put `bowlcut_front.png` and/or `bowlcut_back.png`		** eg: in the `hair/` folder, we can put `bowlcut.png`. We could also put `bowlcut_front.png` and/or `bowlcut_back.png`

Olive: /* RGB Color System */

2026-07-13T22:46:28Z

RGB Color System

← Older revision		Revision as of 22:46, 13 July 2026
Line 1:		Line 1:

			== Portrait Slices ==
			- First and foremost, our 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 put `bowlcut.png`. We could also put `bowlcut_front.png` and/or `bowlcut_back.png`
			** but in the above the example, we need `bowlcut.png`, 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
			* slices are displayed in the following order (subject to change)

			ZCAT.clothing_outer_back: 15,
			ZCAT.accessory_jewelry_back:17,
			ZCAT.clothing_inner_back: 20,
			ZCAT.accessory_scarves_back: 25,
			ZCAT.accessory_hair_back: 29,
			ZCAT.hair_back: 30,
			ZCAT.body: 50,
			ZCAT.body_extra: 51,
			ZCAT.clothing_inner: 55,
			ZCAT.clothing_outer: 59,
			ZCAT.head: 60,
			ZCAT.ears: 63,
			ZCAT.eyes_back: 65,
			ZCAT.eyes: 66,
			ZCAT.eyebrows: 67,
			ZCAT.nose_back: 68,
			ZCAT.mouth_back:69,
			ZCAT.face_extra: 71,
			ZCAT.mouth: 72,
			ZCAT.mustache: 73,
			ZCAT.eyes_front: 76,
			ZCAT.nose: 77,
			ZCAT.accessory_jewelry: 80,
			ZCAT.accessory_other: 81,
			ZCAT.beard: 86,
			ZCAT.mouth_front: 87,
			ZCAT.accessory_scarves: 89,
			ZCAT.hair: 90,
			ZCAT.accessory_hair: 91,
			ZCAT.accessory_glasses: 92,
			ZCAT.hair_front: 94,
			ZCAT.accessory_hair_front: 95,
			ZCAT.accessory_other_front: 96,
			ZCAT.accessory_jewelry_front: 97,
			ZCAT.accessory_scarves_front: 99,

	== 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		* 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

Olive: copied in color system

2026-07-13T22:44:17Z

copied in color system

New page

== 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 parts of other slices, sometimes

* 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

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: it's extremely important you use ''exactly'' the color above. At this point #222200 doesn't map to anything (though it may in the future "blend" the two colors together). And #210000 also doesn't map to anything

* NOTE: Index 3 is important, because that's the "base color" for that entire ramp (not index 4). Not all of the slices currently respect this, but they will. eventually