Cat Sprite Style Guide

(by anju)

This is a guide for keeping the Clangen sprites in a consistent style to the original artwork for it. This is about the cats (or any other animals that might want to be added in the same style) and not about any background, accessories, patrol sprites, or other art.

Keeping accurate to the style may not be important in any mods created by fans, but it should be kept consistent in main game art when possible, or is highly favored to do so.

[!IMPORTANT] All the cat sprites should fit a 50 x 50 pixel box.

Lineart

The lines should be kept at 1 px wide whenever possible. This means most of the free-hand strokes need to be cleaned up.

Like this:

Not like this:

[!NOTE] Exceptions should only be made in places like corners where erasing a pixel would change the shape in an odd way or make things unclear (often the ears).

Any lineart that goes inside the cat outline should be at 50% opacity (the ear was an exception in one sprite). They should be used very sparingly- only in places where the shape/pose of the cat would look odd and unclear otherwise or to give the sprite depth, aka helping you see what is at the front and what is at the back. Otherwise they should be left out. Very small line extensions can be used inside the sprite if it looks good.

Examples;

This apprentice doesn’t have any helper lines, because you can see from a glance that it is holding one front paw up and other legs down, and tail up. The raised paw can be interpreted from either side of the cat, but it doesn’t confuse the eye most times and thinking about perspective, the pose looks flat either way.

This sprite uses helper lines because without them, the pose would look odd and confusing at first glance, and you couldn’t tell front legs from back legs. The helper lines also help show the depth of the sprite.

Example of how said sprite would look without helper lines.

Shape

The cat sprite proportions are not realistic, even the adults and elders have big and wide heads compared to real life cats. Kittens even moreso. They also have wide stubby legs and big eyes, and short bodies. This stylization makes it easier to give the cats more expressiveness and personality even at very small sizes. No mouth visible unless it’s important for a specific pose, and a single pixel for a nose.

I’m sure you can see the difference ^^

[!TIP] It’s good to come up with poses where the cat has an interesting and clear silhouette. This is good for character design in general. You can also find guides online to help with cat body language, so you can get ideas on how to show expression & personality through small changes in the pose.

Coloring & Pelts

Cat pelts are specific patterns on the cats that come in multiple colors. I’ll be referring to the stripes and spots and other markings on those as “patterns” and the colors underneath the markings as “base color”.

Pattern shapes should be clearly defined, not smudgy or blendy, and the more subtle differences in the fur color are shown with gradients. Airbrush is very good for the gradients. There are exceptions, but clear pattern shapes are preferred, and often gradient colors soften the bluntness of the pattern shapes anyway.

Oftentimes the gradient on the pattern is in reality more dramatic than what you’d expect looking at them, so don’t be afraid to make yours properly visible as well. You can look at already existing pelts to see if yours is visible enough.

[!TIP] Personally I use a pure black airbrush to make most of the pattern gradients. The result isn’t an actual black of course, because of the softness of the brush, it just darkens any color a good amount to be a visible change.

Kittens usually have very simplistic pattern shapes designs compared to others. This is to keep the ‘simple is cute’ look, but also so that their small size doesn’t make the patterns look too cluttered.

Colors

As of writing this, there are a total of 19 different pelt colors; WHITE, PALEGREY, SILVER, GREY, DARKGREY, GHOST, BLACK, CREAM, PALEGINGER, GOLDEN, GINGER, DARKGINGER, SIENNA, LIGHTBROWN, LILAC, BROWN, GOLDEN-BROWN, DARKBROWN and CHOCOLATE.

Every pelt type should be colored in all of those 19 colors. If any new colors are added in future, those colors are added to the existing pelts also.

While the colors can be quite straightforward with how they’re colored, there are some general rules as well as individual color quirks to a few of them that should be followed.

General:

Most pelts have a little gradient of lighter color on their chest, running all the way from the face to their front legs and bellies (on certain sprites). You’ll want to keep this gradient a subtle and smooth transition onto the other color. As a tip, it’s also usually better to use a different hue color for the lighter area than the base color for more interesting look, such as using pale yellow on an orange or brown pelt.

[!CAUTION]

Here’s what you want to avoid - the gradient transition isn’t subtle or smooth enough, so it ends up looking more like a simple brushstroke than a gradient as intended. The lighter color is also the same hue as the base orange, so while it doesn’t look bad, it’s less vibrant than using a different hue would be.

Individual Color Quirks:

• All or most GHOST -colored pelts have lighter colored patterns than their base color. This is based on ghost tabbies in real life, that have black faces and extremities and lighter grays in their striped areas.
• While the base colors (excluding the pattern aka stripes and spots etc.) for most colors consist of two colors, (the base color and the lighter fur on the chest/face), SILVER and GOLDEN colored pelts as well as all brown pelts have a third color on their backs; A bit darker blueish gray on SILVER, a bit more reddish orange on GOLDEN, and different types of grays on the brown cats. You should try copying them from the existing pelts or draw your patterns on top of the single-colored pelts that already have them.

White Patches

White patches are the patches of white that are combined with the base pelt colors. Please keep them separate from those pelt colors. The game has a function for generating tints for these patches that alter the hue and shade of them slightly, in 5 colors: “none” (pure white), “offwhite”, “cream”, “darkcream”, “gray”, and “pink”. You don’t need to worry about them. The white patches you design should just be a pure white color, the game will handle the rest of the color variation.

When designing white patches for the cats, please use the pixel brush! By this I don’t mean simply a brush that is the size of 1px, but a brush that will specifically only draw solid pixel-y squares with no soft edges, as seen in above images. There are some patches in the game that may not follow this advice, but it is highly recommended (and you may be asked to re-do your patches if they do not follow this advice).

Having semi-transparent parts in your white patches design is totally ok. However, to follow the style & to not look jarring, when you are using transparency for a gradient effect, please make these transparent parts into solid “waves” of white using the same pixel brush (with varying levels of opacity) instead of using other types of brushes to create gradients. This lets the spritework look more clean and deliberate.

Shapes:

When you draw out the shape of the patches, try to give them more depth by following the imagined shape of the cat! In this example, the patches on the first image look very flat, because they ignore the curve of the cat’s back and neck towards the camera and how that alters shapes. The second image shows the patches looking more natural because they curve slightly according to how the cat’s 3D depth would be imagined.

Accessory Style Guide

by scribble (scribblecrumb)

Accessories (Accs) range from collars to leaves scattered through fur. We want to take care that any new accessories follow these guidelines:

• Do not obscure a significant amount of the cat (at most 1/3 of the cat may be covered)
• Accs should always be attached to the cat (exceptions allowed for younger age stages). We don't want an acc to be a snail sitting next to the cat, for example.
• Likewise, accs should generally avoid being a living animal. There's some leeway here, with insects for instance. But we don't want a mouse clinging to the cat or a snake winding around it's shoulders.
• Natural accs (plants, feathers, ect.) should be attached to the cat in a believable way. There is some suspension of disbelief when it comes to the attachment of these accs, but we do want to keep it within the realm of believablility. This mostly pertains to the ability of cats to tie knots or obtain rope/string. For the most part we want to avoid necklaces or "jewelry"-like accs. However, if you have a good explanation for an acc that disobeys this rule then feel free to present it! Nothing is ever completely out of the question.
• Avoid making natural accs out of plants that are outright poisonous to cats, unless there is canon evidence for warrior cats interacting with it positively.
• Do not create feather accs that place the feathers near the head/ears. While there is much nuance and discussion to be had surrounding the use of feather decorations within Warriors fanworks, we have decided to allow feather accs as long as they are not attached to the head of the cat.
• New man-made accs (i.e. collars) must be made with the full range of colors (as of the writing of this guide, these are: ["CRIMSON", "BLUE", "YELLOW", "CYAN", "RED", "LIME", "GREEN", "RAINBOW","BLACK", "SPIKES", "WHITE", "PINK", "PURPLE", "MULTI", "INDIGO"]). Please reference existing sprite sheets to match colors as best as possible.
• Accs feature slight shading. Obviously we don't have much room for detail here, so use your best discretion regarding the level of shading to include.

[!TIP] Less is more! Accs are teeny tiny, you don't have many pixels to work with. Simplify, simplify, simplify!

Also, keep gravity in mind. It's fun to let accs hang and drape off of the cat, and it makes them feel more real.

Linework

Any linework that goes outside the cat sprite silhouette should be black, any linework that is inside the cat sprite silhouette should be colored.

[!TIP] You can use black lines vs. colored lines to imply depth! This acc, for example, allows the black lineart of the cat's head to cover one side of the acc, implying that the acc is behind it's head. If colored lineart had been used instead, it would have appeared that the acc was in front of the cat's head.

Camp BGs Style Guide

by scribble (scribblecrumb)

Camp BGs are the background image you see when viewing the Clan screen. They are meant to portray the camp that the Clan lives within. During Clan creation the player has the opportunity to choose the biome their Clan lives in and then the camp within that biome that they will occupy. Each biome has different camps available.

Camps must have day/night variations as well as seasonal variations. They must feel unique to the other available camps. We don't want to provide the user with a ton of extremely similar options, rather each option should have it's own distinct identity.

BG Planning

[!IMPORTANT] Your canvas should be sized to 345x302 px.

Current Biome Types: Forest, Beach, Plains, Mountainous (Desert and Wetlands to be added)

BG conceptualization is an important step. We want all the BGs to feel unique from each other. We have limited space, so redundant concepts should be discarded in favor of more fresh ideas. Be sure to discuss with other BG artists as well so that we don’t accidentally begin work on identical concepts.

When sketching your BG, remember to keep scale in mind. You want this BG to match with the scale of the cat sprites that will sit on them. Use the template to estimate cat size or pull sprites from the Resources folder and size them down to fit on the template. Keep in mind that cat positioning and den label positioning can be tailored to the BG, but we should still follow the rough template to keep dens in the same area of the screen.

template

When planning, keep the den positions in mind. While typical composition rules don’t necessarily apply for this, it is still important to focus on the flow of your BG. It should feel as natural as possible, which can be difficult when we are constrained to working around set boundaries. The den positions do not necessarily need to be inside the den, they can be just outside, such as small clearing outside of a den entrance. Get creative with these! Fallen trees, woven brambles, caves, tunnels, ect. Take a look at the current BGs and study how they've integrated their dens.

The perspective should be mostly top-down and slight ¾ view. Perspective rules can be bent a bit for this, it doesn’t need to follow traditional rules as long as it still looks good. If you observe the style references you can see that I tend to bend the perspective.

this is an incredibly loose perspective guide for the purpose of demonstrating what I'm explaining.
As you can see, the horizon line is very close to the top of the canvas. You're essentially bending your perspective from a straight-on view at the top of the canvas to a top-down view at the bottom of the canvas. In general, keep your perspective loose but believable, you don't even need to follow this perspective guide exactly.

Style Guidelines

View these guidelines as loose suggestions and advice to achieve the style we’re aiming for.

General Style

Our style is very painterly in that it doesn’t focus on lineart and is fairly loose.

[!TIP] I suggest finding a brush that has a very low anti-aliasing, but not no anti-aliasing. My go-to is a crisp brush that is a bit naturally jagged/textured. If you use CSP then I can toss you the brush file, just ask me over discord.

I always start big and refine down to small details, which I find works well for achieving that loose look. To do this, I first create my sketch (this is rather unrefined and loose, but has enough in it to get the idea of what I’m doing) and then I use a brush at a larger size to block out sections of color, following the guidelines my sketch has set. Once I have the canvas filled with these blocks, I make my brush smaller and begin refining the shapes and adding new colors or shading as I see fit. I try to keep my eye on the image as a whole, rather than focusing on one small area. To ensure I don’t focus too much on one place, I will usually keep my canvas zoomed out enough to see the entire image. I continue working with a smaller and smaller brush as I add more detailing. Details should be kept limited, however, I very rarely worry about it being “pixel perfect”. The majority of detailing in my BGs is less intentional detail and more the illusion of detail caused by that naturally jagged brush I mentioned.

sketch

basic coloring mapping

refined base

seasonal additions

Color

You should avoid ever using straight black or white in your BG. The only place I consistently use white is in snow. Your darkest darks shouldn’t be black, but should instead be a very dark color, typically a contrasting color to whatever the majority hue is in your piece. I generally don’t use monochromatic colors when shading. So if I’m shading a reddish object, I usually wouldn’t use a darker red. It’s much more dynamic to use a cool hue when shading and to vary your shading colors away from the base color of the object. If you’re struggling to find a color to use, try color-picking from elsewhere in the image. Doing this will keep the color palette more limited and help everything look more cohesive.

Lighting

Lighting should be kept pretty ambiguous. The majority of my BGs have sort of “middle of the day” lighting, but I rarely worry about adhering to a strict light source. There are exceptions of course, like my mountain cave BG which has a very obvious light source. Though, even in that BG, the lighting is still pretty uniform across the image.

Remember, the cat sprites that will lay over top of your BG will not be modified in any way. They will not appear to be affected by any lighting. This becomes far more apparent and jarring when your BG has stark lighting changes.

Seasons

It’s good to keep in mind what you will be changing throughout the seasons. This is something you should plan for ahead of time. I’ve found it easiest to make sure I separate out my layers according to what will be changed. Grass/plants growing and dying throughout the seasons is an easy and simple indicator. Adding in small details like med cat herbs or kit toys that change with the season is also a fun touch that people appreciate.

I also like to adjust the hue and saturation (or even get really specific abt colors with color balance) according to the season. Leafbare being less saturated and more cool colors, Greenleaf with warmer colors and higher saturation, ect.

You can reference leafbare BGs that are snow-heavy to get an idea of how snow should look (keep in mind that some climates won’t have a lot of snow.) I usually use three colors: pure white, a close-to-white blue, and a slightly darker purple. Snow should drift and collect against objects inside the camp. If you don’t have personal experience with how snow acts then I’d suggest looking up some reference images to get a feel for it! It’s also good to consider both where cats would be walking and tracking through the snow as well as the positions that the cat sprites can take on the snow. Spots where a sprite might be should have tramped down snow or no snow at all in order to prevent the sprites from looking like they are “on top” of the BG instead of within the BG. Adding in cat tracks on other spots like a path to the camp entrance or paths between dens is also a fun detail.

The trampled snow shows you that this camp is lived in despite not seeing any cats!

Dark Mode

When converting a BG to Dark Mode, use a dark blue layer set to Multiply with a lowered opacity (opacity should be adjusted as needed to ensure the BG isn’t too dark). Then adjust the saturation of the image to be lower and the hue to be more blue. This, of course, should be adjusted individually for each variant. Use your best judgment. Reference other dark mode BGs to be sure that your BG isn’t significantly darker than the majority.

Style References

Full BGs

These are just a few of the BGs I’ve done. If you’d like more references, then you can pull other BGs from the game Resource folder.

Specific Textures

Use these images as guidelines for how to stylize certain elements. Please don’t feel constrained to replicate these exactly, rather use them as a guide to better keep our style consistent.

#TODO: add images Moss. Grass bedding. Woven brambles.

#TODO: add images Beach grass. Cliff trees. Grass/Woven grass.

#TODO: add images Various bark textures.

#TODO: add images Flat rock. Rocks along a tide pool. Rounded/water eroded rocks.

#TODO: add images Various types of rock walls. Mountain cliff. Tidal cave. Beach cliff.

#TODO: add images Frozen water. Cloudy swamp/marsh water. Tidepool water. Cave pool.

#TODO: add images Snow “dusting”. Snowflakes. Trampled snow.

Tutorial Sheets

These were created for people asking for advice on the Discord, but I figure they could be helpful here as well. If you ever have questions about how to go about drawing something specific, just ask!

Rocks

#TODO: add images

Woven Grass/Brambles

#TODO: add images

Patrol Sprite Style Guide

by scribble (scribblecrumb)

Patrol sprites are the images seen alongside the patrol text. They're meant to be demonstrative of the patrol text.

Patrol Sprite Workflow

[!IMPORTANT] Canvas size should always be 300x300 pixels!

Lineart and General Style

• We want to aim for semi-realism, a cartoon-y style is to be avoided. Extraneous lines and details should be kept to a minimum, less is more!

[!IMPORTANT] An exception to this would be inner ear lines, these should generally be present, though still very minimal.

• When possible, try to have the entire cat visible, but remember that when a prompt does not directly include a cat, it’s fine not to have a cat visible at all. In other words, it’s good practice to either have the entire cat visible or no cat visible, anything in between should be kept for rare exceptions.

• Try to only include one cat in the image, unless a second cat is directly mentioned or a group is implied.

• Generally avoid pupils for the cats, unless you feel it is absolutely necessary.

• Long fur is kept very “rounded” at the tips. It shouldn’t feel too “spiky”.

• You are allowed to feature some blood and gore in your art. We do allow players to censor patrol sprites, so it can be good practice to create a "clean" version of any art that features gore, however this is not required. Any gore should be limited. We aren't looking to have guts spilling out or blood flooding the screen.

An example of the level of gore we allow.

• Border lines are generally drawn as straight, white, dash lines.

• Environments should be kept minimal and ambiguous unless the patrol references a specific biome or environment. If including an environment, try to avoid having it fill the entire canvas. These should be drawn in a lineless/mostly lineless and painterly style!

some examples of patrol sprites that include environments

• Don't be afraid to make patrol sprites that are purely environmental and feature no/minimal animals

[!IMPORTANT] Line width should be kept to 1 px as much as possible. This means removing any places where two pixels are side by side. Just setting your brush to 1 px wide isn’t sufficient here (unless you’re using a program like aesprite that has pixel perfect settings), you’ll have to clean up your lineart manually.

[!TIP] This graphic can serve as a helpful reference for drawing each age stage. Keep in mind that apprentices generally look like small adults!

Color Palettes

We work off of strict color palettes for cat silhouettes and other specific entities. We do not use "normal" cat colors for cats shown in patrol sprites because we want the player to be able to "visualize" the cats from their patrol into the patrol sprite.

Cats are color-coded by status, follow the below ref sheet.

• As you can see, some ranks (app and med cat) have specific colors, while other ranks (like warrior and leader) have no specific colors. If the patrol text does not refer to a cat as being an app or med cat, then you should use the "unspecified rank" colors. There are multiple "unspecified rank" palettes to choose from in order to make it easy to distinguish multiple "unspecified rank" cats from each other.

• Dead cats are a little special in that they break our usual black lineart rules. They have an extra lineart color that should be used sparingly. The nose/mouth and eye lines should use this line color. Any parts of their lineart that appear to be floating away, wispy, or dripping, should use this line color. Always remember to gradient back into black lineart on the more "solid" parts of their body. StarClan cats also come with two extra "star" colors. Stars should be 1 or 2 pixel dots clustered throughout the pelt and should alternate between the two colors.

• Cats from other Clans receive a heavy black gradient. This should cover nearly 2/3rds of their body.

• The Dangerous Entity colors should be used for anything actively threatening the cats or if the cats are described as feeling threatened. If an eagle is diving at a cat, it should be colored as a dangerous entity. If an eagle is just flying through the sky minding it's business, then it should be colored like an eagle. These colors can also be used for nonliving things, such as suspicious paw prints.

• Non-aggressive animals that aren't cats should be drawn with realistic colors.

examples of non-aggressive animal coloring

[!IMPORTANT] When using gradients, please ensure that the gradient is always a straight up and down gradient, from the top color on the palette to the bottom color on the palette. Make the gradient very gradual, there should not be a distinct separation of color.

Drawing Twolegs and Monsters

Silhouette and the predator colors. Keep the red concentrated at the bottom and ensure that the shoulders up are dark. Remember that Twolegs are mysterious and should feel very unsettling to the cats.

Monsters can be done with realistic colors unless they are being “aggressive” towards the cats in the patrol. In which case, use predator colors for the monster. (i.e. a car just doing its business driving by should be normal colors. A car swerving to hit a cat or bearing down directly on a cat should scream DANGER and have predator colors)

Concepts

When sketching out ideas for a patrol sprite, try to get creative with it! We want our patrol sprites to be dynamic and interesting, try to avoid static poses. Try to avoid communicating a cat's thoughts/intentions via thought/speech bubble. Instead, find a way to demonstrative that intention (show don't tell!) For example, if the prompt is a cat thinking about crossing the river, maybe even if the first instinct is to have a thought bubble of the river (since the cat is "thinking" about a river). Instead, the art could be a cat who is looking at a river/looking to the other side of the river from a bit further way, or maybe you see the cat testing the stones on the river. Or, perhaps a cat thinks there isn't enough prey? Maybe the cat is imagining a transparent image of prey in front of them that they're reaching for, or they've only found bones to munch on.

Feel free to illustrate more "abstract" concepts as well, like scent trails or storytelling. Check out these examples of abstract concepts.

We encourage you to play with perspective as well as close-ups/zoom-outs!

Dead Cats

Dead cats receive a little extra stylization. StarClan cats should appear wispy and incorporeal, as though they are drifting apart. They are also allowed stars. Unknown Residence cats should appear misty and foggy, as though fading away. Dark Forest cats should appear dirty and dripping, as though they've just dragged themselves out of blood and muck. They can also feature scarring, which should be included in the lineart as solid black scars.

UI Style Guide

by scribble (scribblecrumb)

#TODO: in progress

Color Palettes

#TODO: create ref sheet for all colors currently established, INCLUDE HEX

Margins and Other Guidelines

#TODO: talk about guidelines regarding the actual creation of new UI screens (margins, busy vs. empty, reuse of old elements, ect.)

Overall Style

#TODO: talk about wooden style and basic guides regarding color and linework

Button Style

#TODO: buttons specifically, talk about different button styles and their typical uses within the UI

Other Established Element Styles

#TODO: discuss the styles of other elements like borders, windows, frames, ect.