Icon-A-Day, Icon # 70, Run
Like the help Icon, only differant.
Friday, March 11, 2005 by mormegil | Discussion: Icons
| Icon 70 (Run) Today we will continue to go through the "Start" icons. This works out for me since I am going to be finishing (hopefully) moving this weekend, and will not have a lot of free time. The good news is that the next few tutorials will be easy for me. The bad news is that the next few tutorials will will seem quite repetitive. On the other hand this will be a good example of how you can use a technique multiple times and achieve good results quickly. Yesterday we did the "Help" icon, today we will move on to "Run" | ||
| Step 1: First things first, we copy the Help icon from yesterday, and remove the "?", and change the background to Reds. .jpg) |
Step 2: Now we simply type out the word "RUN" in a font that we think will look good. This is the same font as yesterdays icon. .jpg) |
Step 3: Now we use the Perspective tool to place the text, so it is kind of floating in front of the background. .jpg) |
| Step 4: Now using the Contour tool, I give the text a "poor mans bevel" .jpg) |
Step 5: Once I have the bevel the way I want I give the text a standard Corel drop shadow. .jpg) |
Step 6: Now with the contour tool I give the text an inner contour to the appearance of depth. I also give it some glare. .jpg) |
| Step 7: The last step is to give the new icon a new Reflection. .jpg) |
Finished Icon Design..jpg) |
|
|
Well, with that I'm back to packing. Tune in tomorrow for the "Suspend" icon. | ||
SS.jpg){kind=icon}
Icon-A-Day, Icon # 69, Help
Help, Help, I have to do the Help Icon.
Thursday, March 10, 2005 by mormegil | Discussion: Icons
| Icon 69 (Help) I wanted to do the Scanners and Cameras icon today, but I want to put some time into that one, so I am going to put it off for a few days. I am gearing up to do the big portion of our move on Saturday, so I am going to do a some of the simpler icons we have left to do. A while ago we did the "Folder Options" icon, in the process we made a glass checkbox. I liked the way it looked, and I think I am going to use that element to do several of the "Start" icons. Today we will start this process with the Help icon. | ||
| Step 1: First thing we do is copy the Folder Options icon. .jpg) |
Step 2: I delete the folder, and the reflections. And use the mesh tool to change the color of the center rectangle to blues. .jpg) |
Step 3: Now I type myself a "?" and convert it to curves. .jpg) |
| Step 4: Now using the perspective tool I tweak my "?" to look like it is the same perspective as the glass block. .jpg) |
Step 5: Now using the contour tool I give our "?" a "poor mans bevel". .jpg) |
Step 6: Once more with the contour tool I give the "?" an inner contour to give it some depth. I also give the "?" some glare. .jpg) |
| Step 7: I put a temporary gray box behind the icon to see how it will look on darker backgrounds. I also give the "?" a nice new drop shadow. .jpg) |
Step 8: Last thing we have to do is give it our standard Reflection. .jpg) |
Finished Icon Design. |
SS.jpg){kind=icon} Click here to download the finished icon. | ||
|
This should start us off on a bit of a string of "Start" icons. Check in tomorrow for the "Run" icon. Se ya then. | ||
.jpg)
Icon-A-Day, Icon # 68, Printers Folder
Another quick one saves the day.
Wednesday, March 9, 2005 by mormegil | Discussion: Icons
| Icon 68 (Printers Folder) As I have mentioned over the last few tutorials, I am in the process of moving, Tonight I settled down to finally pack up all my computer crap. This, as I am sure it is with a lot of you, is a pain in the butt for me. I start going "Hey I forgot I had this" or "oh what the hell is that", or "why on earth did I buy this Macintosh if I never use it"? Anyway the point of this story is that I became quite involved with this project, and just about forgot to do my nightly icon. Since this is the Icon-A-Day project I found myself in a bit of a panic when I remembered. Luckily for me and for my little icon project, yesterday we did the Printers icon, doing all the hard work for today's icon. The Printers Folder. This one is simply reusing existing elements, and doing a bit of tweaking. That said.... | ||
| Step 1: We will start by copying the Printers icon from yesterday. .jpg) |
Step 2: Now we copy our Admin Folder and remove the "Little People" .jpg) |
Step 3: I tweak the size of the printer a bit, and place it in front of our folder. .jpg) |
| Step 4: Now to offset it a bit from the folder I add a few drop shadows to the back paper tray. .jpg) |
Step 5: I'm not to happy with the way everything is gray and black, so I want to add a splash of color. I use the Mesh Tool to go in and recolor the light part of our printers glass cover with some red .jpg) |
Finished Icon design. |
SS.jpg){kind=icon} Click here to download the finished icon. | ||
|
Well that was simple and will save me enough time to pack one more box of crap before I go to bed. Tomorrow I think I might try and take on the Cameras and Scanners Folder. So check back then. | ||
.jpg)
Icon-A-Day, Icon # 67, Printers
Losts of Pictures, less talk.
Tuesday, March 8, 2005 by mormegil | Discussion: Icons
| Icon 67 (Printers) Ok I got home at a reasonable hour tonight so I thought I would make good on my plans from yesterday and do the printer icon. The good news is here it is. The bad news is it took me to long to do. Today's tutorial is going to be big on pictures and pretty light on commentary. The problem is that it is almost entirely done with the Mesh Tool, so it is hard to say, "do this, and do this". For more on the Mesh tool check out the two Videos I have done in the CorelDRAW for skinners series. Ok off we go again. | ||
| Step 1: I start with Seven Rectangles, and using the Mesh Tool I block out my printers shape. .jpg) |
Step 2: Now I start "sculpting" the printer with the mesh tool. .jpg) |
Step 3: Next I start adding the colors and tuning the mesh to give it some dimension. .jpg) |
| Step 4: Now I start giving the mesh more details, some grooves to match our folders and other metal graphics. .jpg) |
Step 5: You can see a bit more detail here of the mesh as it starts to take shape. .jpg) |
Step 6: I have to do a bit of tweaking to make sure that all mesh shapes fit together properly, or else we will get cracks between the shapes when we export. .jpg) |
| Step 7: Now I give the glass cover of our printer a bit of gloss just for polish. .jpg) |
Step 8: I won't bother showing more on the rest of the shapes, I will just summarize by saying I go in with the Mesh Tool and fill and sculpt the rest of our shapes. .jpg) |
Step 9: Now I create a bit of a drop shadow for the finished printer. .jpg) |
| Step 10: And last we create our reflection using our normal methods. .jpg) |
Finished Icon design. |
.jpg){kind=icon} Click here to download the finished icon. |
|
I am pretty happy with this Printer, however I feel it is to monotone. Perhaps later we will give it more color, but lets go with this for now. Until tomorrow, go skinning.... | ||
.jpg)
Icon-A-Day, Icon # 66, User Program Group
One last fling for the "little people."
Monday, March 7, 2005 by mormegil | Discussion: Icons
| Icon 66 (User Program Group) Yesterday we had the pleasure of making the "Program Group" folder. This makes today's icon very simple and gives us one last chance to use the "People" overlay that we originally made for the Admin folder. Today's icon is another one of those icons that most people will never see. There are system administrators out there who see it every day, and beside, it is supported by IconPackager, so to do a complete pack we have to do it. | ||
| Step 1: We shall start with a copy of yesterdays Program Group folder. .jpg) |
Step 2: Now we copy the "People" from our Admin folder, and shrink them down a bit, also we remove the shadows and Reflections. .jpg) |
Step 3: We lean the people up against the Explorer window. Then we copy our elements and make our reflection graphics. .jpg) |
| Step 4: Now we add a drop shadow. to the "People" and feather out the Reflection with the Interactive Transparency tool. .jpg) |
Finished Icon design. |
|
|
Well that was simple; unfortunately we are running out of the simple folder icons, I am hoping to finally get around to the "Printer" folder tomorrow. See you then. | ||
.jpg)
SS.jpg){kind=icon}
Icon-A-Day, Icon # 65, Program Group Folder
Not as simple as I planed it to be.
Sunday, March 6, 2005 by mormegil | Discussion: Icons
| Icon 65 (Program Group) I wanted to do another simple icon today, but it turned out a bit more of a project then I had expected. So here we go, lets make a Programs Folder. | ||
| Step 1: We will start with a copy of our Active X folder. I remove the X and its shadow and reflection. .jpg) |
Step 2: Now I want to make a little Explorer Window with some programs in it. So I draw the simple shapes with boxes. .jpg) |
Step 3: I take those boxes and group them, then I slant them back against the folder with the perspective tool. .jpg) |
| Step 4: Now I take some new boxes and with the Mesh tool start going over the title bar area of my Explorer window. I give it the same sort of look we are using on the folders. .jpg) |
Step 5: You can see here that I end up with 5 Mesh fill objects, "Skinning" my Explorer window. .jpg) |
Step 6: Now I copy a few of my earlier icons and make a sort of "List View" to go in the icon area of the Explorer window.
|
| Step 4: To save a bit of time I convert my new "List View" Into a bitmap. Using The Bitmap Effects I give it a bit of perspective. Then I tweak it a bit with size and skew to make it fit in the icon Area. .jpg) |
Step 4: To polish off our Explorer Window I give it 3 Command buttons and some boxes to flesh out the Shellstyle area. I also give the frame of the window some texture, copied from the folder. Last I give the Window a little Gloss. .jpg) |
Step 4: I don't think it is showing up well, so I go back in with the Mesh tool and darken some of the colors for a bit more contrast. I also give the icon our standard Reflection. .jpg) |
| Step 4: To finish up we go in and give the new Explorer window a nice drop shadow. .jpg) |
Finished Icon design. |
|
|
Well, that's one more folder down, tomorrow we will try and finish up another. See ya then. | ||
.jpg)
.jpg)
SS.jpg){kind=icon}
Icon-A-Day, Icon # 64, Workgroup
The last of the "Other" Icons.
Saturday, March 5, 2005 by mormegil | Discussion: Icons
| Icon 64 (Workgroup) Well, I spent all day moving so I am quite beat, but luckily there is a pretty simple icon that needs to be done. I'm in luck. This is the last of the icons in the "Other" section of IconPackager; we will have the satisfaction finishing up anther section. So lets do it. | ||
| Step 1: We will start by copying yesterdays "Entire Network" icon, and removing the globe and cable, as well as the reflections. .jpg) |
Step 2: Now since this is a "workgroup" I want to ad one more computer. So I copy the front computer, and put a new picture on it. In this case a copy of our globe. .jpg) |
Step 3: Now I size the new monitor down a bit, and place it behind the two monitors. I also give the new one a bit of Gloss on its screen. .jpg) |
| Step 4: Now we give the monitors a new reflection. I copy the two front most monitors and mirror them for our Reflections. .jpg) |
Step 5: Using the Interactive Transparency tool, I I fade out the two reflection bitmaps. See the Reflections Video for more on this. .jpg) |
Finished Icon design.
|
|
There we go, one more lose end tied up. I will be doing more moving tomorrow so we will be doing another simple icon tomorrow night as well. Not sure which one yet. | ||
.jpg)
SS.jpg){kind=icon}
Icon-A-Day, Icon # 63, Entire Network
This one is really the last of the "Network" Icons.
Friday, March 4, 2005 by mormegil | Discussion: Icons
| Icon 63 (Entire Network) Since it is Friday night, and I have just gotten home from a nice date with my beautiful wife, I am going to once again cheap out and do another simple icon. Yesterday we did the Network Services icon, today we will finish off once and for all the "Network" icons by doing the Entire Network icon. This icon used to be more important, but you almost never see it anymore, unless you poke around in your My Network Places folder for a bit. But it is supported, and therefore we need to take care of it. I like to do this one as a few computers, and a globe, this is to represent that the entire network can consist of just about any size of network, form a LAN to the entire Internet. Having said that, lets do it. | ||
| Step 1: To start with I will simply copy the My Network Places icon. .jpg) |
Step 2: Now I copy the monitor, flip it, and remove the shadows and the screen image and gloss. .jpg) |
Step 3: Now I copy our "Bliss" like image form our my Pictures folder, and use it as our wallpaper for this monitor. I also give the monitor some new gloss. .jpg) |
| Step 4: Now we make a new shadow for the monitor, with the shadow falling off to the left, to match our other objects. .jpg) |
Step 5: Now I take the original monitor from the Network Places icon and size it down a bit, and place it in front of the new monitor. .jpg) |
Step 6: I move the globe and cable back in front, and make sure it will fit. I tweak the cable a bit to make it longer. .jpg) |
| Step 7: Now we forgot to make a new reflection for the front monitor, so I move the globe away again, and give it a nice new reflection. .jpg) |
Step 8: Now I move the globe back, and clip the cable a bit to make it look like it is going behind the front monitor. .jpg) |
Finished Icon design. .jpg) |
|
That was pretty simple. I used to spend a lot more time on this icon in the old days, but now I seam to have settled on this formula. It works well and conveys the meaning I want. Besides, how often will it be seen? | ||
SS.jpg){kind=icon}
Icon-A-Day, Icon # 62, Network Service
Loose ends.
Thursday, March 3, 2005 by mormegil | Discussion: Icons
| Icon 62 (Network Services) Yesterday I said I would be be doing the Printer icon tonight. However I am running late today do to the fact that I am in the process of moving over the next week or so. So tonight I am going to cheap out and take care of some lose edges. A while back we did a series of network icons, now that we are getting closer to the end of the pack I realized that we skipped a few. The first of these is the Network Services icon. | ||
| Step 1: Lets start by copying the Internet icon. .jpg) |
Step 2: Now I size the globe down and tweak the cable to make it stretch further around the edge of the icon area. .jpg) |
Step 3: Now we take a copy of the gear from the admin folder and place it in front of the globe. .jpg) |
| Step 4: Now using our reflection techniques I give the gear a new reflection. .jpg) |
Step 5: Now using the Shadows techniques I give the gear the new shadow. .jpg) |
Finished Icon design. .jpg) |
|
Well, I still want to get to the printer icon, hopefully we will be able to take care of it tomorrow. | ||
SS.jpg){kind=icon}
Icon-A-Day, Icon # 61, Subscription Folder
lets polish off the obscure folders.
Wednesday, March 2, 2005 by mormegil | Discussion: Icons
| Icon 61 (Subscription Folder) As we move through the rest of the folder icons, there are a few obscure icons left, one of which is the Subscription Folder icon. So I thought we would get it taken care of tonight. | ||
| Step 1: We will start with by copying the web folder, and removing the globe and cord. .jpg) |
Step 2: Now we are use a few circles and triangles to make a "sync" symbol. .jpg) |
Step 3: Now using the Perspective tool, we lean the symbol against the folder. .jpg) |
| Step 4: Now with the contour tool we do a "poor mans bevel". See the contour video for more on this. .jpg) |
Step 5: Once more using the contour tool we fade the inside of the symbol to a lighter green. .jpg) |
Step 6: Now we quickly give the symbol a little gloss. .jpg) |
| Step 4: Now using our Reflection Techniques I give the symbol a reflection. .jpg) |
Step 5: Now using our Shadow Techniques I give the symbol a shadow. .jpg) |
Completed Icon Image. .jpg) |
|
Tomorrow we will tackle the Printers folder, which will be a bit of work. So check in then. | ||
SS.jpg){kind=icon}