Ring Mask Rotation

[LMABit]

Hey guys, I was wondering if anyone knows how to create a ring that reveals based on angle rotation. Imagine a rotating knob that has a ring around and acts as a meter to show the current dial volume level. What would be the proper easy way? I guess that would only be possible in AE, right?

 

[IamSam]

Hello and welcome.

Something like THIS.?

 

[LMABit]

Hello and welcome.

Something like THIS.?

Hi and Thanks! That's it exactly but it ain't for the web that's why I asked here. I need to make individual frames for a filmstrip.

 

[jkemp]

You need it to be animated ? Interactive ?

 

[LMABit]

You need it to be animated ? Interactive ?

Yeap that's the complicated part. The ring grows with the knob rotation angle.

 

[jkemp]

It's still not that clear... You talked about "individual frames for a filmstrip"... You could probably build something fast in PS and save frames from there... but it's wwaaaaayyyyy easier to achieve in after effects. Then, if you actually need it to be interactive... I'm just not sure I understand how it's gonna be used...

 

[LMABit]

It's still not that clear... You talked about "individual frames for a filmstrip"... You could probably build something fast in PS and save frames from there... but it's wwaaaaayyyyy easier to achieve in after effects. Then, if you actually need it to be interactive... I'm just not sure I understand how it's gonna be used...

Well, it's not that difficult. I will have to create frames like you would need for a gif. Instead I will have to stitch the frames myself because its how it works for UI design when you cannot code it. Some coders use individual images but sometimes you are forced to have strips. I mostly do audio plugins and I wanted to know if I could do that in Photoshop so I can avoid going to AE just for that. If I have no other choice that's what I will do.

 

[LMABit]

Also, It doesn't matter really how I have to save each frame. You can do that animation in PS or you can't. So the question was if there was a way to achieve that in PS. You, for instance, create a ring with some layer style then try to make it grow around a circle from left to right. It would be like a self-drawing line following a path or a ring that has an angle mask. That is easily achieved with some other software but the point was working in PS.

 

[jkemp]

Sorry to say this is not how PS works. Someone might come with an idea of how to do it... but I'd say if you have access to AE, and know how to do it in AE... then just do it. It's a fairly easy thing to do...

 

[hawkeye]

Would a knockout layer help?

 

[jkemp]

That's one pretty cool way to do it.... Could also be a layer on top which you rotate the same way... As long as you can put the anchor point right in the middle, you'd be able to work it out.

Won't be animated though... That's why I'd say AE is better suited for the job...

 

[LMABit]

Sorry to say this is not how PS works. Someone might come with an idea of how to do it... but I'd say if you have access to AE, and know how to do it in AE... then just do it. It's a fairly easy thing to do...

I know how PS works and I know its limitations I just wanted to know if I was missing anything.

 

[LMABit]

Would a knockout layer help?

No, it won't as it doesn't let you reveal the masked ring from let's say -120 to 120 degrees. I got a few options to achieve this so yeah as I said I was just wondering if PS would have something I didn't know.

 

[IamSam]

You can animate just about anything in Ps. The problem is the interactive component.

....Imagine a rotating knob that has a ring around and acts as a meter to show the current dial volume level.........create a ring with some layer style then try to make it grow around a circle from left to right. It would be like a self-drawing line following a path or a ring that has an angle mask.

In answer to your question............I think I can create something that will work similar to your animation above. It will only be animated in frames. It will be background color dependent so it will have to be altered to different colored backgrounds. I do have to go to work for now, so it will be later before I can work on it.

My idea will work on the same principle that I used here:


The leaves aren't going anywhere, they are just being covered by a white moving mask. The same principle can be used for a dial going forwards and backwards revealing and covering a scaled ring.



Let me know if this sounds feasible to your needs.

 

[LMABit]

Let me know if this sounds feasible to your needs.

Hi Sam. Thanks for offering a possible solution. I think the problem here is that a circle will always make a mask intersect the starting point. Doing a mask for a straight line is easy to do. I think unless you could animate individual vertices of a shape, it would be impossible. Another way would be using some kind of stroke along a path with animation. That would only serve as a kind of mask if you use the background color. In the GIF I posted the background is white but sometimes that is not the case and the BG would be more complex than a single flat color.

 

[jkemp]

Out of curiosity... why are you so eager not to use AE ?

 

[LMABit]

Out of curiosity... why are you so eager not to use AE ?

Who said I don't use AE? I've been making it clear I just wanted to know if there was something I was missing for the sake of learning. I can also do that kind of stuff in another application I use from time to time. I actually just did what I needed in AE including some recreated parts of the knob that needed to rotate as well.

 

[jkemp]

Dude, don't get mad. I'm really just curious...

I did get that you knew it could be done in AE... and it felt like you actually had access to AE... so... you have the right software, with the right knowledge... but you're looking for some other way to do it. I was curious about what's your motivation.

Genuine curiosity... I'm not just trying to be an ass and piss you off....

 

[LMABit]

Dude, don't get mad. I'm really just curious...

I did get that you knew it could be done in AE... and it felt like you actually had access to AE... so... you have the right software, with the right knowledge... but you're looking for some other way to do it. I was curious about what's your motivation.

Genuine curiosity... I'm not just trying to be an ass and piss you off....

No worries I am not mad at all. I just thought I was clear I knew it could be done in AE but I was just looking for something in PS as I create the UI 2D elements in PS and as you might know, working in the same application for everything would always be easier if it has a proper way to do it obviously. I see now there is no way to do that so I think we conclude here.

 

[IamSam]

@LMABit - In playing around with the idea that I had, (as you stated) the end of a rotating (circular) mask always intersects with the starting point unless you lesson the degree of rotation. I felt that I could employ some clever masking to alleviate the issue but I could not. This is an easy fix for animating a GIF, but it's impractical for your needs.