Here’s a fun tutorial to get you started with app icon design (and perspective) inspired by Andrew Reifman’s “Bodyboss Icon 1“. If you’re new to designing app icons, this should give you a few tips on how and where to start. App icons can range from the simplistic (Facebook, Yammer & iTunes) to highly detailed and realistic (view the incredible work of Konstantin Datz). So for this tutorial we’ll be designing just past the simplistic mark.

Getting started: We’ll be using Photoshop CS6 (on Mac) and keeping nearly every layer as a Custom Shape with additional work with the Pen Tool (so it can be resized with no loss in quality later on). First, let’s set up all the base shapes.

Open Photoshop and create a new document (512px x 512px):

TNWTron SC1 How to create an awesome Tron inspired app icon

Select the Rounded Rectangle tool (U) and double-click on the canvas, creating a new (512px x 512px with 80px Radius) rounded rectangle for the base layer. You will have to switch back to the Move tool (V) to center the shape. Once moved, switch back to the Ellipse tool (U).

TNWTron SC2 How to create an awesome Tron inspired app icon

Add another Rounded Rectangle (double-click on the canvas) at 512px x 470px with 80px Radius. Double click on the shape in the Layers tab to change the colour to a lighter grey (mainly so it’s visible) and center with the Move tool.

TNWTron SC3 How to create an awesome Tron inspired app icon

Select the Ellipse tool (Shift+U to cycle between different custom shapes), double-click on the canvas and create a 400px x 390px ellipse (and change the colour to make it visible). We’ve shortened the height of the circle slightly to help with the perspective.

TNWTron SC4 How to create an awesome Tron inspired app icon

Change to the Move tool, duplicate the Ellipse layer (CMD+J on Mac), change its colour (to aqua) and make it slightly bigger than the first ellipse by clicking and holding Shift+Alt, then dragging it from the corner. Then move that layer below the first ellipse.

TNWTron SC5 How to create an awesome Tron inspired app icon

TIP: Holding Shift while resizing will keep a shape in proportion. Holding SHIFT+ALT while resizing will keep the proportion and also resize from center.

Save The Next Web logo to your desktop and open it in Photoshop. For this tutorial we’ll only be using the ribbon section of the logo so copy that across to the app icon document and resize to fit.

TNWTron SC6 How to create an awesome Tron inspired app icon

Now we have the base shapes in place, lets start adding some textures and lighting effects.

Now for this next part you will need to download and install the free pattern file (.pat) from Subtle Patterns. You can download all of Subtle Patterns via Github (click the ZIP button on this page) and then unzip it to find the “.pat”file. Back in Photoshop, right-click on the top rounded rectangle layer and left click on Blending Options. Then select Pattern Overlay. In this tutorial, I’m using Tactile Noise. See the screenshot to see how to load your new patterns.

TNWTron SC7 How to create an awesome Tron inspired app icon

Right click on the top rounded rectangle layer and Copy Layer Style, then right-click on the bottom rounded rectangle and Paste Layer Style. Change the pattern opacity to 60%.

TNWTron SC8 How to create an awesome Tron inspired app icon

Right click on the top ellipse layer and Paste Layer Style. Right click again on the top ellipse layer and select Blending Options and add Bevel & Emboss.

TNWTron SC9 How to create an awesome Tron inspired app icon

Right click on the bottom ellipse layer, select Blending Options and add a Gradient Overlay, Inner Shadow & Drop Shadow as per the screenshots.

TNWTron SC10 How to create an awesome Tron inspired app icon

TNWTron SC11 How to create an awesome Tron inspired app icon

TNWTron SC12 How to create an awesome Tron inspired app icon

Select the TNW Logo layer and duplicate it (CMD+J on Mac), then hide the second Logo layer. Select the top Logo layer and bring up the Levels (CMD+L) as per the screenshot.

TNWTron SC13 How to create an awesome Tron inspired app icon

Right click on the top Logo layer and select Blending Options, then add a Colour Overlay with an aqua hue.

TNWTron SC14 How to create an awesome Tron inspired app icon

Turn on visibility of the bottom logo layer and right-click, select Blending Options then apply Bevel & Emboss and Outer Glow.

TNWTron SC15 How to create an awesome Tron inspired app icon
TNWTron SC16 How to create an awesome Tron inspired app icon

Right-click on the top Ellipse layer, select Blending Options and add a Drop Shadow.

TNWTron SC17 How to create an awesome Tron inspired app icon

Right-click on the bottom Ellipse layer, select Blending Options and add an Outer Glow.

TNWTron SC18 How to create an awesome Tron inspired app icon

Right-click on the top Rounded Rectangle layer, select Blending Options and add a Bevel & Emboss.

TNWTron SC19 How to create an awesome Tron inspired app icon

Now lets add some lighting effects to the front edge. Hold CMD and left click the bottom Rounded Rectangle layer (it should select the exact shape). While selected, create a new layer and draw two vertical white blurry lines with the brush tool as per the screenshot.

TNWTron SC20 How to create an awesome Tron inspired app icon

Keeping the new layer selected, Hold CMD and click the top Rounded Rectangle layer, then press delete to remove the top of the white blurry lines. Fade the new layer to about 15% to achieve the effect. It may take a few tries to get this lighting right.

TNWTron SC21 How to create an awesome Tron inspired app icon

You should have something like this:

TNWTron SC22 How to create an awesome Tron inspired app icon

Now we’ll add some subtle gradient lighting to the top Rounded Rectangle and the top Ellipse. Duplicate both of those layers, right-click and select Blending Options and add a Gradient Overlay to each. Each Gradient Overlay should be fading from white 0% to black 100%. Then drop both of those layers to 10% Opacity.

TNWTron SC23 How to create an awesome Tron inspired app icon

Now we’ll add the Marker Lines by using the Type tool. Left click the top Ellipse layer, then select the Type tool (T) and click on the Ellipse shape. Type a lot of vertical bars (“|||||||”) until it wraps around the Ellipse as per the screenshot. You will have to change the Character settings to get the desired effect.

TNWTron SC24 How to create an awesome Tron inspired app icon

Drag the Type layer underneath the top Ellipses to hide the overflow. Right click on the Type layer and choose Blending Options, then add Inner Shadow and Drop Shadow. Finally, drop the Fill of the Type layer to 0%.

TNWTron SC25 How to create an awesome Tron inspired app icon
TNWTron SC26 How to create an awesome Tron inspired app icon

If all the above tutorial went well, you should have something that looks like the below screenshots. Here is another version with The Next Web original colours. If you want to play around with it or take the design further, download the PSD.

TNWTron SC27 How to create an awesome Tron inspired app icon

TNWTron SC28 How to create an awesome Tron inspired app icon