How To Draw A Hat
Kittyhawk here. Welcome to the world of creating pictures of hats for pictures of kitties on the internet. Kitties are your canvas. Fancies are your guide. Be creative, have fun, and try to follow these guidelines.
You need to understand the technical reality you’re working with. Hats are vector files saved as SVGs. If you don’t know what any of that means then get Googling because you have a lot of work to do before you can start drawing hats.
At a basic level, you open up a picture of a cat. Say, this picture of a cat:
You can find that picture of a cat (sans weird background) here. But any picture of a cat downloaded from the CryptoKitties site should do. You should now have a 3000 x 3000 canvas with a cat positioned nicely in a sea (maybe more of a pond) of white space. Good. If not, then get back to that Googling and figure out how to make it happen.
Now do your thing. Art that baby up. I’ll wait.
Done yet? Great! Now just delete all the pictures of cats in your canvas (you did import like a dozen differently shaped cats so that you can test your art against them, right? Well, I’ll get to that in a bit…) and save your SVG file. You want those pixels to be purrrrrrfect, so make sure you set shape-rendering = “geometricPrecision”. If you don’t know what that means, ask someone under 30. Or do that Google thing again. Or click this possibly helpful link. Hopefully your SVG editor just has a setting you can set and forget.
Sometimes your hat (or ballet slippers, whatever floats your kitty lovin’ boat) will look good on a kitty, but once you remove the kitty there’s a big ugly hole where the kitty used to be. In the KittyHats marketplace you’re not just selling your hat, you’re selling the fantasy of buying a hat. So you may need to create a separate piece of artwork that represents the whole hat to help sell that fantasy. Yes it’s more work. Yes, it’s necessary. The better you make this look, the more kitties will want to try on your hat, and ultimately the more kitties will want to wear it. Either way, you’re going to need to create a separate preview image of your hat, including an actual white (or #000000 black…. If necessary) background.
This preview image should be more or less centered on a canvas that is 360x360, with about 24 pixels of white space margin on the side that has the smallest margin. Go look at some examples on the KittyHats store using the extension if you haven’t already. Adding a nice simple subtle shadow may or may not help sell the illusion, use your best judgement. As with the other image you created, this should also be saved as an SVG with the geometricPrecision rendering flag set.
All done! That was easy! Jump to submission guidelines below! Or, okay, you probably realized that you need more guidelines about the art itself before you’re ready to even start to art that baby up. I like you. Read on.
As an artist, you already know that true black is a blunt instrument not to be trifled with. Crypto kitties were created by other artists, so the truism holds. #31323d is your new black now. Learn to love it. You could go darker for effect, but a pure black is going to look very out of place on a kitty.
Make sure your art works for all different kitty types: mostly that means different body shapes and different eye types. For example, Maincoon’s fur comes down much lower on the body, persian’s hair is taller than any other, and ragdoll’s ears are huge. You can search the marketplace to find any trait you want to check against, so do that and download some SVGs to test against. Throw them on your canvas. Create an Allkitty. As of early January, this is my AllKitty:
If your designs interact strangely with the Allkitty, they’ll probably look bad on some actual kitties. Try to fix that. It’s very likely that your hat isn’t going to naturally interact very well with elk horns so feel free to ignore those for now (sorry, Elk lovers!). But bonus points if your designs work well with elk horns and still look good on all the other kitties (you’re welcome, Elk lovers!).
The Allkitty sits on a 3000x3000 canvas, as do all kitties. As will your artwork, as you recall from the technical guidelines above. This ensures that your hat sits on the kitty how you expect it to sit. Users cannot move, scale, or rotate stickers, so placement is all on you. No pressure!
CryptoKitties artwork (by the brilliant Guile Gaspar) uses a black stroke around elements. It would make sense for your hats to have black stroke as well. But that’s just, like, my opinion, man. Personally, I think that you should look to the fancies for guidelines about how kitty hats should look.
Kitties exist at a certain scale. Yes, as vectors they are infinitely scale-able, but there are certain key sizes where kitties are most often viewed and your hat should looks good and appropriate at that scale. Nobody draws every web line on spider-man when he’s in the far background of a small panel, so don’t do that. Again, fancies are your guide — there’s a certain level of detail there, but it’s not too fine. Too fine and your hat just looks like a mess at a small scale and doesn’t seem to fit in with the kitties. Nobody wants a hat that doesn’t fit in with the kitties. Okay, some people do, but that doesn’t make them right.
You can use any color pallette you want for your CryptoKitties hat, but starting from a base of the existing kitty colors isn’t a bad idea. Who doesn’t want a hat that matches their kitty’s bloodred belly? Crypto kitty fancies often use gradients as well to good effect. Don’t overdo it (unless your hat is inherently inteded to be overdone) but don’t feel like you need to stick with flat colors either.
Kitties have shadows and highlights. They’re easy to see in the source art and if your hat doesn’t have a shadow then you have some explaining to do. Kitties appear to be lit generally from the upper right as you look at them, and are slighly backlit. The placement of your hats’ shadows and highlights should generally conform to and match up with kitties’ shadows and highlights. You’re an artist though so you know this already. I’m just reminding you.
Limited edition variants are fun! Some hats naturally lend themselves to a more generic universal version and a more specific or more colorful version. Some might lend themselves to 16 colored versions. Feel free to create more than one variant of the same hat. But at the same time, don’t overdo it and try to flood the channel with variants of your iWatch. You’re not Apple and this isn’t your store. Be reasonable.
You know what else is fun? Sets that are meant to be worn together! Try designing a hat, shirt, and shoes that all make a cohesive outfit or costume. The devs may ask you to submit them as individual items or they may want the whole set as a fancy costume option for crypto kitties, so get a nice picture of the whole outfit on a kitty.
You’ve done it! You’ve drawn a picture of a hat and now you’re ready to be a millionaire!
Erm, you have heard the axiom of the starving artist, right? (Okay, you’ve also heard that if you put “blockchain” in front of something then it makes you a millionaire, so I guess you’re ready to be a starving millionaire artist?) I love your enthusiasm, but temper those expectations, buddy.
Many will enter, few will win. Also, not all submitted art will be approved and sold. Them’s the breaks. “But my art looks so much better than [insert name of hat here]!” Yeah, well, times change. Standards evolve. Developers become less desperate. Definitely submit your picture of a hat, but just know that nothing in life is guaranteed.
So, “How exactly do I submit my amazing picture of a hat?” I hear you asking.
There’s no formal process in place yet, though this article may be updated once there is. That doesn’t mean you can’t submit artwork. Your best bet is to head to the #artwork channel in the KittyHats discord and post a PNG/JPG of a kitty wearing your hat. Make sure to set the background to the appropriate color (background color corresponds to eye color, if you haven’t already figured this out). Make sure you choose a kitty that shows off your kitty hat to best kittyeffect; this is for marketing and approval purposes. Put your best paw forward. Wow everyone there. One of the KittyHats developers might just contact you and ask you to proceed.
When that happens — grats, by the way! — you’ll be expected to provide a .zip file with your production ready SVG files enclosed in two folders: preview and asset. The asset folder is where you put the 3000x3000 ready-to-be-placed-on-top-of-a-kitty-image SVG file(s), and then the preview folder should contain the 360x360 preview SVG file(s) that I mentioned earlier. An asset image and a preview image for the same hat should always have the same filename (i.e. ./preview/kittyhawkcostume.svg and ./asset/kittyhawkcostume.svg)
Once your approved submission is received there will be a waiting period. Don’t just sit on your hands. They’ll fall asleep. And I don’t want to know what you’ll do with them after that. What was I saying? Right, there’s still work to be done! You can keep drawing new hats, and I recommend that. But you can also start telling all your friends to buy kitties and download the KittyHats extension in preparation for the debut of your new hat, and I HIGHLY recommend that. Seriously, tell all your friends about KittyHats. Why has it taken you so long? You should also hang out and chat with everyone on discord, kick ideas around, offer up constructive criticism or seek some of your own work. We’re not shy. Well, I’m not shy. I’ll see you there!
I get it. I ramble. Here are some key points in bullet form with handy links:
- Download the extension and look at some example hats
- Your hats must look good across a huge variety of kitties
- #000000 is not welcome here¹
- Share a PNG/JPG of a kitty wearing your hat in #artwork to get noticed
- Your hat must be in a 3000x3000 SVG canvas
- Your hat must be scaled and positioned correctly
- You must have a 360x360 preview image (also in SVG format)
I hope you’ve enjoyed your journey through the magical world of pictures of hats on pictures of kitties on the internet. You may have questions. You may have comments. Please join us on discord in the #artwork channel (https://discord.gg/kvNh2gs) and share. I, for one, look forward to wearing your hat.
 Except as a background color in the marketplace when necessary for your hat to be seen, but if you’d used an outline like I recommended you wouldn’t need that, would you?