Drawing a Battery Meter Icon in Photoshop

Here is a tutorial in which you can find out how to go about drawing a battery meter icon using photoshop. It should be quite easy to follow. This is the final result:


Drawing the basic shape:

To begin, create a new document, I used 400x400px with a white background. Draw this shape:


Lets name this layer the outer layer.

Fill this shape with the color code: #cccccc

Once done, duplicate this layer and transform(ctrl+t) the shape to 90% of its size, Convert this shape to a selection by right clicking and clicking on make selection and fill it with white color using the paint bucket tool

This will the be the inner layer:

Subtract part of the selection using the rectangular marquee tool and pressing the ALT button on your keyboard, see image below:
step 4
Create a new layer, let’s call this the green layer. Fill this selection with the color code: #00ff00
step 5
Create a new layer and name it the top layer. Make this shape using the pen tool:
step 6

Right click and make it a selection

Fill the selection with the color code: #cccccc

Do not deselect the selection:

step 7
Hope your result is so far coming out great.
Create a new layer, name it the green top layer. Add the color code: #00ff00 to the same selection as in the last step:
step 8
Drag this area down as shown in the image below:
step 9

Draw the shape below using the ellipse tool and the color code: #666666

This should create a new layer, name it the positive layer.

Create a new layer, name it spacer. Draw the shape as shown in the image below:
step 11
Right click it and make it a selection:
step 12
Add the color code: #666666
step 13

Adding the layer styles

Go to the outer layer, add these layer styles:

main layer 1
main layer 2
main layer 3
The result should look like this:
battery 14
Go to the inner layer we transformed to 90% of the outer layer’s size and add these layer styles:
second layer
second layer 2
The result should look like this:
battery icon 15
Go to the green layer, add this layer style to add a stroke to it:
green layer
There’s a very small change:
battery icon 16
Go to the green top layer, add these styles:
green top layer
green top layer 2
This should be the result of these layer styles:
battery icon 17
Go to the top layer. First add this layer style:
top stroke
You should see a stroke on the top layer:
battery icon 18
but we only want the line on one side, the lower side. So, duplicate the layer, and another layer will come on top of it. Remove the stroke style and nudge that layer a bit upwards till the upper stroke is no longer visible:
battery icon 19
Add this layer style to the duplicate layer:
layer style
You should see a slight dark area appearing below the top layer:
battery icon 20
Go to the positive layer and add these layer styles:
positive layer 1
positive layer 2
positive layer 3
This should be the result:
battery icon 21

The final touch

Select the pen tool and draw this small shape on a new layer:

battery icon 22

Fill it with the color #00cc00 and change the layer effect to color, and you will have the final result:

battery icon

I hope this tutorial on drawing a battery meter icon in photoshop was interesting and easy to follow. If there are any questions feel free to let me know through comments

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!