User:AzlanOnPC/guide to spriting style

'Alright, if you're here, it means you want to get started on contributing to Beestation with sprites! but, as you may have seen, our server aims for a relatively specific style, so if you want your new fancy thing to get it, it has to comply with it! this guide exists for that reason, teaching people how to follow our style, and more clean spriting overall.

Before we start, remember this isn't a 'fix all, do all' guide! its a primer on spriting, and a short guide on how to do certain things related to Beestation's style, you'll find a whole new level of help by talking to other spriters, constructive criticism and observing others!

1. COLORS: turning your color smoothie into something usable

main difference between a proper asset and a 'codersprite' (placeholder sprite made by coders quickly, usually of bad quality) is the usage of colors and noise. [image] for starters, we need to know what a 'color pallete' is, its pretty simple, really: a selection of colors used to color each sprite and keep it consistent, such as the four exact yellow colors used on a welder, also are used on the RCD, or RPED. [image] Most 'old' and 'coder' sprites have tons, and tons of tones per color, from 5 to a whooping 20, for stuff like metal sheets! this, on our case, is bad; we want to keep 4 tones per color, at most, 5 on edge cases such as reflective glass, or mobs:

Darkest: used solely for being the darkest 'outline' of the parts wich use the 'dark' tone.

[image]

Dark: shadows and dark spots of the sprite use it, it is also used as the 'outline' of the lighter parts!

[image]

midtone: your base color! and the middle ground between dark and light. This color will compose the majority of the piece.

[image]

light: this color is used for accentuating light sources, making reflections, and overall making the sprite more flashy! be careful, if overused, you'll end up lowering the quality very heavily.

[image]

2. OUTLINES: This is not Hyper Light Drifter

outlines, for those who dont know, are the pixels that separate your inner sprite from the background and rest of the sprite, and remarks the shape and color of the asset. More specifically, outlines are not a solid color: with our style, they have two colors: dark, and light, for preventing a "solid" outline, wich is a single color; stands out better, but makes the sprite look too... Cartoony.

Other styles of outlining include:

sensitive outlining, wich is based on the outline changing with *every* change of tone inside the sprite. This usualy looks too soft, and mushy, even for a pillow. Avoid it.

Hard outlines: the sprite uses a single color of outline across the entire sprite, giving it that 'sticker-like' look, but making it completely bidimensional. Avoid it.

dark outlines: same as above, but using #FFFF black. *please* avoid it.

Outlineless: yes! sprites without outlines are neat, complex, and if done right, very good looking, some games use this style, such as Enter The Gungeon or Hyper Light Drifter, but we dont use that here, sadly. Avoid it.

[image]

pictured: examples of correct outlining.

[image]

pictured: examples of incorrect outlining!

3. SHAPE: making your potatoes look good.

One of the hardest challenges on ss13 spriting (and pixelart overall) is making a good shape for your sprite, or keeping a few parts consistent, specially clothing.

One way to avoid this would be having a clear picture of what you want in mind: look at references, how other sprites did it, and practice overall. Dont be afraid to modify the shape if you think it can look better! listed below i'll leave a few guides on how to do thick clothing, objects, isometric shapes and such.

[image]

increasing size of human clothes, note how the shoulder curve is still similar on all of them

4. LIGHT SOURCES: you have one lamp, and 0 moths.

Having incosistent lightning is probably the most common mistake on ss13 sprites when you start, since its easy to overlook while you work in pieces. If you just starting, draw a little square on the top of the sprite, preferably on a diagonal axis, and use that to guide yourself after you got a main base down! while doing lights, ask yourself: does the light reach here? is it strong enough here for adding a light tone, or just keeping plain, maybe a little shadow? does this part go under this one, effectively putting it under a shadow? that way you can slowly give your sprites a whole new level of shape, depth and quality.

5. TERMINOLOGY: What do these magic words mean???

Listed here, i'll leave some of the most used terms in spriting:

Anti-aliasing: technique used to make sharp curves and lines softer, by adding lighter pixels around certain edges.

Outline: Darker row of pixels that delimitates and separates the sprite from the background.

Banding: usage of constant 'bands' of color everwhere on the sprite, giving it a gradient look. often considered bad practice.

Gradient: slow transition of a color to another, with a set of colors inbetween.

Color theory: study of colors, their 'temperatures', mixing, feelings and contrast.

Contrast: difference between one color or another.

Hue-shifting: technique used to make sprites more vibrant; consists of whenever increasing or decreasing the brightness of a color, also change its hue slightly, giving it another temperature and a more dark/bright feel.

Dithering: Technique used to make softer transitions between colors and softer materials. Consists on using a 'chess' like pattern of colors to make it look rugged.

'Codersprite': Sprite or asset made by a coder when no other means are available, usually of lower quality than a proper one.

SOUL: 'soul' is the 'ss13' feel an object gives, SOULFUL sprites being things that can be instantly recognized as ss13, such as syndicate hardsuits, clowns or wizards, while SOULLESS being those who don't have, or haven't achieved yet, that instant recognition.

6. SINS OF SPRITING: how you fucked up, and what to do