How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop
  • 5 July 2010
  • Freebies, Tutorials
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (84)»

In this tutorial we will draw a battery icon in Photoshop. The key here is layer style Gradient Overlay. Using this layer style we can add lighting into the battery and give it a 3D look.

Preview

First, let’s take a look at icon we will be creating.

How to Create a Battery Icon in Photoshop

Step 1

Create a new file with size 2.300 x 3.000 pixel. You may say this is too big for an icon, this is just how I work in Photoshop. I prefer to start with big image and then resize the final result to smaller size. This way, I can focus more on the details. Let’s start by adding guides to help us placing the battery.

How to Create a Battery Icon in Photoshop

Step 2

Activate rectangle tool and draw a rectangle shape. Make sure to select shape icon in the option bar. Use the guide to make it snap into place.

How to Create a Battery Icon in Photoshop

Step 3

Activate ellipse tool. This time select path and add path in option bar. Create an ellipse shape on top an bottom of the rectangle.

How to Create a Battery Icon in Photoshop

Step 4

Create new layer and fill it with #e0c400. Hit Ctrl + Alt + G to insert the color into the battery shape.

How to Create a Battery Icon in Photoshop

Step 5

Select one of the ellipse path we created in step 3 and hit Ctrl + C. Open Paths Panel, click new panel icon and paste the path (Ctrl + V). Move the path and place in lower part of the battery (1). Convert path to selection by pressing Ctrl + Enter (2). hold Shift and select upper part of the battery using rectangular marquee tool (3). Press Delete (4).

How to Create a Battery Icon in Photoshop

Step 5

Once again, create new layer. Fill it with color, place the ellipse (1). Convert path to selection (2). Hold Shift and select lower part of the battery (3). Press Delete (4).

How to Create a Battery Icon in Photoshop

Step 6

Create new layer. Using elliptical marquee tool select top part of the battery. Fill it with white. Remove selection by clicking Select > Deselect. Reduce opacity to 45%.

How to Create a Battery Icon in Photoshop

Step 7

Draw an ellipse smaller than top of the battery. Add Inner Shadow and Gradient Overlay. Use settings shown below.

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

Step 8

Let’s draw the battery’s brass cap. Draw a rectangle shape. and add an ellipse path underneath it. Add layer mask. Activate soft brush tool and paint indicated areas below with black. Add Gradient Overlay

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

Step 9

Create new layer and paint some shadow. See image below for reference.

How to Create a Battery Icon in Photoshop

Step 10

Create an ellipse shape on top. Add layer styles Inner Shadow and Gradient Overlay.

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

Step 11

Add layer mask. Activate brush tool. Set foreground color to black. Paint its edge to soften it.

How to Create a Battery Icon in Photoshop

Step 12

Select the battery’s front side. Create new layer and fill it with any color. In Layers Panel change Opacity to 20% and Fill to 0%. Add Layer Style Gradient Overlay.

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

Step 13

Let’s create the battery’s name. I use a simple text here.

How to Create a Battery Icon in Photoshop

Step 14

On lower part of the battery, draw a red circle shape. On top of it create a white rectangle.

How to Create a Battery Icon in Photoshop

Step 15

Repeat the same process, this time to create positive sign.

How to Create a Battery Icon in Photoshop

Step 16

Create a rectangular selection. Create new layer and fill it with any color. Change Opacity to 50%. We only need this shape to help us warp the name and signs.

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

Step 17

In Layers panel, select battery’s name, both signs, and rectangle shape layers. Right click and choose Convert to Smart Object. Press Ctrl + T to do transformation.

How to Create a Battery Icon in Photoshop

Step 18

Click warp icon on option bar. Select Warp: Arch and change the blend value until selected layers warps into the battery’s side.

How to Create a Battery Icon in Photoshop

Step 19

After finish with the warp process, we can just remove the rectangle shape. Double click the Smart Object layer to edit it. If you find this dialog box, just click OK.

How to Create a Battery Icon in Photoshop

Step 20

The smart object will be opened in a new window. Delete the rectangle shape layer. Save file and close.

How to Create a Battery Icon in Photoshop

Step 21

The content of smart object layer will automatically updated and you will have this.

How to Create a Battery Icon in Photoshop

Step 22

Let’s make the gold parts more shiny. To do this, first select them then create a new layer. Fill the layer with any color. Fill it with any color. Change Opacity to 20% and Fill to 0%. Add Gradient Overlay.

How to Create a Battery Icon in Photoshop

How to Create a Battery Icon in Photoshop

Step 23

Now, we need to create the shadow. Place ellipse path we have from previous step. Convert it to selection by pressing Ctrl + Enter.

How to Create a Battery Icon in Photoshop

Step 24

Fill the selection with black. Click Select > Deselect. Click Filter > Blur > Gaussian Blur.

How to Create a Battery Icon in Photoshop

Step 25

We need to add another bigger shadow. Duplicate previous shadow and fill it with black.

How to Create a Battery Icon in Photoshop

Step 26

We’re done with the base shadow. Let’s add another shadow. Create new layer. Use polygon lasso tool and create a shadow shape behind the battery. Fill it with black. Add Gaussian Blur to soften the shadow. Reduce layer’s opacity to 30%. Add layer mask and paint the farthest shadow with black to hide it.

How to Create a Battery Icon in Photoshop

Step 27

And congratulations! We just made ourself a battery icon. I hope you enjoy this tutorial and learn few techniques. If you have any questions, feel free to write it in the comment form below.

How to Create a Battery Icon in Photoshop

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

84 Comments

  1. Jason

    Very useful. Great post.

  2. Mark

    I’ll post any questions, going to give this a try

    • Jeprie

      Go ahead try it. If you have any question just write it here. I’d love to answer it.

  3. Eko

    Looks a real battery…
    Makasih mas untuk tutorialnya
    Salam :)

    • jeprie

      Salam kenal juga.

      Actually, the perspective is a bit off and not perfectly right. Because this is an icon, not an illustration, it doesn’t make a big difference.

  4. Tim

    When I see examples like this I Really can’t wait to get photoshop for myself. I hope to get it latter this year or the beginning of 2011. Wow! Looks real and your instructions look easy to follow.
    Thanks this really sells it for me.

  5. Tutorial Lounge

    jeprie, you always did excellent job and also share useful techniques in your tutorials. thanks

  6. design4x

    waw its amizing

  7. white

    cute battery

  8. Cgbaran

    Great tutorial thankss

  9. Sueann Jenista

    With everything which seems to be building within this specific subject material, a significant percentage of points of view are actually quite exciting. On the other hand, I appologize, but I can not subscribe to your entire idea, all be it exhilarating none the less. It would seem to me that your remarks are actually not totally rationalized and in simple fact you are your self not really completely convinced of the assertion. In any case I did take pleasure in reading through it.

  10. Justina Azzopardi

    I acknowledge , it’s not easy To write a quality article likes things like this. I liking all A New approach into things like this post. might buyers give me the means Techniques to To compose a effective article ?

  11. Free Articles

    I keep listening to the news speaking about getting free online grant applications so I have been looking around for the best site to get one.

  12. i used to be fat meal plan

    lazy boy, lazy lady, lazy girls, lazy men

  13. dofollow blog list 2009

    Thank you taking the time to write this!

  14. whois lookups

    Cheaper than the count on I set up not seen anywhere else look it up yourself

  15. Mark Armstrong

    Beautifully done, and very clearly explained– thank you!

  16. gold standard 100 whey protein

    I think one of your advertisings triggered my internet browser to resize, you might want to put that on your blacklist. Look at my website when you can http://www.effectivevitamins.com

  17. oem software

    Good read. I wish I had the motivation to write such good posts onto my own blog.

Trackbacks

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US