visit website photoshopqu.com
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.
1. Create the Metal Cap of the Battery
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 x 400px.
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 panel 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 (P). 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 (P) 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%.
2. Create the Transparent Body
Step 1
Now we'll start on the transparent section of the battery. Begin by drawing the shape shown below with thePen Tool (P). Once drawn, fill the shape with white and lower its Opacity to 50%.
An easy way to draw the shape is to draw one half of it - leaving the path open, then, Copy, Paste, andReflect the copy of the shape to create the other half. Finally, just connect the points with the Pen Tool (P). This also ensures that the final shape will be symmetrical.
Step 2
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 Opacityback 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 3
Now, select both shapes, then in the drop down menu in the Transparency panel 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 4
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 5
We'll also add an Opacity Mask to the top highlight. Paste a copy of the top shape in front of itself, bring itsOpacity 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 6
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 7
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 8
Once again create the Opacity Mask. Also, once you've created the mask, change the shape's Blending Mode to Screen in the Transparency panel.
Step 9
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 10
For the copy of the shape used for the opacity mask, use a 50% gray to black gradient, as shown below.
Step 11
And now? You guessed it. Create the Opacity Mask.
Step 12
Alright, our last reflection! One more time, draw the shape shown below, fill it with white, lower its Opacityto 50%, and Feather it by 2px.
Step 13
Copy and paste the shape to make the Opacity Mask. Use a white to black gradient for the shape.
Step 14
And for the last time, create the Opacity Mask.
3. Duplicate the Metal Cap
Step 1
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 2
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.
4. Create the Green Battery Glow
Step 1
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.
Step 2
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.
Step 3
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 4
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 5
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.