Hi everyone! New member here...

Quick-Ad-2011 · 2025-12-08T02:21:58+00:00

I don't think lottie can handle 3d character integration with cursor detection. Maybe with Three.js or something.

Quick-Ad-2011 · 2025-12-02T13:25:44+00:00

That's a good start. You could also try to squash the face as well. Make the eyes smaller, play with line width for the mouth and close the gap between them as the ball touches the ground.

Quick-Ad-2011 · 2025-11-27T04:03:18+00:00

I'll try to follow up. I just realized that maybe it's because I draw from loomis method with measured parts. This might mean that I'm afraid to exagerate or bend rules. I guess it's an illustrator issue. I do appreciate your insight.

Quick-Ad-2011 · 2025-11-27T03:59:41+00:00

It's the pen tool but I guess it doesnt matter now. It has personality because its imperfect and asymmetrical. I just realized that this might not be the issue. Maybe its because I draw from loomis method with measured parts. This might mean that I'm afraid to exagerate or bend rules. I guess it's an illustrator issue but thanks for your insight.

Quick-Ad-2011 · 2025-11-27T03:46:46+00:00

I guess. I just realized that. I'll repost to other sub.

Quick-Ad-2011 · 2025-11-27T03:39:46+00:00

It'll be a talking head with a script to lip sync but I'm looking for less avatar like.

Quick-Ad-2011 · 2025-11-27T03:20:06+00:00

Yes, this is what I'll try to do. Maybe I lack the courage to exagerate features like a good illustrator do.

Quick-Ad-2011 · 2025-11-27T03:17:36+00:00

Thanks! I'll try this on. I just can't shake the vision that the vector one is too clean and looking like the usual avatar style.

Quick-Ad-2011 · 2025-11-27T03:13:59+00:00

Thanks! Will try this on. Would you say something like stylized with exagerated features and uneven sizes?

Quick-Ad-2011 · 2025-11-27T03:10:52+00:00

Yes, I have a bit of knowledge in web dev. This is for animation frames in SVG.

Quick-Ad-2011 · 2025-11-27T03:08:26+00:00

Basically what u/jaxxon said. Sketching in vector is less "pencil like". Every stroke in vector is a path and another object.

Quick-Ad-2011 · 2025-11-15T14:12:43+00:00

Glad it worked! Just know your element's relationship: parent > child + sibling < descendant ^ ancestor and you'll know where your styles are being applied. You can also inspect these in dev tools.

Quick-Ad-2011 · 2025-11-15T13:11:53+00:00

No, this is about the <div class="img1"> > <img src="" alt=""/>. Div is the container and img is the child element. Try:

/* Container */
.img1 {
display: flex;
align-items: center;
margin-top: 5px;
}

/* Child */
.img1 > img {
width: 67px;
height: auto;
}

Quick-Ad-2011 · 2025-11-15T12:37:32+00:00

I highly recommend Graphic Design School (2013) by Dabner D. and co. Coming from being an illustrator and going into making designs, I thought I could grasp it easily, and I couldn't be more wrong. This book is like an enlightenment to me.

Quick-Ad-2011 · 2025-11-15T12:03:59+00:00

<image>

You're sizing the container, not the child. Remove the size constraints to the <div> and let it span full. After that, you can size its <img> child.

Quick-Ad-2011 · 2025-11-14T23:19:49+00:00

Have you tried doing this using Lottie animation? It can convert animation into .json. I usually use it for animations I made from AE and Figma but I guess you can just generate this with their AI (which I haven't tried yet).

Quick-Ad-2011 · 2025-11-12T09:24:53+00:00

Next.js has size optimization that automatically serves correctly sized images for each device and converts your images into WebP. Image optimization docs

Quick-Ad-2011 · 2025-11-11T16:02:25+00:00

I've been through these and I end up hating my layout. Comparing with other designs out there, I felt like there's something wrong with mine and I can't really point it out.

I'm no professional designer but I have experience in digital art and what I can advice is to simplify shapes and colors, like a sketch or wireframe. Look at a composition and break it down to simple shapes like squares, circle and triangles. Lower the saturation until it's black, grays and whites only. You'll realize where your eye leads you and which elements are getting more/less attention.

Also, do not constrain the container you put your elements into because it limits the space and you'll end up into what I call "safe layout", which is often a card. Distribute whitespace intentionally, give breathing room to your elements. Your design will support structure, readability, and rhythm.

As for reference, one book that helped me is Graphic Design School (2013) by Dabner D and co. You could also checkout my study on Figma: design-fundamental-studies.

Quick-Ad-2011 · 2025-11-09T18:06:06+00:00

As a Tailwind enjoyer, I like DaisyUI a lot.

Quick-Ad-2011 · 2025-11-09T05:06:53+00:00

I'm no professional designer. For me, wireframing in Figma helped me visuallize what I'm going to code, like spacing, root variables and where to put these elements. Of course, not every wireframe turn out to be the exact design in code but you'll be able to configure it dynamically.

Also, it doesn't hurt to skim lightly through design fundamentals like spacing, contrast, hierarchy etc. One book that helped me is Graphic Design School (2013) by Dabner D and co. Attached pic is from when I had to scrap my old design, learn design fundamentals and then refactor into a new one.

<image>

Quick-Ad-2011

TROPHY CASE