Create a MLB Icon of Your Favorite Team

The world series is upon us and although my favorite team is not involved I thought I would write a tutorial on making a cool icon or graphic that is similar to one I saw while watching a MLB game a few weeks ago.

First you want to trace an image of the MLB batter that is in the logo. Here is one I made you can trace with the pen tool.

After you do that create a 545X290px canvas with a white background.

Next in a new layer create a black rounded rectangle with 20px roundess. Don’t fill up the whole canvas, leave some white around the edges.

Now put your batter in the image and size it down to fit inside the black rectangle

Next Add the ball with your elliptical shape tool

In this next step we need to change the color of our rounded rectangle to blue on the left side and red on the right. From the bat to the right we want red and the rest red.

So with the pen tool I am going to cut out the right side and place it back where it was.

Make it a selection then cut it out…

Cut it out with ctrl+x on a windows keyboard or go to edit>>cut then paste it back in the canvas.

After that choose the left part of the rounded rectangle and put a color overlay with your blendiing options using the color #0a2769.

Now do the same thing with the right side except use the color #fa002d.

Now you should have something like this:

Now you made the MLB logo!

This part of the tutorial was just to get you to make the MLB logo, now we are going to add a logo of our favorite team beside it in a frame that looks kind of like an icon.

So now create a new document with a canvas size of 600X200px with a white background.

Make another black rounded rectangle in a new layer with the same roundess as before, also leaving shit space around the edges.

I want to cut out just an outer portion of this so we will have a frame to use. So in a new layer above that create a white rounded rectangle in the middle of our current black one leaving space around so it looks like a black frame.

So now we will use this new rectangle to cut out the part we don’t want of the black rectangle.

ctrl+click on the little icon next to your layer name of the white layer. Make sure you are currently in the layer with the black rectangle.

This should create a selection around the white rectangle

Cut out that part in the black rectangle with ctrl+x or edit>>cut. Now you can get rid of the white rectangle layer.

Add these blending options to the black frame:

Outer Glow

Bevel and Emboss



Gradient Overlay

After that you should have a nice little metal frame like this:

Now I will take the MLB logo I made and drag it into the document we are currently working in and shrink it down to fit in the left side of the frame.

Now in a new layer use your rounded rectangle tool to fill in the right side with a color.

I am going to add a gradient overlay to the previous layer:

That should look like this:

Now I found a Reds logo online that I am going to use to place in the right hand side of my icon.

Place your favorite teams logo there and change the background color of it if you would like.

I am almost done but I want to add one more final touch, which is a web 2.0 feel. You have to give everything that kind of feel!

So in a new layer above all the other make a white rounded rectangle that covers everything inside the frame like so

Now use your elliptical marquee tool to cut an arc out of the rectangle

Now delete that part and you should be left with something like this

Now add a layer mask, pick your gradient tool and make it web 2.0!

Leave a comment