First Previous Page 2 of 7 Next Last

Icon-A-Day, Icon #87, Removable Drive

The Last of the Default Drives

Sunday, May 8, 2005 by mormegil | Discussion: Icons

Icon 86 (Removable Drive)

We have one last Default Drive type: the Removable Drive icon. This used to be used most often for Zip Drives, Jazz Drives and the like. These days it is most commonly used to represent USB Drives, and most common of these are Thumb drives.  So I decided to go with that for our icon today.

I did not want to use some a real Thumb drive. Instead I am just going to make something up that will match the rest of our Icon-A-Day drive icons.  Off we go.
 
Step 1:

It is going to be a bit hard make this look good, since Thumb drives are usually longer than wide, and will be a bit thin to fill the Square icon. As always I start with some rectangles to start shaping our drive.

 Step 2:

Once I have my forced perspective working I start with the USB Connection, using some mesh fills to give it a metallic look.

 Step 3:

Now I give the connections some detail, the contacts inside the plug, and two "holes" in the plug.

 
Step 4:

Now we go back to our Mesh Tool and start giving the body of the drive some detail, bevels, and changes in the grey as we have used in the rest of our drives and hardware.

Step 5:

Now we give the drive body a brush texture with our Interactive Transparency Techniques.

 Step 6:

To make sure this icon matches, we give the metal body of the icon a nice gloss.

Step 7:

Now we need our standard Reflection.

 Step 8:

Last we give the drive a nice Shadow.
 Finished Icon Image.
 





Click here to download the finished icon.
 

That brings us to the end of our standard Drive icons, but I still want to do a few more Bonus Drive icons. I also want to use these on my Mac so I am going to make sure we included all the CD and DVD types. I think we will try and take care of those next.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

3 Reply 30 Referrals

Icon-A-Day, Icon # 86, RAM Drive

One for the power users.

Wednesday, May 4, 2005 by mormegil | Discussion: Icons

Icon 86 (RAM Drive)

Today's icon is pretty obscure. Not many of us use RAM Drives these days, but it is supported in the default icons in an Icon Package. This one is always kind of odd, but I tend to use a Memory Chip. Today we will do the same. The techniques for doing today's icon are once more almost the same as the last two days.
 
Step 1:

We will start with several rectangles, making up the basic shapes of our chip.

 Step 2:

Now again we use the Perspective Tool to give our chip the basic perspective we want.

 Step 3:

Now we need to add some depth to the icon. So I copy some of the rectangles, mirroring them and shading them to see if they work.

 
Step 4:

Now to round the shape of the chip a bit, I replace the to main rectangles with two Mesh Rectangles.

Step 5:

Just to make the chip look a bit more realistic we give it some texture with our Interactive Transparency Techniques.

 Step 6:

Now with some rectangles and the Text Tool we create some printing to go on the drive, using the Perspective Tool to lay the image on the chip.

Step 7:

Once more our last step is to polish it off with our Shadow and Reflection Techniques.
Finished Icon Image.



Click here to download the finished icon.

Tomorrow we will polish of the Default Drive types with the Removable Drive icon.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

2 Reply 349 Referrals

Icon-A-Day, Icon # 85, SD Card

Moving on through the Drive icons.

Tuesday, May 3, 2005 by mormegil | Discussion: Icons

Icon 85 (SD Card)

Moving on through the Drive icons, these days I find myself using SD Cards as my primary form of flash memory. Since I use it the most I want to get it out of the way right away. The steps for this are almost identical to yesterdays icon. The only real different is the basic shapes. So lets do it.
 
Step 1:

First we draw out the shapes of the media with several rectangles, tweaking them a bit with the node edit tool.

 Step 2:

Once more we group our objects together and use the Perspective Tool to lean our disk back.

 Step 3:

Quickly we add some detail to the edge of the card with a few rectangles. I quickly fill in the shapes so that I can tell the shading is ok.

 
Step 4:

Now we give the Card their final colors, including the yellow lock. I also give the full card a bit of texture with our Interactive Transparency Techniques.

Step 5:

Now using simple Text Tools and the basic drawing tools to make an SD logo and some text to place on the card.
 

 Step 6:

Now we use the Perspective Tool and some basic drawing tools to give the label some details. I also give the the label a bit of Gloss.

Step 7:

Once more our last step is to polish it off with our Shadow and Reflection Techniques.


 



Finished Icon Image.




Click here to download the finished icon.

There we go, a nice SD Card icon. I think tomorrow we will take care of the Ram Drive icon. See you all then.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

4 Reply 83 Referrals

Icon-A-Day, Icon # 82, 5" Floppy

Why? Because it's there.

Thursday, April 28, 2005 by mormegil | Discussion: Icons

Icon 82 (5" Floppy)

Tonight we will start polishing off the rest of the Drive icons. I will also be doing some bonus drive type icons, but that will be in a few days. As for today we will do the one of the simplest icons, and yet one of the most useless. But it is still supported and I am sure if I did not include it,there would be someone, somewhere who would miss it. So with no further ado, I give you the 5 Inch Floppy Disk.
 
Step 1:

We start off with a circle and some rectangles, giving us the basic shape and elements.

 Step 2:

Once I have my disk elements I group them using the Perspective Tool to slant it back.

 Step 3a:
 
Quickly I give the shapes some basic fills to see how the elements work together.
 
Step 4:

Now we copy the face of the disk and off-set it just a bit, giving the first one the darkest fill, so there is a visible edge.

Step 5:

Now I copy the face of the drive again and change the fill to black. I also give the new copy a Transparent texture.
 

 Step 6:

Now we touch up the rest of the fills giving the label and the inner disk some gradients.

Step 7:

Now with our usual techniques we give the disk a Shadow and Reflection.

Finished Icon Image.



Click here to download the finished icon.

Tomorrow, we will do the much more useful 3" floppy disk.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

5 Reply 13 Referrals

Icon-A-Day, Icon # 81, Search

Time to start tieing up the lose ends.

Wednesday, April 27, 2005 by mormegil | Discussion: Icons

Icon 81 (Search)

Tonight we can finish off another lose end. The start menu is mostly done, however I seem to have skipped the Search icon. I always like to try and come up with something clever when doing these, but when it comes to Search, I never can. I almost always end up doing a Magnifying glass. The only thing I can think of to do to make these match the rest of the icons is to make sure the colors match, as well as the perspective.
 
Step 1:

First we will start with a few squares and circles. I Rotate them a bit, and group them.

 Step 2:

Now we take our group that we just made and slant it back with the Perspective tool.

 Step 3a:
 
Once I have a perspective I like, I ungroup the top of the glass, and do some Copying and Trimming to make a simple extrusion.

 
Step 4:

Now with two mesh fills and a bit of gloss, I draw over our boxes to make a handle for the glass.

Step 5:

Now I use standard Gradients to make the upper part of the glass look like metal.
 

 Step 6:

Now we place a new circle in the center of the head and using the interactive transparency tool I give it a radial transparency.

Step 7:

Now we give the glass some glare.

Step 8:

Now using our standard reflection techniques we give the icon a reflection,
 

 Step 9:

Last we have to give the icon a new shadow using our normal techniques as well.

Finished Icon Image.


Click here to download the finished icon.

I think that wraps up our Start Menu icons. This is also a good element that we may find more use for later. See you all tomorrow.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

5 Reply 25 Referrals

Icon-A-Day, Icon # 74, Scanners & Cameras

So it turns out, I'm not dead. I have just been missing in action for a month.

Tuesday, April 19, 2005 by mormegil | Discussion: Icons

Icon 74 (Scanners & Cameras)

So it turns out, I'm not dead. I have just been missing in action for a month. For those of you who do not know, but were wondering, the reasons why the Icon-A-Day icons came to a screeching halt last month, I will explain. Well at least sum up.

Reason # 1. I just moved, and as it turns out, moving seems to take up some time. Getting my studio set up the way I like, as well as all the piles of boxes and piles of crap ordered and placed in to new boxes of crap took way longer than I thought it would.

Reason # 2. I HAD NO INTERNET. I know it is hard to imagine, but thanks to Charter Cable, those bastards who just sent me a bill for a service that I never actually got, I was without Internet access for 3 weeks. I have Internet at work, but was very busy with the Galactic Civilizations II Beta and so could never make time to get anything else done there.

Reason # 3. (This one I think was subconscious) I was very tired and needed a break. Well I got my break, so I can get my ass cracking and we can finish this pack now.

Now that that's over, lets make an icon.

When I left we had stepped away form the folder icons and were finishing up the "start" icons. Now that I'm back, let us dive back into the folder icons and push on through to the end. Today we will take care of "Scanners & Cameras" or "Imaging" or whatever it is called these days. This is the folder in the control panel that contains all your imaging devices and their preferences. We will do it how windows does; with a picture of a scanner and a camera.

Sadly today's tutorial will be pretty vague since it is about 90% mesh fills, but I will try and be as helpful as possible with my descriptions.
 

Step 1:

First step is to take some mesh rectangles and mockup what we are looking for, keeping in mind the perspective and style of the rest of the pack.


Step 2:

Now we start "sculpting" the meshes to give our scanner some details. If you look close you will see that the top of the scanner is quite simple. Four mesh points on each edge, to give it a bit of a bevel, and two in the center for the glass.

 Step 3:
 
Now I do almost the same thing with the lid, except I make the center white, and give it a bit of a bevel to make it seem like it is coming out of the bottom of the lid.

 
Step 4:

By editing the bottom 2 meshes on the scanner I give it a bottom, making sure the top edge color of both the meshes match the edge color of the top piece. This helps it all look like one. I also give the scanner glass a little gloss.
To top it all off, using our much used texture techniques I give all the exposed grey areas a brush texture.

 Step 5:

Now we move on to the camera. This is done in almost the same way. Each mesh rectangle is given 3 points along the edges and by adding black and white I give it a bit of a rounded edge, making all 3 pieces look like one block of metal.

Step 6:

Now I use 2 more mesh rectangles to make the eye piece and several circles using regular radial gradients fills to make the lens. To polish them off I give them both a bit of gloss.

Step 7:

To make this match our existing style of metal in this pack, I go in with the mesh tool and give the camera a few panels. I also add a button to the top of the camera with one new mesh rectangle.

 

 Step 8:

Now to give us that "Icon-A-Day" look we need to make sure we have the reflections.
Using our "Reflection Techniques" we go in and add a reflection of the camera and the lid to the scanner glass.

 

 Finished Icon Image.

Today we used a lot of mesh fills; make sure you check out the Mesh Fill Tutorials 101 & 201 to get a better idea of how the mesh fill works.

 




Click here to download the finished icon.
 

Tomorrow we will push on through the folders. We only have a few left, then we will get down to polishing up the pack for the final release in about 20 or 30 icons.

Don't worry, I have not forgotten the Recycler icons, but I am saving them for last. So sit tight and enjoy the ride.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

7 Reply 160 Referrals

Longhorn and icons

Is it over for iconists?

Friday, April 15, 2005 by Thomas Thomassen | Discussion: Icons

In news.com's article An early peek at Longhorn, there was an interesting bit of information:
But while the OS bears plenty of similarities to Tiger, Allchin stressed that Microsoft has broken new ground in Longhorn. For example, document icons are no longer a hint of the type of file, but rather a small picture of the file itself. The icon for a Word document, for example, is a tiny iteration of the first page of the file. Folders, too, show glimpses of what's inside. Such images can be rather small, but they offer a visual cue that aids in the searching process, Allchin said.


Now, I wonder how that will affect the iconists out there. I assume that icons we are used to is still usable depending how high ou set the graphics setting, but what will this new icon system work? Do you think that we will be able to customize how the preview is rendered?
32 Reply 16 Referrals

Icon-A-Day, Icon # 73, Log Off

The Last of the "Start" Symbols

Wednesday, March 16, 2005 by mormegil | Discussion: Icons

Icon 73 (Log Off)

Once more my poor Icon-A-Day project is late, for this I firmly blame Charter Internet. Luckily I still have my work Internet.

Today we are finishing up the last of the "Start" symbols, and taking care of "Log Off". This one is once more almost identical with the other start symbols in the way it is made.

One thing to note with the last five icons, is that they are all almost exactly the same in construction, yet all have their own style. This is a good example of how a good technique can be used on different base graphics over and over and still look good. In theory you could do an entire icon pack with just this one tutorial, and have something pretty cool, if not perfect.
 
Step 1:

Once again we start with our glass background box and change the colors to blue.

 Step 2:

Now I make a little key with some rectangles and squares welded together.

 Step 3:

Now we give the key some perspective, tweeting it until it looks natural.

 
Step 4:

Now I use the Contour tool to give the key a "poor mans bevel"

Step 5:

Now with the Contour tool I give the key an inner contour to give it the appearance of depth.
We also give the it a nice bit of  gloss.

 Step 6:

Now we give the key a standard Corel Drop Shadow.

Step 7:

Last we give the new icon a standard Reflection.


Finished Icon Design.


Click here to download the finished icon.

Tomorrow, assuming I have Internet as I have been promised, we will try and get back to the folder icons and start wrapping up that section of the Icon Package.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

2 Reply 33 Referrals

Icon-A-Day, Icon # 72, Shutdown

Life sucks without internet access.

Monday, March 14, 2005 by mormegil | Discussion: Icons

Icon 72 (Shutdown)

Tonight we will do almost exactly the same as yesterday, but with different graphics. This is a good example of how you can re-use the same techniques and get good results with very simple changes.
 
Step 1:

First things first, we copy the Suspend icon and delete the moon. I also change the background to Black and Red.

 Step 2:

Once again I use a few circles and a rectangle to create a "Power" symbol.

 Step 3:

Now just like yesterday we use the Perspective tool, give our Power Symbol a bit of perspective. I also use the Contour tool to give the moon a "poor mans bevel"

 
Step 4:

Now with the Contour tool I give the Power symbol  an inner contour to give it the appearance of depth.
We also give the moon a nice bit of  gloss.

 Step 5:

Now we give the symbol, including its bevel, a standard drop shadow, dropping it pretty much straight out to the left.

 Step 6:

As it seems to almost always be our last step, we give the new icon a new Reflection.


Finished Icon Design.




Click here to download the finished icon.

Tomorrow we will wrap up this little set of "Start" icons with the Log Off icon, check back in then.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

6 Reply 22 Referrals

Icon-A-Day, Icon # 71, Suspend

One more quick one.

Saturday, March 12, 2005 by mormegil | Discussion: Icons

Icon 71 (Suspend)

Today's icon will follow almost exactly the same steps as yesterdays. This is a good example of how to re-use techniques. So with no further ado, lets make the "Suspend" icon.
 
Step 1:

First things first, we copy the Run icon from yesterday and remove the text, and change the background to a Golden Yellow blend.

 Step 2:

Now using two circles and the trim tool I make myself a nice crescent moon shape.

 Step 3:

Now we use the Perspective tool, give our half moon some dimension. I also use the Contour tool to give the moon a "poor mans bevel"

 
Step 4:

Now we give the Moon a standard Corel drop shadow.

 Step 5:

Now with the contour tool I give the Moon a inner contour to the appearance of depth.

Step 6:

Now we give the moon a nice bit of  gloss.


Step 7:

Once more the last step is to give the new icon a new Reflection.
Finished Icon Design.





Click here to download the finished icon.

This brings us to the last ever icon to be done in my crap-taculer tiny 1 bedroom apartment. Tomorrow we will push on further through the "Start icons" From my shiny brand new house. See you all then.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

8 Reply 17 Referrals
First Previous Page 2 of 7 Next Last

Articles Filters

Category:
View:
Search:
Apply

Latest Articles

Older >>

Home | About | Privacy | Upload Guidelines | Terms of Service | Help
Copyright © Stardock Corporation. All Rights Reserved.


web-wc01