While we will never be good at this thing, it doesn't mean we have to settle with sub-par icons. In this post I will show you how I made this icon in Inkscape using only a few basic drawing tools, all in about 15 minutes. It's not that good compared to the professionally-made ones, but I think it looks better that a lots of icons on Google Play.
Step 1: Create basic shape
|Fig. 1. create basic glass shape|
Step 2: Add border
Next I add the the border around the glass by
- Make a clone of the glass (Ctrl-C, Ctrl-V works fine)
- Select the clone object and go to menu Path->Dynamic offset. You will see a single drag handle (see picture below, the second one from the left)
- Drag that handle outward a bit
- Change the color to light gray (we will change it to white later, but we use light gray here so we can see it against white background)
- Put the original glass on top of it.
|Fig. 2. add border|
|Fill and Stroke Dialog|
So far we are only using basic drawing tool and adjusting opacity and blurriness of the image. Guess what, these are all we need to know for the rest of the tutorial!
|Fig. 3. add highlight|
Step 4: The background
Now we will create the lime background. See fig. 4 along these steps:
- Create the rounded rectangle. The color doesn't matter now, but the border should be black.
- Clone it, then use Fill and Stroke dialog to blur it.
- Put the blurred one under the original one. You should see the drop-down shadow effect. Adjust it to your liking.
- Change the color of the original one to lime-green and adjust its opacity to about 70%, then change the border color to white.
|Fig. 4. icon background|
Step 5: Background texture
Well, it's not really a texture, just some washed-out color, but it makes the background less boring. I drawn a white circle and squeeze it down, then blur and adjust its opacity. You should get the result similar to what is in Fig. 5.
|Fig 5. background washout|
Step 6: Put things together
Now that the background is ready, I put my glass on top of it. Again, I used Fill and Stroke dialog to adjust the glass opacity so that it blends nicely with the background. Don't forget to change to color of the glass border to white first.
|Fig 6. put things together|
Step 7: Add some liquid
I think it looks good already, but someone might mistake our glass for a microphone or something. Lets add some liquid in it. First I draw a circle and cut it in half, then place it on top of the glass, but under the highlight (and, can you guess, adjust its opacity). See fig. 7.
|Fig 7. add liquid|
Here it is. We are done. Now you can export it into a PNG of any size as required by your apps. By the way you can download the finished icon in svg format here. See, even if all you know about Inkscape is to draw basic shapes, to change the colors, to drag some nodes, and to adjust blurriness and opacity, you can still get a pretty good result :)