In this tutorial we are going to create a simple pie chart in Photoshop that you can use in your UI or dashboards. I have also done another tutorial about how to do an adjustable donut chart in Photoshop. You might want to check that out as well it’s bit more extensive than this tutorial.

To create a pie chart in Photoshop start by creating a circle (ellipse). Hold shift while sizing the circle to make it a perfect round shape. Your circle can be any color at this point. Next double click the Ellipse layer and select to edit the Gradient Overlay. Set the gradient to Angle.

Then edit the gradient by clicking on the Gradient. Set the left bottom slider to #6caba3 and then add another stop to the bottom. You will see a small hand icon when you hover over the gradient, just click to add the stop. Make sure that this stop is also #6caba3. Add another stop right next to the stop that you just created and change it’s color to #a24d6a and move it as close to the previous stop as possible.

We are going to add one more section by adding another stop. Make sure this new stop is also the same color as the previous: #a24d6a. Once again add a another stop right next to this one and give this stop a color of #42505d. Move it as close to the previous stop as possible. Last change the remaining last, right stop to #42505d and there you have your pie chart.

You can move the stops location to represent the real percentage value, to do this adjust the number in the Location %. In our demo chart we have the cyan at 20%, purple 20% and dark blue the remaining 60%. As a finishing touch I added a white stroke around the circle and white lines between the chart sections.

I hope you enjoy this tutorial and share it with your friends.

You can download the resource file to study directly from that: