How To Design an Effective Company Mascot

In today’s ever-evolving economy, more and more businesses are seeking innovative ways to connect with potential clients and customers. While some groups are still sticking to traditional advertising methods, others are using the latest social media outlets such as Twitter and YouTube to introduce themselves to new prospects and “humanize” their company. Though these methods can be very effective, there is another trend that is becoming a popular and powerful way to humanize your brand and foster a friendly relationship with your supporters — characters who serve as mascots for businesses. Some companies may not realize it, but nowadays having a mascot is just as important (and possibly more important) than having a logo. Using a mascot for your business not only increases your chances of being noticed, but it also makes your business a lot more memorable. Don’t believe me? Then think of notable companies like McDonalds and Burger King, both of which used mascots to create larger brand awareness. The Geico Gecko and even Mickey Mouse are two additional popular, widely-remembered mascots. Mascots aren’t just for gigantic companies; even the smallest firm can benefit from having a fun, friendly spokesperson for their business. In February, DesignFestival featured an article by Jean-Pierre Gassin showcasing 30 Websites with Awesome Mascots, and today I’m going to show you how to create a character of your own via Photoshop. For the purpose of this tutorial, I’m going to be creating a character to be the mascot for a fake online business specializing in digital design called “Design Monsters.” Now that I know the name of the business and their industry of choice, I can get started. Here is what the final design is going to look like:

Step 1: Canvas Setup

Start by setting up your canvas, I’m working 1200 x 900 with the resolution set to 314.

Step 2: Basic Shape

I always use basic shapes when creating my characters if I’m not using a sketch. To start creating the basic shape of your character, select the Pen Tool or press “P” on the keyboard. Once that is done, go to the top of your tool bar and select the “Rounded Rectangle Tool.” Using the color of your choice (or in my case #39cce2), create a medium-sized rounded rectangle shape in the center of your canvas.

Step 3: Pen Tool Anchoring

To give our character a more defined shape, we need to add a hump at the top of our characters head. To do this, click on your Pen Tool icon, hold your mouse there until your menu pops up, and select the “Add Anchor Point Tool.” Create an anchor at the top of your shape and drag the anchor up until you have a hump.

Step 4: Mouth Shape

To start creating our mouth, we need to first cut out a section of the blue. But, before we can do that, we need to rasterize our vector shape. Right-click on your layer and select “Rasterize Layer.” Take the Marquee Tool, making sure it is on default rectangle. Select a portion to cut out for the mouth and press delete. You can see what you should now have below.

Step 5: Lips

Now that we have our general mouth shape cut out, we can start working on building the lips. To do so simply take the Ellipse Tool (you can get to this the same way as you did the Rounded Rectangle Tool), and start making little circles around the perimeter of mouth cut out. Repeat this until the perimeter of the mouth is fully covered.

Step 6: Arms

I’m going to give this character long wavy arms, and in order to do that, I need to utilize not only the rounded rectangle tool, but also the warp tool. Start with making one slender rectangle that extends from the body. Next, go up to “Edit” > “Transform” > “Warp” and begin manipulating the arm until it’s bendy. Remember to press “Enter” after you get your arm bent the way that you want it to be.

Step 7: Duplicate and Rotate

Duplicate your arm so that you now have two of the same shape, and then rotate both arms so that the “fists” are turned upright.

Step 8: Legs

As you can see, the character I am building to be the mascot is a monster, so I want to keep with the monster-type theme and create legs that will be more like tentacles. To achieve this look, we are going to use the same method that we used to create the arms, but instead of using the rounded rectangle, I am going to use the ellipse.

Step 9: Rasterize

Now that we have the general shape of our character, we need to rasterize all of our vector shapes and merge them together. Make sure not to merge the background as well; to prevent this from happening, hide the background layer and make it visible again once the rasterizing is complete.

Step 10: Gradient

Some people like to do their shading and detailing after they are done, but since we already have our basic shape completely drawn and merged as one layer, I want to add my gradient now. Right-click or double-click on your layer so that the Blending Options prompt appears. Select the box for “Gradient Overlay” and then click on the gradient so that a separate menu appears. Choose the color you used to create your character, and then click OK. Change your blending mode to Multiply and then click OK.

Step 11: Inside of Mouth

With the color #006084 selected, create an elliptical shape over the mouth. Once done, move this layer under the body layer so that it is behind everything. This is the start of the inside of our character’s mouth. Add an anchor as shown in Step 3 and pull the edge of the ellipse inwards so that you have sort of a curve.

Step 12: Finishing Mouth

Finish the inside of the mouth by creating the throat opening and the uvula by using the Pen Tool. Make sure you have the shape layer option turned on.

Step 13: Tentacles

Now, because the tentacles of our character base blend into each other I need make them look like separate entities. To do that, I am going to create a contrast under part with #ffe29e by repeating the method of using a vector shape and warp tool to get the shape I want. Apply this technique to all of the legs so that you have something that looks like the image below. Note that in order to do the back legs, you will need to rasterize your vector shape and remove the parts that overlap the front two legs.

Step 14: Hands

We are going to do what we did for the tentacles for the “fists” of our characters using the same color that we used for the underside of the tentacles. Once again, using the ellipse and the warp tool, manipulate your ellipse until it fits the shape of the “fists.” Do this for both fists.

Step 15: Eyes

With #009dd1 create two ellipses for the eyes. Create two smaller ellipses using #026085 and apply them as shown below to add depth to the monster eyes.

Step 16: Tentacle Suckers

Create small ellipses around the under part of the tentacles; these are going to be your suckers. In order to make the suckers look less flat we are going to use the Blending Options. Select Inner Shadow, and change the color to #d49e29, and change the settings according to the image below.

Step 17: Hand Suckers

Repeat the same steps you did to create the suckers on the tentacle legs, but this time create only two large ellipses to place on the hands. Open the Blending Options menu and change the settings as shown below. This is what it should look like when you are finished:

Step 18: Finish Details

Finish adding whatever other details and finishing touches that you want. I created some spots, added a tongue, placed a crown on the monster’s head, and added a bellybutton to get my final image.

Step 19: Add Your Character to Your Site

Conclusion

Creating characters for your website can be a fun and effective way to appeal to curious visitors. There are tons of ways to create them using various kinds of methods; I’ve only showed you one. If you ever find yourself designing a character for a business, here are a few of helpful tips. Utilize either the name or the service of the business when it comes to creating your mascot. Try sketching out various thumbnails until you get something you like. Don’t worry, you don’t have to stick with what you draw; this method is just a way to get your creative juices flowing. If you prefer using vector images, you can always convert your PSD into an .eps or .ai file if you have Illustrator, or you can design your character directly in Illustrator in lieu of Photoshop, the choice is yours. I hope you’ve learned some new techniques and will experiment on your own. If you have any questions or want to share your own characters I would love to see them. Happy character designing everyone! Do you have any character designs to show off? Do you think mascots are a fleeting fad or a more memorable, friendlier version of yesterday’s logos?

Frequently Asked Questions about Designing an Effective Company Mascot