In this tutorial you will be creating a semi-realistic, sci-fi icon that could be used as a battery or dock icon. Let’s get started!

Step 1

Create a 256 x 256 document at 72 DPI. This is a very common image size for a dock icon. The background color can be set to either white or transparent.

Step 2

Let’s set up the canvas by creating a white background layer if you have not already. You will find this useful later on when you need to see background contrast by Inverting the background layer Cmd/Ctrl + I. Display your Rulers and drag a new Guide to the center.

Step 3

Using the Ellipse (U) tool, draw an oval at the top center of the canvas with this color #e1e1e1. You can center it by selecting the whole document Cmd/Ctrl + A and use the Move Tool (V) and click the icon on the top bar as show in the diagram. Call this "Circle Top." Duplicate this layer fourteen times by holding down Alt + Down with the Move Tool (V). Merge the fourteen duplicated layers can call it "Circle Body." Place this layer below "Circle Top."

Step 4

Apply the following style to "Circle Top" to give it a metallic look. Inner Glow tends to give it the frensel effect while Gradient Overlay gives it dimension.

Apply the following style to "Circle Body."

You should have something that looks like this.

Step 5

Create a new layer above "Circle Top" and call it "Edge." Cmd/Ctrl-click "Circle Top" thumbnail for its selection. Fill it with white using the Paint Bucket Tool (G). Nudge the selection up by 1px and press Delete. Using the Eraser Toll (E) of about 60px in diameter and 0% hardness, click once on the left and right side of the circle. Create a new layer above and use the same method to get the selection of "Circle Top." Call this layer "Shine." Using and white soft brush at 60px diameter, click once on the bottom center of the circle. Bring the opacity down to 80%. This will give it a crispy and shiny look.

Create another layer and call it "Reflection." Use the Rectangular Marquee Tool (M) and draw a rectangle on the side of the "Circle Body" and Fill (G) it with white. I inverted the background color so you can see it more clearly. Get the selection of "Circle Body" and Invert it Cmd/Ctrl + Shift + I. Now press delete and set the Opacity to 10%. This might hardly look like any difference, but this whole step makes a very big impact on the design.

Step 6

Create a new layer and call this "Bulb." Get the selection of "Circle Top" and Fill (G) it with #80fa96. You can use any color you wish, but for this tutorial, we will be going for a slightly yellowish green. Enter Free Transform Cmd/Ctrl + T and while holding down Shift + Alt, drag one of the corners inward until you find that it’s the size of the bulb you want.

Now apply the following style for a glow effect.

Step 7

You can group all the layers we were working on just now, except for the background, and give it a name. I called mine "Head." Create a new group call "Top Body." Create a new layer inside this group and call it "Top." Use the Pen Tool (P) and draw what you see on the diagram. Remember to keep perspective in mind when drawing 3D icons. Now Fill (G) the shape with #d7d7d7 by Right Click > Fill Path. (editor：photoshop1)