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.

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.

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.

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.

Step 4

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

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).

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).

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%.

Step 7

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

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

Step 9

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

Step 10

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

Step 11

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

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.

Step 13

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

Step 14

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

Step 15

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

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.

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.

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.

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.

Step 20

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

Step 21

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

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.

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.

Step 24

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

Step 25

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

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.

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.