Friday, November 5, 2010

Creating the new "Office for Mac 2011" icon

The new “Office for Mac 2011” icons are stunning and sophisticated.Microsoft has engaged the help of company called Frog Design to help them create a new line of icons for their 2011 version of the Office for Mac.With the help of grids and pen tool, it is really not that hard to come up with a similar design. This tutorial will capture the essence of the icons.

PSD Available 
(5% will be donated to charity):
Download entire tutorial
(5% will be donated to charity):

Grids and Circles

Step 1: Create a 100px X 100px circle. I drew the circle with the help of grid-lines. Set vertical grid lines at 150px and 250px and horizontal grid lines at 150px and 250px. Name the layer “Circle”. Give it the layer properties as shown below

Step 2: Set another vertical grid line at 300px and 350px. Duplicate the ‘Circle’ layer and move the circle until it’s center is at the 300px gridline. Do this for the rest of the circles in the illustration below. Use gridline to help u achieve accuracy.

Step 3: Group all the layers together and call it ‘Blueprint’ or whatever name you can concoct.

Pen Tool

Step 4: Use Pen tool and start plotting the points according to illustration below. Name the layer ‘P-bright’.

Creating the rounded corners

Step 5: A very easy technique that i always use to create a rounded corner are as follow:

  • Add anchor point.
  • Use ‘Direct Selection Tool’ to drag the point to create some curvature.
  • Use ‘Convert Point Tool’ on the two handle bar to increase the curvature until it forms a nice rounded corner.
Another example:

Step 6: Apply this technique to all the corners that need rounding except on the exterior side of the “P”. For that side, you will need to delete the existing anchor point there first before applying the above technique to round it.

This is what you will get after rounding the corners. The basic shape of the icon is done. What we will need to do now is to give it some depth.

Giving Depth

Step 7: Duplicate the ‘P-bright’ layer and rename it ‘P-dark’ layer. Make sure it is on top of the ‘P-bright’ layer.

Step 8:Delete the anchor points that are shown below and adjust the handles to get the desired shapes

Step 9:Add another anchor point and delete the other anchor point as shown in the diagram. Adjust the handlebars again to get desired shape

Step 10: Select the anchor points that made up the tail of ‘P’ and shift them to the right.Add another anchor point before deleting the bottom anchor points to get the shape shown in the illustration below


Step 11:Fill up ‘P-bright’ layer and ‘P-dark’ layer with respective colors.

Step 12: Adjust the layer properties of ‘P-bright’ layer.

Step 13:Adjust the layer properties of ‘P-dark’ layer

This is what you will get so far. Pretty sweet eh.

Step 14: Duplicate the ‘P-bright’ layer and rename it ‘P-back’. Move it below ’P-bright’ layer.Fill up the layer with the color stated in the picture.

Step 15:Nudge the ‘P-back’ layer to the left by pressing the left key twice.

Your ‘P’ icon is done!

Now that you have learned the techniques in achieving the look and feel. Try to attempt other letters and post it in the comments!



Blogger Anthony said...

can someone make the entire alphabet of this and post it

February 9, 2011 at 11:00 PM  
Anonymous Anonymous said...

could you have a download link to the your finished product?

April 15, 2011 at 12:26 AM  
Anonymous Anonymous said...

could you make an N and post it here (for OneNote)

April 15, 2011 at 11:20 AM  
Anonymous Admin said...

Sorry anon for the late reply.. I will upload it when I find the time. :)

May 16, 2011 at 12:44 AM  
Anonymous Web Design Sheffield said...

With this tutorial, we could see one of the many tricks of photoshop how to manipulate pics and how to let us think how on earth they done that. It is really educational just following the tutorials.

May 27, 2011 at 9:55 AM  
Anonymous android tablet said...

Great post. Very detailed tutorial. Thanks for sharing.

July 13, 2011 at 8:44 AM  
Anonymous Mark Lee said...

Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information.

July 13, 2011 at 10:53 AM  
Anonymous hcg said...

Wow, nice post,there are many person searching about that now they will find enough resources by your post.Thank you for sharing to us.Please one more post about that..

October 28, 2011 at 11:34 PM  
Blogger Best Hostings said...

You have explained very clearly. This tutorial is helpful to us.I hope you will update more new information.Thanks.Best Hostings

January 17, 2012 at 3:03 PM  
Blogger Sonam Gupta said...

You can't be too careful about who you listen to and why. So when it comes to micro caps and how to trade them, what are the best tips you need in order to get started and earn serious money trading?

Commodity Tips, Stock Tips

May 23, 2012 at 7:03 PM  
Blogger kailash soni said...

Swastika Investmart Share Brokerage Firm India .We Provide Top broker in India and there comparison based on there account opening charges, brokerage charges and after sales services.

October 17, 2014 at 7:39 PM  
Blogger Bắp Cải said...

I am an avid reader who likes engaging content. That's why I am here. Your original views on this topic are refreshing and interesting. You've done a great job of expressing your views. Thank you.
tu 95| call of duty| clicker heroes| strike force heroes 2| kitten cannon
scooby doo games| scooby doo| brain games| braingames| brain

July 14, 2015 at 12:13 PM  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home