I recently came to know that photoshop doesn't give much clarity on resizing as it saves on rectangle pixels and even my work was wasted due to that even, because whatever images I prepared, they look ugly on mobile devices. So, I started working with illustrator and thought to practice some icons. Have tried to prepare this icon, but failed because I am unable to achieve that bevel look instead of flat look and even I am getting outlines on shapes as shown below . Can someone please tell me how to achieve this kind of accentuating look and bubble type even? I don't need the twisting end, but trying to achieve the triangle end as in my pic.

Trying to achieve this:

enter image description here

I know this would have copyright issues. But I am not using it. Just want to practice.

My result:

enter image description here

1 Answer 1


When vectorizing things, It usually helps me to break it down into the simplest elements and determine what styles or effects I can apply to replicate.

For this, I'd start with the rounded rectangle. It's immediately obvious that it has a gradient applied to it, so I'll open up the source image in Photoshop and grab values from opposite ends of the gradient and apply them to a rounded rectangle.

Illustrator screenshot

The next thing to take care of is the inner glow / inner shadow around the edge of the rounded rectangle. Inner glow can be done with an Effect: Effect → Stylize → Inner Glow....

Inner glow takes care of the brighter border around the shape, but there is an inner shadow at the top of the shape. Illustrator doesn't have a nice inner shadow feature like Photoshop does, but you can do it manually with clipping masks. Here is a video tutorial for how you can accomplish that.

Illustrator screenshot

That takes care of the rounded rectangle. Next, we've got the speech bubble. I'll draw that with the pen tool and add the text on top. With the text expanded, performing a Minus Front will cut the text out. The bubble shape has a subtle gradient applied to it (if you look very closely you can see that it's radial), so I'll go back into Photoshop to grab the color values I need to match it and tweak as necessary.

Illustrator Screenshot

The speech bubble also has a drop shadow, so I'll apply that as well using Effect → Stylize → Drop Shadow.... Since we cut the text out of the speech bubble, this will handle the drop shadow for both the text and the bubble. The default values probably won't match up, so just keep tweaking it until it looks appropriate.

Illustrator Screenshot

There is one last detail to add in: the white highlight on the "foot" of the speech bubble. I take care of this using an ellipse with a white drop shadow and a clipping mask. You can see in outline view that the ellipse is completely outside the shape, I only reveal the shadow attached to it with a clipping mask.

Illustrator Screenshot

At this point I'm satisfied with the vectorization. It's not a pixel-for-pixel replication (there is also a very subtle white drop shadow under the text), but it's close enough for demonstration purposes. Some tweaking here and there would be required for a more accurate vectorization.

finished product
Click image for full resolution

  • I am sorry, I am stumped on how to get inner shadow for that rounded ractangular box. Can you please explain?
    – Anoo
    Commented Nov 29, 2013 at 7:41
  • I made it somewhat thanks. someone downvoted :(
    – Anoo
    Commented Nov 29, 2013 at 10:25
  • @Anoo creating an inner shadow is distinct enough to have its own question. If you post a new question for that, I'd be happy to answer it
    – JohnB
    Commented Nov 29, 2013 at 17:35

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.