: Preparing this type of icon in illustrator 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

@Ravi4787994

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.



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.



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.



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.



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.



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.


Click image for full resolution

Vote Up Vote Down