Icon-A-Day, Icon # 19, My Network
Once more we find new homes for the icons we have done already.
Tuesday, January 25, 2005 by mormegil | Discussion: Icons
| Icon 19 (My Network) Now we move on to our My Network icon. I would like to think of some really cleaver convention for this, but I have not had any luck so far. What I, and most other icon makers seam to do, is a computer with a globe or two computers together. Since we have a neat looking globe I figured we go with it one more time. |
||
| Step 1:
We will get started by copying our My Computer icon, and shrinking it down about 80%. .jpg) |
Step 2: Now we Copy our Internet icon over, and shrink it down and place to the lower right of our guide box. I also delete the cord and its shadow. .jpg) |
Step 3: Now I make a new cord, leaving our plug on the globe and running off behind the Computer. I do this with the Mesh Fill tool. .jpg) |
| Step 4: I pull a shadow off the new cord, and break it apart. Then I crop it down to make sure it looks right, using the Node Edit tool. .jpg) |
Finished Icon Image..jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
|
This is an important icon, though it was pretty simple to
make. Tomorrow we will move on to the Web folder. |
||
Icon-A-Day, Icon # 18, Network Drive - Offline
A few more tweeks and we have one more Icon.
Monday, January 24, 2005 by mormegil | Discussion: Icons
| Icon 18 (Network Drive - Offline) Today's icon is pretty much the same as yesterdays icon but with some tweaks. I almost included it with yesterdays icon, but there is a bit more work to it than I had thought, so I decided it was worthy of its own day. |
||
| Step 1:
First thing we do is copy our Network Drive icon from yesterday. .jpg) |
Step 2: I move the cord out of the way, and Convert the globe to one bitmap. Then I make it slightly Transparent. I will tweak this later. .jpg) |
Step 3: Now I move my globe out of the way, and with the Mesh tool I add some length to the cord, and bring it around to the back of the drive. .jpg) |
| Step 4: With my Mesh Tool I polish up the cord and pull a drop shadow off of it. I want the cord to look like it is missing the globe. .jpg) |
Step 5 I Crop and Fade the shadow and cord so they do not run out of our guide box. I move our globe back in position and adjust the Transparency until I can see the cord through it. I bring back our plug from the other icon and make its center blue instead of red. .jpg) |
Finished Icon Image. .jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
||
|
That finishes up the Default Hard Drive icons in our
pack. We still might do some more as bonus icons, but that will be
later. |
||
Icon-A-Day, Icon # 17, Network Drive.
let us get started on our Network Icons.
Sunday, January 23, 2005 by mormegil | Discussion: Icons
| Icon 17 (Network Drive) Over the next few days I should have some pretty simple icons. I want to knock out most of the Internet or Network related icons in one fell swoop, so here we go. |
||
| Step 1:
The first thing we need to make our Network Drive is the Hard Drive icon we already made. Copy it, take away the cord, and size it down about 80%. .jpg) |
Step 2: Now we Copy the globe from our Internet icon, size it down, and remove the cord from it as well. .jpg) |
Step 3: Now we put them together. .jpg) |
| Step 4: We need to trick out the cord a bit and make it a bit larger. .jpg) |
Step 5 I give the cord a little shadow then break it apart and crop it down to fit a bit better with the Node Edit tool. .jpg) |
Finished Icon Image. .jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
||
|
Tomorrow we will do the Network Drive (Offline) icon. |
||
Icon-A-Day, Icon # 16, HTML File.
Now we start on the Network Icons.
Saturday, January 22, 2005 by mormegil | Discussion: Icons
| Icon 16 (HTML File) Now that we have the Internet icon, Icon # 15, we can use it to help us several of the icons in the pack. |
||
| Step 1:
First thing we do is copy our TXT file, to use as a template. I remove the Text and Reflection, as they will be replaced in the new icon. .jpg) |
Step 2: Now we copy the Globe icon, shrink it down to about 70% - also I remove the cord - I am going to make a new one for this icon. .jpg) |
Step 3: Now using the mesh fill I quickly take two rectangles and make new cords out of them. .jpg) |
| Step 4: The trick to doing the cord is to set all the nodes to "Smooth", this will round it and do a lot of the work for us. I will cover this in the next Mesh Fill Tool Video. .jpg) |
Step 5 Now we copy our globe, Crop it, and give it some Transparency for the reflection on the file. .jpg) |
Step 6: Now using standard Rectangles and Text I mock up a more HTML looking text for out file. Once I like what I have I copy it and make our reflection. .jpg) |
|
Step #7 Now I move all of our elements back together. And make sure it all looks good together. .jpg) |
Finished Icon Image. .jpg) |
SS.jpg){kind=icon} Click here to download the finished icon. |
|
Over the next few days we shall do all the Internet
Related icons, so check back in soon. |
||
Icon-A-Day, Icon #2, Default File
The most unappreciated Icon in the pack.
Sunday, January 9, 2005 by mormegil | Discussion: Icons
| Icon 02 (Default File) After the Folder icon, the Default File icon, tends to be the most important icon in a pack. (At least for me). It is at the same time one of the easiest and one of the hardest icons in an Iconpack. It takesn very little time to draw, but you may end up doing it 50 times, trying to find something that has not been done 1000 times before. The icon below took maybe 15 minutes to do, less time than it is taking me to write this. Now that I said all that, I came up with the style for this icon set in one try. Mostly as a "Hey, I wonder if I could pull that off" experiment. What I have decided to try and pull off is a Glass icon set, or Plastic icon set, depending on how you look at it. All the file icons will be transparent glass plates, with a colored band on the top, the band may change depending on the type of Icon. Also the glass will allow us to have any file "Overlays" that I place on the icons to have a reflection in the surface of the file. At least that is the plan. This is the Default Icon, so it is pretty damn plain, but I am pretty excited to see how the rest of the icons come out. Now lets get started. | ||
| Step 1: Using the Rectangle Tool, I draw a 1.28 x 1.28 box, same as in the last icon. Then I draw another rectangle; that will become my file icon. .jpg) |
Step 2: I give the rectangle a white to light grey gradient, and then using the Interactive Transparency tool I make it fade from slightly transparent on the top and bottom, to about 50% transparent in the center. Because this is glass and my page is white I put a throw away shape in a darker color behind my Icon so I can see it. I will delete it later. .jpg) |
Step 3: Now I copy the rectangle 3 times and Crop the copies so I can get my edges - one Grey and one white - and send them to the back. This is to give the glass some depth. Then I place another 2 rectangles on the top - one transparent blue, and one white - to make my band. .jpg) |
| Step 4: Now I copy the shape of the page and pull a light drop shadow off it. I also copy the edges separately and pull a shadow off them. This gives us that glass shadow look. I also fade them out in the same way I did in yesterdays folder shadow. .jpg) |
Step 5: Now using the same steps as yesterday I make the reflection of the icon below.
|
Step 6: Lastly we add the "Glare", drawing the glare on with white shapes and fading it out with the Interactive Transparency tool.
|
And our finished icon should look something like this..jpg) |
Note: I realized at the end of this that I had the colors of the inside of the glass reversed, so I flipped the two trimmed shapes so the black is on the top left and the white is on the bottom right. | |
|
Well that about wraps it up for the Default File. Let's hope my gamble that this will look good when we get more of them will pay off. Tomorrow I think we will do the open folder, or the Default Document icon. Tune in then to find out. | ||
.jpg)
.jpg)
SS.jpg){kind=icon}
Orbicons: The Tutorial
Create Your Own Orbicon Icons.
Tuesday, January 4, 2005 by wstaylor | Discussion: Icons
I have made over 100 icons in the past 2 days. They all have the same idea in mind; glass orbs with an image referring to a program inside of the orb. For some reason I cannot stop making these little orbs. Now, I know that some of you are saying - "Orbs are very old..." or "We are tired of seeing orbs..." - but I say, "MAN! I wish I could stop making these things!"
This is where this article gets interesting: I am going to share with you just how I made these orb icons, so that you too might try and see whether or not you can stop making them. Yes, this is a tutorial for making Orbicon icons using Photoshop and Icon Developer. I hope it comes in handy for someone.
Step one: Open Photoshop and Icon Developer.
Step two: Find some image or logo that you would like to use for your icon. If you want to Google search images for the logo that will work as well. I like to use http://www.brandsoftheworld.com to find high resolution EPS (encapsulated post script) images for download. So I am going to use this site to find a logo for www.mozilla.org - the giant red dinosaur ( found here ) - and I am going to download the EPS of it and save it to disk.
|
Step three: Open the EPS file using Photoshop. Should look something like this: Just click OK on this dialog box. |
|
| Step Four: The next step will be to make the EPS file background transparent. The wonderful Magic Wand in the toolbar of Photoshop.
Notice that I have selected the Magic Wand and set the tolerance to (5) and chosen anti-alias and contiguous. Then choose the white area around the mozilla.org dinosaur, and go to select and choose inverse. Push [ ctrl + X ] or go to Edit --> Cut and that will remove the dinosaur from the EPS file. Next go to File --> New and set the background to transparent, click ok to the default size then go to Edit--> Paste and a new image with the red dinosaur will appear, with a transparent background. |
|
Step Five: Now to begin making the Orb'd dinosaur. The easiest way I found to do this was to reduce the image size to 128x<128... meaning go to Image-->Image Size - and change the smaller number to 128 (constrain proportions selected)... this case being the height. Your dinosaur dimensions should be 146x128. Now go to Image--> Canvas Size and change that to 2 by 2 inches. The blank area around the dinosaur should be a lot bigger now. Now we will go to Filter--> Distort--> and Spherize. We will increase the slider to 100% and Press OK... then apply it 2 more times, by pressing [ ctrl + F ]. the dinosaur should look somewhat larger and kind of Orb'd. Go to Image--> Trim choose transparent pixels check all of the sides (top, bottom, left, right) and Press OK. Leave that image alone.
| Step Six: To make the glassy orb: Go to File--> New set background to transparent and make the size 128x128. Then right click the Rectangular Marquee Tool and change it to Elliptical Marquee Tool (Figure1). Set its properties like the way I have them in the screen shot. Then zoom into the blank image (about 500%) and click the top left corner, so that a circle will be selected that touches each side of the square. Keep trying until you have a circle that is as big as the canvas.
Change the foreground color to white. and go to the Gradient tool, choose foreground to transparent and then choose the radial gradient. (Figure2) |
 |
|
| Figure1 - click to zoom | Figure2 - click to zoom |
| Then drag the radial gradient tool across the orb from bottom-right to top-left. Then go to Layer--> New and create a new layer. Now select another foreground color - this will be the color of your orb. Drag the Radial Gradient tool from top-left to bottom-right this time. I have chosen Red... Now go to Image and then Canvas and set it to 1x1 inches. Set your zoom back to 100%... Then right click the White to Transparent Layer and choose Blending Options. Choose Drop Shadow and set the Angle to 90... then choose Inner Shadow and uncheck global lighting set its Angle to 120 and set the Size to 30. (Figure3) |
|
|
Figure3 - click to zoom | |
|
Next add the layer for the light glare on top of the orb. Go to Layer--> New and then with the Elliptical Marquee Tool create an oval shape over the orb... then go to Select--> Transform Selection and move that oval to position and make it the size you feel comfortable with (Figure4). Choose the gradient tool and select white as the foreground color... then drag the linear gradient from top to bottom - you can then move that oval around if you want. (Figure5) Now We Have Our Orb | |
 |
 |
|
Figure4 - click to zoom |
Figure5 - click to zoom |
| Step Seven: Add the mozilla.org dinosaur to the icon. Go back to your dinosaur and Press [ ctrl + A ] and then [ ctrl + C] to Copy the dinosaur... then go to your orb and press [ ctrl + P ] to Paste the dinosaur there. Then Free Transform the dinosaur, by Pressing [ ctrl + T ] - set the horizontal and vertical scale to 25% and center the dinosaur in the orb. (Figure6) - Then right click the dinosaur Layer and go to Blending Options - choose Drop Shadow and Press OK. Choose the Dinosaur Layer and set it to 80% Opacity. (Figure7) |
|
|
|
Figure6 - click to zoom |
Figure7 - click to zoom |
| Step Eight: Create the Icon. Now go to Image-->Trim... this will make the image back to a smaller size. Then go to File-->Save For Web and choose PNG-24 Then select the Image Size tab and uncheck Constrain Proportions and set the size to 128x128.(Figure8) Then Click Save. |
|
|
Figure8 - click to zoom |
Now We Have Our 128x128 PNG
| Step Nine (Optional): Open Icon Developer and choose Convert Image to Icon. Choose ONLY XP Icons and click OK(Figure9). Then go to File-->Save As and name your Icon. |
|
Now We Have Our 128x128 Icon
Download the Finished ZIP Here...
Step Ten (Optional): Zip your *.ICO and *.PNG file together and Upload it to the Misc Icons Section at Wincustomize.com. 
You can see examples of my Orbicons over at http://wstaylor.wincustomize.com - ENJOY !!!