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.
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