How to apply a style to an existing shape?

Wondering how to accomplish a certain animation task? Ask here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
swingsoneto
Posts: 26
Joined: Mon Feb 20, 2017 9:23 pm
Contact:

How to apply a style to an existing shape?

Post by swingsoneto »

For the life of me, I cannot make sense of styles. I'm expecting this to behave like materials in a 3DCC app like Blender, or any vector illustration app like Illustrator, or After Effects, etc. That is, you would select a shape with the Select Shape tool, and the Style window would automatically populate with the style that has been applied to the shape (or the colors it was created with). That's apparently not how it works?

I simply can't seem to change the color of a shape I'm working with. I'm really perplexed, and I can't be the only one who thinks the UX in this regard is... totally broken? I'm using Moho 13.5.

I want to attach a gif of what I'm seeing, but I'm having trouble getting gifs to display correctly on this forum.
Daxel
Posts: 996
Joined: Wed Mar 27, 2019 8:34 pm

Re: How to apply a style to an existing shape?

Post by Daxel »

I just explained styles the other day, copy and paste:

Oh, yeah I think the style panel is pretty confusing for begginers, I had a hard time getting used to it. The key is to understand that it is like three panels or modes at the same time, and pay attention to which of these three modes are you actually working with at any moment, which is displayed at the top of the style panel: DEFAULT, SHAPE, and STYLE.

1. The DEFAULT style mode (for when you create new shapes): It acts like this if no shape is selected. And by shape, I mean shape, not the points of a shape (to select a shape you have to use the select shape tool). This is how you used it, because you said you had to select the effect before drawing she shape.

2. The selected SHAPE style mode: if you have a shape selected, the style panel will be all about that shape and will only affect that shape. This way you can do what you wanted to do: to create a shape, then select it and add the shaded effect to it.

3. The saved STYLE mode: in the style panel, you can click on the Styles drop down menu to create new saved styles that you can reuse and apply to multiple shapes, and when you select a saved style the panel will be all about that saved style so you can edit it and it will affect every shape that has that style.

Don't forget checking the official user manual when you need to understand something, its usually the best:
https://lostmarble.net/Manuals/Moho%20U ... ual_HQ.pdf
swingsoneto
Posts: 26
Joined: Mon Feb 20, 2017 9:23 pm
Contact:

Re: How to apply a style to an existing shape?

Post by swingsoneto »

Daxel wrote: Tue Jul 04, 2023 10:30 pm I just explained styles the other day, copy and paste:

Oh, yeah I think the style panel is pretty confusing for begginers, I had a hard time getting used to it. The key is to understand that it is like three panels or modes at the same time, and pay attention to which of these three modes are you actually working with at any moment, which is displayed at the top of the style panel: DEFAULT, SHAPE, and STYLE.

1. The DEFAULT style mode (for when you create new shapes): It acts like this if no shape is selected. And by shape, I mean shape, not the points of a shape (to select a shape you have to use the select shape tool). This is how you used it, because you said you had to select the effect before drawing she shape.

2. The selected SHAPE style mode: if you have a shape selected, the style panel will be all about that shape and will only affect that shape. This way you can do what you wanted to do: to create a shape, then select it and add the shaded effect to it.

3. The saved STYLE mode: in the style panel, you can click on the Styles drop down menu to create new saved styles that you can reuse and apply to multiple shapes, and when you select a saved style the panel will be all about that saved style so you can edit it and it will affect every shape that has that style.

Don't forget checking the official user manual when you need to understand something, its usually the best:
https://lostmarble.net/Manuals/Moho%20U ... ual_HQ.pdf
Hey! Well I've read through this part of the manual myself, and felt it to be - I have to say - completely useless in practice. I think I kinda understood how it's three different panels. What I still don't understand is how to apply an existing style predictably and consistently to a shape I've created. You mentioned (and the manual mentions) "applying" a style to a shape. How do you do that? I can't find any consistent, predictable, repeatable way of doing that as a fairly new user of Moho. Could you help me understand how to apply a style I've just created to a shape I created earlier?
User avatar
Greenlaw
Posts: 9269
Joined: Mon Jun 19, 2006 5:45 pm
Location: Los Angeles
Contact:

Re: How to apply a style to an existing shape?

Post by Greenlaw »

Here's a short and direct explanation.

If you've created a custom style...

1. Select the shape(s) you want to apply the style to using the Select Shape tool.
2. Make sure the Advanced option is enabled in the Style window. This will reveal the Style 1 and Style 2 options.
3. Look under Style 1. Here you will see a list of your custom styles.
4. Select your custom style from the list. It will get applied to the selected shape(s)

If you don't see any styles listed under Style 1 (or Style 2), it means you haven't created one yet. To create a custom style...

1. Look under Styles and select New.
2. Name your new custom style
3. Set the properties for your custom style.
4. Select None from the Styles list.
5. Now when you check Styles 1 or 2, the custom style will be available.

Note that any properties you don't enable in your custom Style means the shape's current property show will pass through there. For example, you can create a custom style that only affects stroke thickness, but doesn't affect stroke color or shape fills. Custom Styles can be a very powerful feature when used appropriately.

You may be wondering why there are two Style lists. This allows you to stack Styles, so where Style 2 has inactive properties, Style 1's active property will appear (or whatever is visible beneath it.)

Hope this helps.

Note: I previously posted the above with an error and this has since been corrected. Thanks to SimplSam for pointing out the error.
Last edited by Greenlaw on Wed Jul 05, 2023 3:07 pm, edited 3 times in total.
User avatar
Greenlaw
Posts: 9269
Joined: Mon Jun 19, 2006 5:45 pm
Location: Los Angeles
Contact:

Re: How to apply a style to an existing shape?

Post by Greenlaw »

Another tip: Be aware that custom styles can contain keyframes. If you don't want your custom style to be animated, make sure you're on frame 0 when setting up the style.
User avatar
SimplSam
Posts: 1048
Joined: Thu Mar 13, 2014 5:09 pm
Location: London, UK
Contact:

Re: How to apply a style to an existing shape?

Post by SimplSam »

Greenlaw wrote: Wed Jul 05, 2023 1:05 am ...
2. Look under the Styles menu in the Style Window. Here, you'll find a list of your custom styles
3. Select your custom style from the list. It will get applied to the selected shape(s)
...
In my (limited) experience of using saved styles you have to select the saved style in the "Style 1" or "Style 2" drop downs, in order to Apply it to the selected shapes.

Image
Moho 14.1 » Win 11 Pro 64GB » NVIDIA GTX 1080ti 11GB
Moho 14.1 » Mac mini 2012 8GB » macOS 10.15 Catalina
Tube: SimplSam


Sam
Daxel
Posts: 996
Joined: Wed Mar 27, 2019 8:34 pm

Re: How to apply a style to an existing shape?

Post by Daxel »

swingsoneto wrote: Tue Jul 04, 2023 11:03 pm
Hey! Well I've read through this part of the manual myself, and felt it to be - I have to say - completely useless in practice. I think I kinda understood how it's three different panels. What I still don't understand is how to apply an existing style predictably and consistently to a shape I've created. You mentioned (and the manual mentions) "applying" a style to a shape. How do you do that? I can't find any consistent, predictable, repeatable way of doing that as a fairly new user of Moho. Could you help me understand how to apply a style I've just created to a shape I created earlier?
As Greenlaw mentioned, you have to select the shape using the select shape tool. I imagine you are selecting the points of the shape with the select points tool, but in Moho shapes and vector points/paths are two different things, which can be a source of confusion at the beggining but it's very useful.
User avatar
Greenlaw
Posts: 9269
Joined: Mon Jun 19, 2006 5:45 pm
Location: Los Angeles
Contact:

Re: How to apply a style to an existing shape?

Post by Greenlaw »

SimplSam wrote: Wed Jul 05, 2023 1:48 am In my (limited) experience of using saved styles you have to select the saved style in the "Style 1" or "Style 2" drop downs, in order to Apply it to the selected shapes.
Whoops! That's what happens when I post Moho advice without checking with Moho first...I give bad advice. Thanks for catching that SimplSam. :oops:

I'll update the above instructions shortly. Update: Done!
swingsoneto
Posts: 26
Joined: Mon Feb 20, 2017 9:23 pm
Contact:

Re: How to apply a style to an existing shape?

Post by swingsoneto »

Greenlaw wrote: Wed Jul 05, 2023 1:05 am Here's a short and direct explanation.

If you've created a custom style...

1. Select the shape(s) you want to apply the style to using the Select Shape tool.
2. Make sure the Advanced option is enabled in the Style window. This will reveal the Style 1 and Style 2 options.
3. Look under Style 1. Here you will see a list of your custom styles.
4. Select your custom style from the list. It will get applied to the selected shape(s)

If you don't see any styles listed under Style 1 (or Style 2), it means you haven't created one yet. To create a custom style...

1. Look under Styles and select New.
2. Name your new custom style
3. Set the properties for your custom style.
4. Select None from the Styles list.
5. Now when you check Styles 1 or 2, the custom style will be available.

Note that any properties you don't enable in your custom Style means the shape's current property show will pass through there. For example, you can create a custom style that only affects stroke thickness, but doesn't affect stroke color or shape fills. Custom Styles can be a very powerful feature when used appropriately.

You may be wondering why there are two Style lists. This allows you to stack Styles, so where Style 2 has inactive properties, Style 1's active property will appear (or whatever is visible beneath it.)

Hope this helps.

Note: I previously posted the above with an error and this has since been corrected. Thanks to SimplSam for pointing out the error.
Ahhh, this was it. The Style 1 and Style 2 dropdowns. I couldn't figure out how those functioned, but I'm starting to get it now, how applied styles can be overridden or replaced by using the shape's custom style's checkboxes. I think one thing I still don't quite get is how, if I select different styles for Style 1 and Style 2, to get part of Style 1 to come through but not be overridden by Style 2. For example:

I check the stroke box, but not the fill, on a custom style called "Stroke Only". Then I keep both boxes checked on a style called "Stroke and Fill" (let's say I want to use this style for both the stroke and fill for other shapes). Now I select a shape and disable the stroke and fill checkboxes of the shape's style. Then I apply "Stroke Only" to Style 1 - now the shape is inheriting the stroke from "Stroke Only", but using its own fill color as the fill. So far so good. If I apply "Stroke and Fill" to Style 2, now the shape inherits both the fill and stroke properties of Style 2.

What I was expecting to happen was for Style 1 to apply the stroke properties, and for Style 2 to apply the remaining "unapplied" fill color (that is, I expected Style 1 to block any further inheriting of stroke properties downstream). How do I get that to happen instead? Bear in mind I'd still like to use the "Stroke and Fill" style on many other shapes as well, so I don't necessarily want to go changing it. What's the workflow?
Post Reply