I am new to Photoshop, please go easy if my question is unclear. I am trying to prepare an icon in Photoshop and I happened to see this. So I want a similar graphic but I want the each color area to be sightly smaller than the previous one (i.e., the outer line should be the circle as a whole but the inner side these should be slightly small from the previous one). I want to make the colors look more shiny (gradient) and icon itself look somewhat elevated (not like flat).

So far I did it spending one day like below. But it was not at all fruitful. Though I could reach somewhat what I wanted, the overall shape is not good. When I integrated in the mobile app, it looks very ugly with poor clarity. :(

To try creating this, I have drawn a circle with blue color, and later on copied the layer and decreased the new layer's circle a bit with Ctrl + T and filled it with green color and so on, later deleting the unwanted areas with pen tool. As you can see, the circles I have drawn are bent and blurry.

my attempt

  • 2
    It's certainly possible in Photoshop, but Illustrator is the appropriate tool for this
    – JohnB
    Commented Nov 28, 2013 at 15:10

2 Answers 2


Ok as mentioned ideally you would be doing this in Illustrator. But, as that is not the case here is what I would consider quite a simple way of achieving the result you want.

  • First select the Ellipse Tool within the Shape Tool menu Ctrl + U make sure you have the right shape selected as there are several options.

-Hold shift while using the Ellipse too to make a circle as shown at 1 in the image.

-Repeat the above action to make a larger circle,and place it behind the first circle as shown at 2.

-As you can see this gives a sort of template to the type of circle that you were mentioning in your question. Select the smaller circle with the magic wand tool W Then select the layer for your larger circle. Right click and rasterize this layer, then while it is still selected hit the backspace button to clear the selection. You can also hide your smaller circle. This should give the ring shape that you have wanted. As seen at 3.

-To get the points that you want select the Custom Shape Tool, scroll through the shape options and select the triangle. Shown at 4.

  • Place and size the triangles around the circle (of course this will be to your own preference, I place 6 for sample sake. (see 5)

You can now use this guide to select the appropriate areas and colour them as you like. I suggest doing this as a layer over the guide that you have created. Once you have that part completed you can then apply a Gradient Overlay to create the shine that you wanted. This can be done by selecting the layer, clicking on fx at the bottom of the layers panel. Select 'Gradient Overlay' and toggle your preferences or make a custom gradient.

As for making it seem somewhat elevated, you could apply a drop shadow.

enter image description here


If you have any trouble with drop shadow,a shadow effect is better achieved by copying any given layer filling it with black, putting it behind the layer and then moving it a tad to achieve the shadow. Play around with the opacity of the shadow layer to get a better result. As for making the exact vector is easy as long as you have a bit of practice with shapes and masks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.