Today we’re going to have some fun with mobile app design. The most widely used apps are either business or gaming-oriented. Typically they remain separate, but what if you were to combine them? Say hello to the cute business monster icon.

design

This is going to be done in Photoshop and I’ll guide you step by step. Hopefully you’ll take away some principles that can be applied to any app icon design, in addition to another cute critter to add to your repertoire.

Step 1: The canvas and background

Canvas: 1200 x 800 pixels. Unlock the background layer and fill it with #317bc6.

1

Go to Filter -> Noise -> 2% Uniform, Monochromatic

2

Add a ‘Satin’ layer style with these settings:

  • Color: #000000,
  • Opacity: 50%,
  • Angle: 0°,
  • Distance: 30 pixels,
  • Size: 165 pixels.

This will create a vignette effect.

3

Step 2: The caption ‘Business Monster’

Type in ‘Business Monster’ and position it in the center of the canvas.

4

Font name: Butterfly Kids,
Font size: 98 pixels.
I used the following layer styles to achieve the neon effect:

  • Stroke: Size 3 pixels, Position: Inside, Color: #dff6ff;
  • Inner Shadow: Blend Mode: Screen, Color: #006cff, Opacity 50%, Angle 120°, Distance 7 pixels, Choke 10%, Size 10 pixels;
  • Inner Glow: Blend mode: Screen, Opacity 100%, Color #006cff, Size 14 pixels;
  • Satin: Blend mode: Screen, Opacity 15%, Color #006cff, Angle , Distance 7 pixels, Size 10 pixels;
  • Outer Glow: Blend mode: Screen, Opacity 100%, Color #006dff, Size 14 pixels;
  • Drop Shadow: Blend mode: Screen, Opacity 40%, Color #007fff, Distance 7 pixels, Spread 10%, Size 7 pixels.
5

Step 3: The base of the icon

We’re going to use the rounded rectangle tool for the base of the icon. Simply click to set the size: 512 by 512 pixels. The corner radius is 120 pixels.

6

I used the following layer styles:

  • Gradient Overlay: left #ff7400, right #ffa443;
  • Satin: Blend mode Multiply, Opacity 50%, Color #ff9f3c;

Right click on the layer in the layers panel and click on ‘Rasterize Layer Styles’

7

Add Noise: 2% Uniform, Monochromatic.

8
  • Bevel and Emboss: Inner Bevel, Smooth, 100% Depth, Size 21 pixels, Soften 9 pixels, Angle 90°;
  • Highlight mode Screen, Color: #ffffff, Opacity 30%. Shadow mode: Multiply, Color: #fe871b, Opacity 35%;
  • Stroke: Size 8 pixels, Position Inside, Blend mode Normal, Opacity 100%, Color #ff7501;
  • Inner Shadow: Blend mode Normal, Opacity 50%, Color #ffffff, Distance 9 pixels, Choke and Size 0 pixels;
  • Outer Glow: Blend mode Screen, Opacity 18%, Color #ffffbe, Size 76 pixels.

Name this layer ‘Base’.

9

Step 4: The eyes

Use the Ellipse tool to draw a white circle with a size of 138 by 138 pixels. Rename it ‘Main’.

10

Layer styles used:

  • Bevel & Emboss: Inner Bevel, Smooth, 100% Depth, Size 27 pixels, Angle 90°, Shadow Mode Multiply, Opacity 15%;
  • Stroke: Size 2 pixels, Position Outside, Blend Mode Normal, Opacity 100%, Color #d76b08;
  • Inner Glow: Blend Mode Normal, Opacity 100%, Color #ffa03d;
  • Satin: Blend Mode Multiply, Color #000000, Opacity 50%, Angle , Distance 6 pixels, Size 32 pixels;
  • Drop Shadow: Blend Mode Normal, Color #d7700f, Opacity 100%, Angle 90°, Distance 6 pixels.
11

Create another white circle with the same size and go to Filter -> Blur -> Gaussian Blur: Radius 8 pixels. You may want to lower the opacity to 20-40%. This layer should be named ‘Highlight’ and it should sit underneath our ‘Main’ layer.

12

Create another circle, same size, but this time with the following color code: #df7b12. This should be 3 pixels above our ‘Main’ layer on the canvas, but underneath ‘Main’ and ‘Highlight’ in the layers panel. Call it ‘Shadow’.

Still using the Ellipse tool, draw a blue circle, 65 by 65 pixels, with the color code #7fbfff and position it in the center of ‘Main’. Add a Satin effect with these settings: Blend mode Multiply, Opacity 50%, Color #1b63ac, Angle . Distance 5 pixels, Size 10 pixels. Rename this layer ‘Blue’.

13

We’ll use another circle inside ‘Blue’.

  • Size: 45 by 45 pixels
  • Gradient Overlay:
  • Blend Mode Normal,
  • Opacity 100%.
  • Colors: Left #171717, Middle #0b2035, Right #243873,
  • Style: Radial
  • check the option ‘Align with Layer’.

Rename this layer ‘Dark Blue’.

14

Lastly we’ll add a 13 by 13 pixel white circle with its opacity set at 90%.

15

The other one needs a bit more attention: start by drawing the following shape with the Ellipse tool. Lower the opacity to 90%. Use Ctrl + T to rotate it in the right position. Then add a layer mask. Lastly select the Gradient tool and swipe several times from the top left to the bottom right. Vary your swipes until you’re happy with the outcome.

16

The eyebrow is extremely simple and does not even require the pen tool, which not everybody is comfortable with. Instead get the Type tool. Write the following symbol: ‘(‘ with these settings:

  • Font name: Arial,
  • Font weight: Narrow,
  • Font size: 81 pixels,
  • Color #df7b12.

Use Ctrl + T to rotate it. Then add a drop shadow with these settings:

  • Blend mode: Normal,
  • Color #ffffff,
  • Opacity 40%,
  • Distance 1 pixel.

Center the eyebrow with the ‘main’ layer.

17

The first eye is done. Group everything into one folder with Ctrl + G and duplicate with Ctrl + J. Position them as you see fit. If you want to center them, simply group both eye folders into yet another folder and center that with the ‘Base’ layer.

For the nose we will use the same parentheses symbol by making a copy of it with Ctrl + J. Lower its size to 58 pixels and change its color to #e7750c. Flip it vertically and position it slightly underneath the eyes.

18

Step 5: Horns and hair

Use the Polygon tool to create the horns.

  • Sides: 3,
  • Width: 38 pixels,
  • Height: 44 pixels,
19

Layer Style:

  • Bevel & Emboss: Inner Bevel, Smooth, 100% Depth, Size 27 pixels, Shadow Mode Multiply, Opacity 15%, Color #000000,
  • Drop Shadow: Blend Mode Normal, Opacity 100%, Color #df7b12, Angle 90°, Distance 1 pixel.
20

For its shadow, draw a small circle with the Ellipse tool, set its color to #df7b12, then use Filter -> Blur -> Gaussian Blur with 8 pixels. Position this shadow layer underneath your horn and use the Eraser Tool to remove half of it. Use Ctrl + T to set both these layer at an angle. Group with Ctrl + G, duplicate, then flip horizontally.

21

The hair is made with a simple approach: use the Ellipse tool to create 3 shapes like this. Then use Ctrl + T to rotate and position them into place. Select all 3 layers and hit Ctrl + E to merge them.

22

Add the following layer styles:

  • Gradient Overlay: Opacity 100%, Style Linear, Angle 90°, Color left #ffde00, right #ffaf4b;
  • Drop Shadow: Blend mode Multiply, Opacity 30%, Color #ff9b36, Angle 90°, Distance 5 pixels, Size 5 pixels.
23

Then create a layer mask and by using the Gradient tool we’ll remove the top part. Swipe several times until you’re happy. Alternatively you can Rasterize Layer Styles and use the Eraser, but I prefer to keep it in a vector format.

24

Step 6: The Mouth

Use the Ellipse tool to draw a shape like this. Then use the Direct Selection tool to select the top middle point and hit Shift + down arrow several times until you’re happy with it. The monster should be smiling, but it’s up to you how big you make his grin.

25

Use the following layer styles:

  • Stroke: Size 3 pixels, Position Outside, Blend mode Normal, Opacity 100%, Color #db6700,
  • Inner Shadow: Blend mode Multiply, Opacity 15%, Color #000000, Angle 90°, Distance 5 pixels, Size 16 pixels,
  • Gradient Overlay: Blend mode Normal, Opacity 100%, Style Linear, Angle 90°, Color left #000000, right #45494d,
  • Drop Shadow: Blend mode Normal, Opacity 100%, Color #d96500, Angle 90°, Distance 7 pixels.
26

Name this layer ‘Mouth’. Inside it we’ll make the tongue. Use the Ellipse tool yet again to make a shape like this. Hold the ‘Ctrl’ key and click on the ‘mouth’ thumbnail to make a selection. Then click on the mask icon to create a layer mask.

27

Finally, add a Gradient Overlay with the following color codes: left #290a59, right #ff7c00.

28

We’re going to use the same procedure for the teeth only this time we’ll use the Rounded Rectangle tool with a radius of 15 pixels. Create the mask and add a Bevel and Emboss effect with these settings: Style Inner Bevel, Technique Smooth, 100% Depth, Size 27 pixels, Angle 90°, Shadow Mode 15%, Color #000000.

29

To separate the teeth draw a 1 pixel line with the following color #c5c5c5.

30

The mouth is now done; we just need to add a chin that is a duplicate of the nose. Increase the size to 58 pixels, change the color to #ff6201 and increase the Vertically Scale to 150%. Center it to the ‘Base’ layer and position it slightly underneath the mouth.

31

Lastly create a white circle with the size of 81 by 81 pixels and lower its opacity to 10%. Position it underneath the left eye, duplicate it and put the copy underneath the right eye.

32

Step 7: The suit

For the base of the suit we’ll use a rectangle. Select all the points with the Direct Selection tool and then select the Pen tool: Add Anchor Point. We’ll then click once in the middle of the top line. With that new point created and selected, we’ll use Shift + down arrow several times to create a nice curvature for the suit.

33

For the layer styles use the following:

  • Gradient Overlay: Blend mode Normal, Opacity 100%, Style Linear, Angle 90°, Color left #000000, right #45494d,
  • Drop Shadow: Blend mode Normal, Opacity 45%, Style Linear, Angle -90°, Distance 3 pixels, Size 1 pixel.
34

Having the suit layer selected, hold ‘Ctrl‘ and click on the thumbnail of the ‘base’ layer to create a selection. Then create a layer mask to hide the parts we don’t need.

35

For the elegant stripes we need to use the Line tool set at 1 pixel to create vertical lines. Separate them as wide as you see fit. To make sure they are evenly distributed, select all of them, and click on ‘Distribute Horizontal Centers’. You can then merge them and lower the opacity to 10%.

36

To hide the lines we don’t need we’ll need to do a few things:

  • having the lines layer selected, hold Ctrl and click on the thumbnail of the ‘Suit’ layer. Then add a layer mask.
37
  • hold Ctrl and click on the thumbnail of the ‘Base’ layer. Go to Select -> Inverse. Having the mask selected, hit ‘Delete’. Our lines are now complete.
38

For the napkin we’re going to create a rectangle 70 by 3 pixels with a color code of #717171. On top of that we’ll create a 66 by 15 pixel rounded rectangle with the top corners having a radius of 5 pixels and the bottom ones being squared. Note this is only available in Photoshop CC.

39

For the pattern, just use any floral one you can find and make sure your Scale is set at below 10%. Mine is set at 5%.

For the next part we’ll need the Polygon tool to create a triangle. Size 145 by 113 pixels.
Layer style: Gradient Overlay: Blend mode Normal, Opacity 100%, Style Linear, Angle 90°, Colors from the left towards the right: #0a0809, #0a0f0b, #050505.

40

Hide the unwanted parts with a mask. Hold Ctrl and click on the thumbnail of the ‘Base’ layer, then hit the ‘Add layer mask’ icon at the bottom of the layers panel.

41

Repeat the process for the white shirt layer. The buttons are small circles with the color code of #575757.

42

The tie is made out of 2 triangles created with the Polygon tool. Create the first one, duplicate and stretch the second one, then select both layers and merge with Ctrl + E. Add a 2 pixel horizontal line with a color code of #1363c0.

43

Finally, the layer styles used for the tie are:

Stroke: Position Outside, Blend mode Normal, Opacity 100%, Color #073870,
Satin: Blend mode Multiply, Color #000000, Opacity 20%, Angle 19°, Distance 11 pixels, Size 14 pixels, Invert is checked
Gradient Overlay: Blend mode Normal, Opacity 30%, Style Linear, Angle 90°, Color left #000000, right #ffffff.

44

Step 8: The shadow

Create a black rounded rectangle around 520 pixels wide and 25 pixels tall. Go to Filter -> Blur -> Gaussian Blur. Hit ‘Ok’ when you’re asked if you want to rasterize the shape layer. Set the radius to 8 pixels. Lower the opacity to 30-40% and use Ctrl + T to adjust it if needed.

45

And that’s our cute business monster icon tutorial. It seems like quite a lot of steps, but it actually just takes around 20 to 30 minutes to create. If you want to download the finished product, simply visit www.thislooksgreat.net and get it for free.

design