How to create a transparent battery icon with adobe illustor? This tutorial is Part 2. You can see part one in here ….
4. Create the Green Battery Glow
The last thing we have to do to finish the battery itself is to add some rounded slivers to represent the inside ends of the glass. Draw the two shapes, as shown below (or just draw one and copy and paste it). Fill the one on the right with white and lower its Opacity to 25%, and fill the one on the left with black and lower its Opacity to 50%. Additionally, change the Blending Mode of the one on the left to Overlay. Finally,Feather both shapes by 3.5px.
We’ll now work on the final element of the design, the “fuel” (battery energy). Draw a shape with the Pen Tool (P) like the one below. You can make the energy level whatever you’d like, as well as whatever color you’d like. I chose about two-thirds full and used a green gradient.
Once you have the look you want for the “fuel,” send it to the back. Afterward, bring it forward twice so that it is directly in front of the base transparent layer, but behind the reflections.
Finally, copy the black rounded sliver shape at the left edge of the glass and drag it to the edge of the “fuel,” then change its fill color to white.
To finish off the design, add some highlights to the metal parts of the battery by drawing ovals and filling them with white. Next, add a Feather to them and lower their Opacities.
Additionally, add an Outer Glow to the “fuel” shape (Effect > Stylize > Outer Glow). Make sure the Blending Mode is set to Screen. You’ll want the highlight color to match the color of the fuel. For my green “fuel,” I used a bright lime green color for the glow (#19FF00). Make the Opacity 75% and the Blur 11px.
Power Up, You’re Done!
That’s it! You’ve now got a battery icon that can be used for whatever design you need it for, and even as a modifiable graphic for an interactive animation or application. I hope you’ve gained some useful techniques and ideas from this tutorial.