Radial Progress Bars

[Travis Roberts]

You've all seen them, a lot of people use them to say.. our skill is 75% or 50% in a graphical manner. I was curious if there is a filter, or neat way to make them perfectly. You can do them with the pen tool, but me being a perfectionist it takes a long time an bores me, and I just can't be sure I am getting the perfect angle on a percent like 85, 52 or some odd number. 25,50, 75,100, no problem! I crave this answer!

Thanks all!

 

[IamSam]

Hey Travis, welcome to PSG.

When I do a search for radial progress bars, there's many to choose from. Is this what your referring to?

 

[MrToM]

Can you show us an example of what you mean?
I think I understand but a 'picture paints...' ...and all that flannel.

Regards.
MrTom.

Darn! Beaten to it yet again!

 

[Travis Roberts]

https://www.mrpapercut.com/detail/31_radial_progress_bar_in_mootools

That is a link to a tutorial for making them with CSS3 but I want them in Photoshop first. =)

 

[MrToM]

Ah, I was thinking 'pie chart' so not far off.

This will sound daft but what exactly do you need to do in PS that you can't do with CSS?
I'd throw that example code into CodePen or your own server if you have one, adjust to the % you need and just screen shot the result, then take that into PS and cut it out. PS is not known for being accurate, that's Illustrators job, unless the image is really big, then minor inaccuracies become negligible.

If you just need to do a mock-up of these progress dials before writing the code why the need to be so accurate? Wouldn't the easy 25, 50, 75, 100% be enough just to see what it looks like?

Its easy enough to type in a rotation value, (when transforming), for a layer but you'd have to do a little maths to convert % to °.....no big deal but not that accurate with the smaller image.

Without knowing the ultimate goal its difficult to say what's best to be honest.

Regards.
MrTom.

 

[Hoogle]

Personally I make these kind of things in Illustrator.

First of all I am coming down with the Flu and at 3 am it is not the best Tutorial but rather than trying to explain in words and pictures I figured it would be easier to do a video.

 

[Travis Roberts]

I guess your right I really dont need specific ones when I just need to see what it will look like. Great vid btw thanks for the helps!