Make your own Office Icon

Post Reply
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Make your own Office Icon

Post by Click16 »

Hey everyone! I will be showing you step-by-step how to make an Office Icon. An Office Icon is a glossy icon developed by Microsoft for use with their unique Office 2007 Applications. Well I will be using that design to make some sweet looking icons for your own projects! C'mon and I will show you how!

Office icons are very unique with the color style and the icon to go along with it. They have what looks to be the "Office Case" for the 2007 version. I don't know why but they do. Here are all of the Office Icons.

Image

You could also download the Template file, If your not too good at Photoshopping. So download Here.

Lets start out with something to work with.

Image

That is what i will be using for my template.

Step 1: Create the Icon Background.

Sub Step 1: Create a new layer. Call it Icon Background. Use a Rounded rectangle tool to create the proper rounding at the top left corner. Be sure that Fill Pixels is selected.

I found that 21px is a nice fit.

Image

Sub Step 2: We now need to finish the rest of the background. This is achieved by the select rectangle tool and can easily be edited to fit our needs. But before we mess with block part, we need to trim the rounding a bit to make it smaller. Subtract the current selection from the new one, and fill it in.

Image

Sub Step 3: Now for the fun part! We now need to find a unique color that will match what you wish in this icon. Right click the layer, select Blending Options. Go to Color Overlay and set it to your desired color Make it darker then your intentional color.

Image

Now its time to make the inner boarder. This will contain the white outline and the gloss.

Sub Step 4: Right click on your layer's thumbnail, select Select Pixels. Now in the menu bar at the top select, Select > Modify> Contract. Contract by 2 pixels. Make a new layer, Name it White Outline, with the selection and fill it white. Use the paint bucket. Contract it by 2 pixels again, Create a new layer, call it Glossy Background. Fill it with your color that you chose.

You should now have these layers in order from bottom to top. If they are mixed up, it won't work properly.

Glossy Background
White Outline
Icon Background
Background

This is what it should look like.

Image

Now lets add the lighting.

Sub Step 5: Create a new layer called Light. Use the circle tool and create a medium sized circle at the bottom of the image. Use the color White.

It should look like this:

Image

Add a Gaussian blur to it. Around 7 - 8 pixels does fine (at 72x72 px.)

Sub Step 6: Right click on the White Outline layer. Select Select Pixels. Press Shift + Ctrl + I. Or just go to Select > Inverse. Select your Light layer and press delete. Lower the opacity of the light layer until it blends.

It will look something like this now.

Image

Now lets add a cool effect!

Sub Step 7: Right click on your background and press Select Pixels. Create a layer under the light layer, and go into your gradients. Select the top right corner. Bring it down to the bottom left corner. Lower the opacity to look like a light as opposed to a gradient.

Image

Sub Step 8: Its time to add the gloss. Make all layers except the background invisible. Make a layer on top of all other layers. Call it Gloss. Create a gradient from one side of the image to the other. (The actual image drawing area. not the icon's sides.) Delete about half the gradient from the bottom.

Image

Now go to Edit > Transform > Warp. Make it look like this:

Image
-I added a black background, so you can see the shape of the gloss better.

Right click on White Outline's Thumbnail, and select Select Pixels. Select the inverse of the current selection. Select the Gloss layer once again and press Delete. Mess with the opacity until you get a nice blend.

Here is the completed background.

Image

Step 2: Creating the Icon

After all of your hard work, it will finally pay off! now all we need to do is design a white icon. displaying whatever you want!

Add a Drop shadow to your new icon!

I made a Download Icon with this Tutorial! Here it is!

Image

Here is the icon i created for Index

Image

Purple version of the template that I made for you guys along with this.

Image

My recreation of Microsoft Outlook's icon

Image

Enjoy!
Attachments
Office Icon Template.psd.rar
A template, slightly edited.
(26.2 KiB) Downloaded 581 times
Last edited by Click16 on Wed Jun 03, 2009 11:50 pm, edited 4 times in total.
Image
User avatar
NotZachary82
Posts: 1846
Joined: Thu Dec 20, 2007 8:39 pm

Re: Make your own Office Icon

Post by NotZachary82 »

The background shouldn't be that aliased, and those top pixels are irritating to look at; I'm surprised you didn't do anything about them.
User avatar
DoorM4n
Posts: 2154
Joined: Sun Dec 09, 2007 3:01 am
Location: Houston

Re: Make your own Office Icon

Post by DoorM4n »

Very nice! :D
Image
Remnant! We were the last stand.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Make your own Office Icon

Post by Click16 »

Yeah, i know. It seems when I made this, i maybe made the pixels a bit too high. maybe 20 is better.

EDIT: I created a work path, using a sphere and some points created with the pen tool. It works better, you can download the PSD file so you can check it out! I will just post the .png here at the bottom of the main topic. Enjoy, and I hope you like the new version.

Side note: The psd is gray, while the image i will show is purple.
Image
Post Reply