How to create a playful business monster icon

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.

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.

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.

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 0°. Distance 5 pixels, Size 10 pixels. Rename this layer ‘Blue’.

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

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

The other one needs a bit more attention: start by drawing the following shape with the Ellipsetool. 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.

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.

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.

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 EraserTool to remove half of it. Use Ctrl + T to set both these layer at an angle. Group with Ctrl + G, duplicate, then flip horizontally.

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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

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.

Step 8: The shadow

Create a black rounded rectangle around 520 pixels wide and 25 pixels tall. Go to Filter -> Blur -> GaussianBlur. 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.

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.

The author

Barin Cristian Doru aka 'thislooksgreat' is an experienced web designer and proud member of the 99designs community: http://99designs.com/people/thislooksgreat
Besides creating awesome website designs, he is also an entrepreneur, an Android App Developer and a content creator. His work ranges from freebie PSD files to small tips & tricks in Photoshop, all the way to a premium 16 hour long course on how to succeed on 99designs.