zoom_in
- comment1
- visibility320
posted 9 months ago, edited 9 months ago
like 4 different people have asked for advice on sunset colours in the many servers im in lately and they got planny of lovely advice from others on exactly that, but i think an understanding of how coloured light affects coloured surfaces can help to understand why certain colours get lost at sunset and in coloured light in general so i put this together :)
More From family_staralternate_emailHarrieSee Morearrow_outward
Responsive 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>trophyHow 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 bangstrophySimilar ArtworksSee Morearrow_outward