zoom_in
- comment8
- visibility720
posted last year, edited last year
tamberella released some cloud brushes the other day so i tried them out i like em ^_^
...Mmm......Tasty......Mmm......Tasty....
More From family_staralternate_emailHarrieSee Morearrow_outward
trophyResponsive stamp box snippetsI'm not personally a stamps guy but I'm seeing a lot of inefficient finagling going on with the css display property and float and all sorts of things, so here's some very simple snippets for your stamp boxes: Grid Pros: consistent column layout—3 side-by-side on mobile, 6 side-by-side on larger screens.Cons: capped at 6 side-by-side due to there not being a lot of tailwindCSS available.<div class="grid tablet:grid-cols-6 grid-cols-3" style="justify-items:center;gap:1rem;"><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a></div> <div class="grid tablet:grid-cols-6 grid-cols-3" style="justify-items:center;gap:1rem;"> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> [.. repeat for as many images as desired] </div> Flexbox Pros: Any number of stamps side-by-side, meaning more efficient use of space.Cons: inconsistent column layout, if your stamps vary in size they won't line up as neatly, and it's less predictable how they'll be spaced out on different screens. What might be 12 columns for one person might be 7 for another.<div class="container"><div class="flex flex-wrap" style="gap:1rem;"><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a></div></div> <div class="flex flex-wrap" style="gap:1rem;"> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> [.. repeat for as many images as desired] </div>How I AnimateHow I Animate <div style="justify-items:center;gap:1rem;" class="grid grid-cols-2"><a href="https://sheezy.art/harrie/gallery/thistle-anim"><img class="m-0" src="https://f2.toyhou.se/file/f2-toyhou-se/images/88244143_jrWUFwsSykHWZKU.gif"></a><a href="https://sheezy.art/harrie/gallery/selene-shapeshift-2"><img class="m-0" src="https://f2.toyhou.se/file/f2-toyhou-se/images/88135400_LVr8Td00zu2mqsk.gif?1725780633"></a></div> <h1 style="color:rgb(var(--theme-sheezy-500))" class="text-center m-10 flex items-center"><hr style="margin:1rem;" class="w-full"> ••• <hr style="margin:1rem;" class="w-full"></h1> <h2 class="m-10">The Technique:</h2><video controls="" src="https://va.media.tumblr.com/tumblr_sjna9fkTD91w2sgji_720.mp4"></video> I draw the frames and then I use the liquify tool to push the lines into the next frame and redraw them where I need to. This allows me to keep the lines consistent, but gives me the control of frame by frame animation bc I am still making each frame manually! I also use 3d models as reference to help me with the angles! Super important to use reference while you animate (and with art in general), if youre no good handling 3d models then act it out and record yourself! <h1 style="color:rgb(var(--theme-sheezy-500))" class="text-center m-10 flex items-center"><hr style="margin:1rem;" class="w-full"> ••• <hr style="margin:1rem;" class="w-full"></h1> <h2 class="m-10">The Theory:</h2> i think most people are at least loosely familiar with the 12 principles of animation (if youre not, heres a 2.5 minute video showcasing them! ), but may not necessarily know how to employ them. the main 3 i tend to focus on when I animate is rhythm, telegraphing, and inertia so ill cover those there 👍<hr><h3 class="m-10">1. Timing & Rhythm</h3> Timing is how you space out your frames both in how long an individual cel is held for, and also when you drawn an inbetween of two cels you can favour one cels slightly more than the other instead of drawing the exact average of the cels, giving the favoured cel more timing weight. Left line has the cels evenly spaced out on the timeline, right holds the first cel for longer and the second cel slightly favours the last frame. It creates a more interesting rhythm to the animation! Rhythm is how I think of animation timing. Theres a beat like a song to every animation I make, and creating an interesting beat is what makes an animation fun to watch (for me, anyway): <div style="justify-items:center;gap:1rem;" class="grid grid-cols-2"><img class="m-0" src="https://64.media.tumblr.com/f95ba25b666b915324c7ec44ae50aeca/86d7a319fe449aa5-3f/s640x960/f6f16847fa7bb34a24babb551bf2795f06b99cbc.gif"><img class="m-0" src="https://64.media.tumblr.com/4a74fa9b5e9bfadc54c75fe66715bfa7/86d7a319fe449aa5-3a/s640x960/f593fc5ded0711848be268cfbcb66dde8a01c93a.gif"></div> <hr><h3 class="m-10">2. Anticipation / Telegraphing</h3> Before I animate a big change in movement, I like to telegraph that its coming. Usually this is doing a little counter movement in the opposite direction, but thats not the only way to telegraph a motion, e.g. eye movement can telegraph a head turn! <div style="justify-items:center;gap:1rem;" class="grid grid-cols-3"><img class="m-0" src="https://64.media.tumblr.com/fd753549252561a573f42f8fbc25e88f/86d7a319fe449aa5-29/s640x960/42c8116a8aaf52d51eed1ac341ae1a9e13f33fda.gif"><img class="m-0" src="https://64.media.tumblr.com/e94ad5e171f96579c5d878ae9f6d0d78/86d7a319fe449aa5-09/s640x960/501359236d8a34fb9b4497020e61c79287b94ef7.gif"><img class="m-0" src="https://64.media.tumblr.com/d4e5405f58c1fee067c9cc9ebe1f0129/86d7a319fe449aa5-ab/s640x960/1e58ce994386f00fed2c2e49807c92b4d4f9e0bf.gif"></div> <hr><h3 class="m-10">3. Overshoot / Follow-through / Inertia</h3> Unless the movement is mechanical, it wont come to a hard stop and will have some level of bounce or easing out to it. How much "bounce" you add will have a big impact on how the animation feels, but a very subtle bounce will add a natural feeling to the end of a motion. Secondary animations will use a lot of this, note that the head and the hand have a small amount of continuous motion (primary animation), and then the hair has a lot of bounce and inertia (secondary animation which reacts to the primary animation). Note the different amounts applied to the braid vs the sideburn vs the bangstrophyComics & How I Approach Planning, Panelling, & Thumbnailing themStep 1: Script Rats squeak and scrounge around on the cold, damp stone floor. There's a leak in the ceiling, and their wet fur does little to help with the dank, musky smell that permeates the air. A delicate ear twitches, and the rats scatter—disappearing who knows where. A door swings open and the dim lantern light flickers in casting a warm glow on the cold hard floor, "Don't try any funny business, demon," a voice spits, accompanied by heavy footfalls that echo through the cold corridor. "Why," another voice responds, "I wouldn't dream of it, darling." A playful lilt dances its way through the words. I write my script in prose format, but it really doesn't matter what it looks like—just that you write one at all! It's super important in my opinion! I read a tweet once, it was aimed at indie game devs: A tweet reading: New ideas only seem better because you haven't started making them yet. It's about the common tendency that independant creators have of starting projects, then getting a new idea that seems so much more exciting than the one that's currently being worked on. But more than that, it's the concept that while an idea is there in your head, it's filled with infinite possibility —there's so many different things that it could be, because it isn't anything at all yet. But when you start working on it, it ceases to have infinite possibility because suddenly, it already is something. You could not write anything out at all and jump right into drawing a comic. I've done this many times before—I'd be like, "it's only going to be like four pages, I don't need to write a script for this!" But, in going from idea straight to comic, all those infinite possibilities have to suddenly become...just one. And if you find that you didn't pick the best possibility for that page or that panel... Take it from me, it's much harder to rearrange panels you've drawn and keep everything fitting on that one page, than it is to rearrange sentences in a text document! So, I think, it's worth it to confront the different ways you could approach an idea as early as possible with the least amount of commitment to one way. Write it down, feel your idea out!! Step 2: Find your beats the script from before, highlighted into 8 different sections.This is, obviously, a section from a larger script, but I cut it here because it felt like just enough to fit on one page without being too much. It ended up being 8 beats which, in my experience with the dimensions I work at, at most on a single page I can only fit about 14 panels. That's really pushing it though, on average my pages will only have 7-8! This one being 8 hits that nice comfortable zone I prefer to keep the higher panel counts for high activity pages—the more panels you have, the smaller they have to be and thus the less time readers will be focused on them. If there's a lot of high action content happening, lots of smaller panels will create that du-du-du rapid fire high action feel, but if it's a low action page, having lots of panels might make things feel hectic and rushed when it doesn't want to be! Too few panels though, and things will feel very slow. I have some pages that only have one to four panels, these are during very slow moments when I want there to be a lingering feeling. Just something to think about when dividing up your script! For me, 8 is a nice average not-too-much is happening, without being too slow to progress things. Step 3: divide the page & arrange your beats A blank comic page has been split into panels, colour coded to match the previously highlighted beats, with the corresponding beats in the matching panels. I explain my thought process for what I will be drawing in these panels. So when I'm thumbnailing my comics and figuring out the panel layout, I don't think of panels as boxes I'm arranging on the page—instead, I'm splitting the page up into sections. It's worth bearing in mind, as you read a comic, panels in a row will be read one after the other, but when you go to an entirely new row, your eyes have to go all the way back to the other side of the page. That means there's a slight disconnect between the panel on the right side, and the next panel on the left side. If a series of beats are connected to each other, I try to keep all of them on the same row, and if a beat is not very connected to the other beat before it, I might put its panel onto a new row. As well, I'll split a panel in half horizontally if they're directly connected to each other, or if they're happening at the same time! But, grouping beats together, then dividing the page into rows that can hold these beats together is how I approach panelling a page For further reading, I recommend picking up Scott McCloud's Books "Understanding Comics" & "Making Comics"!He has a lot of very useful things to say about the different types of panels, how the progression of time works in comics, and stuff like that... essential reads for anyone making comics! Step 3.5: A short detour on composing interesting pages I'll let you in on a little (not so) secret—the version of Heart of the Storm that ultimately went live in May of 2024 is not the first attempt I had at drawing it. My first attempt at drawing it was in 2020, and that version never got released to the public... because I went into it with zero planning! No thumbnails, nothing. Before long I found myself incredibly frustrated with the pages I was drawing, but I'd drawn so much and reworking it all was incredibly difficult! Ultimately I stepped away from it to explore making comics differently with some low stakes fancomics . <div class="grid max-mobile:block tablet:grid grid-cols-3"><div style="max-height:500px" class="text-center"><img alt="A comic page featuring Tangled characters. Cassandra is about to strike down Eugene with her sword." class="h-100" src="https://diosmaden.art/tutorials/images/comics/comic1.jpg"></div><div style="max-height:500px" class="text-center"><img alt="Another page, this time featuring Cassandra and Rapunzel, who is offering Cassandra her lady's favour." class="h-100" src="https://diosmaden.art/tutorials/images/comics/comic2.jpg"></div><div style="max-height:500px" class="text-center"><img alt="One last page, this one still a low resolution thumbnail. It depicts Cassandra reaching into the waters of the lost lagoon while lines from La Belle Dame Sans Merci caption each panel." class="h-100" src="https://diosmaden.art/tutorials/images/comics/comic3.png"></div></div> Some pages from those short comics. I think the third one was when I really started to get a handle on things! I learnt a lot from these little comics, and critically with these comics I thumbnailed them and I wrote a script before I drew the final pages, something I was not doing before. I meant it earlier when I said I think it's important to figure out all the different ways to approach things early on... I was speaking from experience! A lack of planning made comics difficult and frustrating and the results were just not what I wanted. So after a much more pleasant comicking experience by planning things out from the start, I decided that with HotS I should start again with a more concrete plan this time. And so I did, and I never regret it! In writing, the common advice goes "show, don't tell," and this applies to many different aspects of writing, but especially to describing things. The other advice is to describe using all five senses—sight, sound, smell, touch, and taste. With these experiments especially I discovered I prefer to write my scripts in prose format—one because I grew up reading a lot of books, but more importantly for two because I think this is just as important to do in comics as it is in prose, and writing it in prose first helps me make sure I think about these things. This is not to say that I think you should write your script in prose—how you write your script is entirely up to you and your personal preferences! As I said earlier—what matters is that you write your ideas down in some form. But what I am saying is to think about the 5 senses while you write it, in whatever form that is. Of course, we only really have sight and sound to work with in a comic, we can't describe the way something smells or how it tastes because we can only use visuals and the occasional onomatopeia, but how you choose to frame your panels will communicate different things! Compare now then, the original page I was drawing in 2020, to the final page I ended up with: <div class="grid max-mobile:block tablet:grid grid-cols-2"><div class="text-center"><img class="m-0" alt="A cropped image of the first half of the original HotS opening page. It is three panels, one of the rats, one of tempest mocking the guard, and a final one of the guard tutting in response. Notably, Tempest's face is plainly viewable in this version." src="https://diosmaden.art/tutorials/images/comics/2020ver.png"><blockquote>Here are the first three panels from the original first HotS page, although really only the first two are relevant, as the third one became the start of the next page...</blockquote></div><img class="m-0" alt="The final page takes the first two panels from before and expands them into an 8 panel page. There is a greater focus on atmosphere, and Tempest's face is teased but unseen on this page, adding to the mystery of the page." src="https://diosmaden.art/tutorials/images/comics/final.png"></div> I think it's safe to say that the redone page is more immersive. This isn't because I increased the panel count (indeed, there are many panels that I cut in the revision), but because I was more thoughtful about the panels themselves and what I was communicating with them! The dank, musky smell and scent of damp fur may not be something I can tell my readers about in a picture—but if I focus on the puddles on the floor, and show the rats' wet fur... they'll feel how dank it is anyway. So, while composing the panels in your comic, consider what you're communicating through them, and whether you're telling what happens, or if you're showing your readers what it feels like to be there and what your characters are going through. It'll help you compose more interesting pages! <h2 class="mt-4 mb-3 text-center">Step 4: Thumbnailing time babeyyyy</h2> The most important thing to understand about thumbnails is you are not creating a finished picture, you are thinking about how you want to approach the finished picture, especially its composition . Thumbnailing is about thinking visually, so be prepared to erase things at any moment , as you might think of something better the next time you look at it! Exactly how refined your thumbnails look is going to vary depending on your purposes and how much thinking you want to do in your thumbnailing pass. Myself personally, I like it if when I come to blow up my thumbnail to page size and start drawing the actual page to not have to think about a single thing, which results in my thumbnails doubling as a sketch and going through more than one pass. For most people, they'll have one pass and exclusively focus on planning the layout in their thumbnails. Again, I said earlier "it's harder to rearrange panels on a page than it is words in a text document", and by this I mean when you draw a panel and then decide it would work better on the next page you now have to cut that panel from one page and move it onto the next, and now there's an empty space that you have to fill on the original page, and on the next page you now have to shift everything about and squeeze it in and move things around to make space for this panel.... That's a hassle!... Unless, you're working small and loose and nothing has been finalised yet, so you have the freedom to shift things about on the page without worrying about erasing things and filling the space. Let it be messy, you're thinking things through! The key thing is that even though personally I do multiple passes with my thumbnails, they still begin with the same initial rough noncomittal phase where I can and will delete things without a second thought, and indeed even at their most refined I will still delete a thumbnail if I don't think it's working. You're not making a beautiful sketch, you're thinking about how you want to approach tackling the final page. This is why I do multiple passes myself, I'm doing an awful lot of thinking upfront. As previously established, I started out doing zero planning and ended up with pages I hated, so now I do perhaps a little too much planning haha, but it works for me! I imagine for most people however, you'll be fine with a little less planning. Here's how my thumbnail passes breakdown: <article class="text-center"><div class="flex flex-col align-items-center p-2"><h3>Initial Rough Pass</h3><img class="my-0 mx-1" alt="Rough thumbnails based on the script from earlier" src="https://diosmaden.art/tutorials/images/comics/rough.png"><blockquote class="p-3 my-auto">The rough thumbnails for the page. This is where most people will end their thumbnails phase! This is perfect for if you're going to be drawing the page within the next few months.</blockquote></div><div class="flex flex-col align-items-center p-2"><h3>Second Pass</h3><img class="my-0 mx-1" alt="The thumbnails from before refined into more of a sketch for me to understand better in a few years" src="https://diosmaden.art/tutorials/images/comics/refine.png"><blockquote class="p-3 my-auto">I however tend to do a second pass to tighten up my thumbnails once I'm satisfied with the layout. <b><i>This is more refined than I recommend most people's thumbnails to be.</i></b> I just do this because 1: I need to read it in three years time, 2: I also send my thumbnails for other people to read for feedback, so I'm not the only one who needs to be able to read them. And critically, 3: I would happily delete any of this if it wasn't working anymore.</blockquote></div><div class="flex flex-col align-items-center p-2"><h3>Values Pass</h3><img class="my-0 mx-1" alt="The thumbnail now has a grey value added" src="https://diosmaden.art/tutorials/images/comics/values.png"><blockquote class="p-3 my-auto">Values are also important to me, they change the readability of a page dramatically! So I like to figure that out early in the process, along with all the lettering. At this point it transitions from "layout thumbnail" and becomes a new thing entirely—a values thumbnail. <b><i>While I don't recommend the previous step to most people, this I do recommend.</i></b> I try keep the page readable with just 3-4 values, and it helps a lot with making clear and easy to read pages.</blockquote></div><div class="flex flex-col align-items-center p-2"><h3>Colour Script</h3><img class="my-0 mx-1" alt="A simple lineless colour version" src="https://diosmaden.art/tutorials/images/comics/colourscript.png"><blockquote class="p-3 my-auto">Also, at least once per scene but sometimes page-by-page for important scenes, I spend some time planning out a rough draft for the colours in a colour script phase, which is like thumbnails but for colour instead of layout and composition.<br><br>Entirely up to you as to whether you want to do this one. I find it benefits me a lot personally, but your comic might not even be in colour! And even if it is, you might not be as overly picky about them as I am ahaha</blockquote></div></article> In anycase as you can see, first I focus on how I'm going to layout the page and frame the contents of each panel, then I come to the value pass and I think about how I am going to utilise value on the page to guide the eye and provide clarity for foreground and background elements, and then if I do a colour script I think about how I'm going to utilise colour to set the mood and retain those values I established before. The goal here is never to make a nice image , but to make something understandable and thought out . It's a plan of attack! By the time I draw the page itself, I know exactly what will go where and how I'm going to execute it. I'll admit freely, not every page I make is as meticulously planned as the rest , they don't need to be! The first few pages got special treatment as I wanted to make a good impression, haha! But while the final thumbnails may be rougher for some pages than others, once I come to draw a page, I always know what I'm doing with it, because I took the time to plan it out first. <figure><img alt="a screenshot of 100 thumbnails" src="https://diosmaden.art/tutorials/images/comics/ch2thumbs.png"></figure> I should also note that I don't thumbnail pages in isolation, and I don't recommend you do either! Thumbnailing entire chapters like I do is a slow process and one that won't suit everyone, but I do recommend that you thumbnail in groups of around 10 pages so you can shift things around between pages and take the time to get a feel for how they're read in succession. For one last note, I recently received a comment from one of my readers thanking me for the inclusion of the prose transcripts on Heart of the Storm as, having read (the original version of) this post, being able to see the prose alongside the direct transcripts and the final page I drew helped a great deal in demystifying the act of translating words into a comic page. I hadn't even considered this, I just added that for accessibility reasons! But that's such a wonderful side effect and I mention this here because if you'd like to see further examples of the script -> page process, you might be interested in looking at some of the pages on my comic's website and expanding the transcript boxes underneath. In anycase, I hope that was enlightening! Best of luck with your own comics ❤️