How to Create a Transparent Battery Icon
Tutorial Details
- Program: Illustrator
- Difficulty: Intermediate
- Completion Time: 1 hour
Download Source Files
Final Product What You'll Be Creating
In this tutorial, we’ll create a detailed icon of a battery similar to the one used for the iPhone touch. The battery "fuel" color can be changed as well as the "fuel" level, allowing the icon to be used to create a battery or power meter for applications, or simply as a graphic in any type of design.
Step 1
We’ll start by creating a new document and filling it with a solid black background. You can make yours whatever size you’d like, mine is 600 px by 400 px.
Now that we have our document, we’ll begin with creating the metal cap at the end of the battery. Start by drawing a shape, as shown below. The colors in the gradient from left to right are 90% gray, white, and black. Additionally, give the object a 1px Feather and lower its Opacity to 75%.
Step 2
Copy (Command + C) this object and paste the copy directly in front (Command + F). Then, nudge the copy one pixel to the right using the right arrow key. The colors for the gradient from left to right are 80% Gray, Black, and 80% Gray. Additionally, raise the Opacity of this shape back up to 100%, and remove the feather on it by dragging it from the list in the Appearance palette to the small trash icon below it.
Step 3
To add some highlights to the edges, draw two shapes as shown below with the Pen tool. Fill them both with white. Change the top shape’s Opacity to 75% and the bottom shape to 25%. Also, give both shapes a 2px feather.
Step 4
It may not be evident just yet, but we’re now going to add the reflections to the metal. Draw a shape with the Pen tool and position it as shown below. The left color on the gradient slider is white and the right color is 90% gray. Give the shape a 1px feather as well.
For the bottom reflection, draw another shape as shown. The gradient is white to black and the shape has a 1px Feather. Also, lower its Opacity to 50%.
Now we’ll start on the transparent section of the battery. Begin by drawing the shape shown below with the Pen tool. Once drawn, fill the shape with white and lower its Opacity to 50%.
Hint: An easy way to draw the shape is to draw one half of it – leaving the path open, then, copy, paste, and reflect the copy of the shape to create the other half. Finally, just connect the points with the Pen tool. This also ensures that the final shape will be symmetrical.
Step 6
Now, we could simply use a black to gray gradient on this shape, but we’re going to use an opacity mask instead. It’s a little more work to create, but it will allow us to change the background behind our battery when we’re done. To create the mask, copy and paste the shape in front of the original. Bring its Opacity back up to 100%, and fill it with a gradient as shown below. The left slider is 50% gray and the right slider is black.
Step 7
Now, select both shapes, then in the drop down menu in the Transparency palette select Make Opacity Mask. When you create the mask, you might not notice a change, but change the color of the document background and you’ll see the advantages of the opacity mask.
Step 8
We’ll now start adding some glare and reflections to make the glass look transparent. Begin by drawing two shapes as shown below. Fill them both with white and lower their Opacities to 75%. Feather the top one by 2px and the bottom one by 3.5px.
Step 9
We’ll also add an Opacity Mask to the top highlight. Paste a copy of the top shape in front of itself, bring its Opacity back up to 100%, and remove its Feather. Fill it with a gradient as shown below, going from 75% gray to black. Finally, create an Opacity Mask as we did before.
Step 10
We’ll add another reflection to the glass to match the one on the metal. Draw a shape as shown below, fill it with white, give it a 2px Feather, and lower its Opacity to 50%.
Step 11
Follow our routine to add the Opacity Mask. Paste a copy of the shape in front of the original and fill it with a gradient, which goes from 15% gray to 85% gray (don’t forget to remove the Feather on the shape).
Step 12
Once again create the Opacity Mask. Also, once you’ve created the mask, change the shape’s blending mode to Screen in the Transparency palette.
Step 13
By now you’re probably getting the idea of how to create our reflections. So, draw another shape for a reflection as shown below, then fill it with white. Lower its Opacity to 40% and Feather it by 2px.
Step 14
For the copy of the shape used for the opacity mask, use a 50% gray to black gradient, as shown below.
Step 15
And now? You guessed it. Create the Opacity Mask.
Step 16
Alright, our last reflection! One more time, draw the shape shown below, fill it with white, lower its Opacity to 50%, and Feather it by 2px.
Step 17
Copy and paste the shape to make the Opacity Mask. Use a white to black gradient for the shape.
Step 18
And for the last time, create the Opacity Mask.
Step 19
We’ll now add the other metal end cap to our battery, which is quite easy, seeing as they’re both identical. Select all of the shapes that make up the end cap, and go to Object > Transform > Reflect. In the dialog window that appears, select the Vertical radio button for the Axis and click Copy. Drag the copied and reflected shapes to the other end of the battery.
Step 20
Creating the positive contact on the battery is fast and easy. Simply select all of the shapes you just used for the metal end cap, then copy and paste them in front. With them all selected, Alt-click and drag on the top or bottom center handle of the group to shrink them vertically. You may also want to shrink them horizontally a bit as well.
Once you’ve got them the right size, send them to the back (Command + Shift + [ ), and then bring them forward one level (Command + ] ). If done correctly, the contact should be directly behind the metal end cap.
Step 21
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 Blend Mode of the one on the left to Overlay. Finally, Feather both shapes by 3.5px.
Step 22
We’ll now work on the final element of the design, the "fuel" (battery energy). Draw a shape with the Pen tool 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.
Step 23
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.
Step 24
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.
Step 25
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.
Step 26
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.
Conclusion
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.
Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Bill Labus
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
lovely tutorial….will def try..!!
keep up the good work..!!
Hey
This is really a great tutorial.
Thanks ;o)
I new in illutrator, so I just have a little question about have to make 80% gray color, in the gradient??
Thanks again
Great tutorial, I followed the steps and made a battery too. Mine is yellow but it looks very nice. Thank you for this!
THis is the battery icon on the iphone
NICE GOOD WORK MEN
Simply AMAZING!
Thank you!
Wow! Absolutely awesome tutorial! I was able to follow along in Fireworks CS3 and get the exact same effect.
Thanks and keep up the good work!
great tut! a very good explanation!
gr
Great tutorial again !
One thing missing, an explaination to create the reflexion of the battery on the surface, as appearing on the very final image. I guess I will find a way thru those dammed clipping mask(^^). Still…
Thanks
You know what really sucks, is that if I had written this tutorial just a couple of months later (as in just recently), all of those transparency masks could be avoided with CS4′s new transparent gradients! Argh!
Oh well.
@Brewal
Sorry I left that out- essentially you just copy the entire finished battery (I’d suggest grouping it first), reflect it over the horizontal axis, and then draw a big rectangle to cover the whole thing (filled with a black to white gradient) and use it to create the transparency mask.
Haha! I have never touched Illustrator but i was just wondering why you did twice the work i needed to do something similar on Inkscape :)
BTW, would you mind if I do a tutorial for this kind of outcome with Inkscape for the Inkscape folks? :)
Ah, just in case you did not know, Inkscape is another cool vector drawing program. [ http://www.inkscape.org ]
Thanks. Love the opacity mask. Very useful for reflections.
Love it !
Btw How is suppose to create the cap?
Isn’t good this tutorial at all
Very good，Thanks
anyone a final .ai or.eps file?
Great tut, thanks man,helped me a lot.
I am new to Illustrator, using CS4. How does one get the different % of blacks i.e. 75% black or 65% gray etc.
cool tutorial…..[ learning mode : on ]
Please reload the picture 4.2!
thanks for the tutorial.
Thank you very very much for this awsome tutorial.. great design, great tutorial =]
Great icon thanks
What software i need to crat icons and logos for win xp
Thanks a lot Bill !
Great tutorial! Explained very clearly, you really make it seem simple
wowwwwwwww….. great job dudes….
hi cool tut
but how did u do the reflection of it
Great Job!… Love this tut. : )
Just one question.. how do I get that reflection of all the battery just like in the final pic??…
Okay, if anyone is wanting to learn to develop apps for the iPhone, please VOTE for them and get TUTs to make it happen!!! Vote for iPhone site/tutorials bellow! ….Maybe repost this somewhere yourself, to make it happen sooner, think about it!!!
iPhone Tuts Site:
http://psdtuts.uservoice.com/pages/2999-vectortuts-site-suggestions-and-feedback/suggestions/220438-iphone-tuts-site
Learn To Code For iPhone:
http://psdtuts.uservoice.com/pages/2997-nettuts-tutorial-suggestions/suggestions/155081-learn-to-code-for-iphone
DEVTuts+:
http://psdtuts.uservoice.com/pages/2997-nettuts-tutorial-suggestions/suggestions/245744-devtuts-
I voted
would like to thank my teacher in turkey like these expressions are very sorry to continue your work ..
cool!!!!!
love this tutorial.
thanks.
really awesome
uauuuuh
super !!!
u can do better !!!!!!
so cool, I will try to do one
would like to thank my teacher in turkey like these expressions are very sorry to continue your work
Thans
veryyyy!! thanks…
Thanks; verry good
tks for your sharing
tks for your sharing
AWESOME! THNX!
Great :)
awesome battery thanks for this tutorial
gr8 demo of photoshop. nice article…
A marvelous and easy-to-follow tutorial, but I’ve run into trouble on the very last step. For some reason my outer glow has no colour, even though I’ve selected the very colour you’ve given in the tutorial and set my blend mode to screen. I get the same colour-less results with all the other blend modes and opacity settings too, it’s just a grey-ish glow around the edge, as opposed to the green one I’m after. Why would this be happening and what can I do to fix it?
Thanks, this tutorial rocks!
However, I have the same problem as Benjamin above – the glow is white/colorless rather than green, even though green is selected in the Outer Glow settings. It’s an important final touch, although it still looks awesome even without it. Any thoughts on what we might be doing wrong?
Oops, didn’t realise there were two pages of comments :) Bill Labus already answered the “why-is-the-glow-white-rather-than-green” question: go to File -> Document Color Mode -> RGB Color
very thenks admin :)
woot! thanks for this tut… heres what i did for my bro’s itunes podcast logo…
http://i447.photobucket.com/albums/qq195/furvert101/KRYNBATTERY.jpg?t=1279777052
podcast is here
itunes.apple.com/us/podcast/kryn-dj-ryan-jones/id327383471