Icon Lover

There are some neat ways you can improvise on desktop shortcuts, and one way is to make them invisible. Invisible desktop shortcuts will operate in the same way as always; you just won’t see them.

We’ll take a Firefox shortcut as an example to explain how this works. By the end of this article, you should be able to perform this simple trick yourself.

First, right click on the shortcut and go to its properties. There you can change the icon to transparent. Sometimes, the transparent version of the icon is not included in the Shell32.dll library under System32 files, in which case you need to go on the internet and search for “anyfile.ico,” where “anyfile,” obviously, is the name of the icon you’re looking for, and you should find it very easily.

Once you choose your icon visibility, press “Apply.”

Next, you need to rename the shortcut. You’ll need non-breaking spaces (you can’t use normal ones), which you can get by turning on Num Lock, holding down the Alt key and pressing “0160.” Press “Enter” when you finish naming it.

Any version of Windows before XP also needs to have the arrow removed from the icon, which is only partly hidden at this point. Go to the registry editor by following the pathway “Start>Run>regedit.exe” and locate HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Inkfile. Delete the IsShortcut parameter and restart your computer.

Now you should have your invisible icons. They have the same functions, but they clear up your desktop in case you wanted to actually see the entire picture you set as your background. It’s something fun, interesting and useful, but it could also be a security measure if you want to hide certain directories from other users. There are many ways you could benefit, and it’s a pretty simple task to perform.

Done!

How to Draw Aqua Buttons for MacOS X

Most people with artistic talents have a very narrow mindset when it comes to how they can use them. For example, I’m sure you’ve probably never thought about who draws the Aqua buttons for Apple. To start with, all you need is talent, and then you need some technical skills to go along with it. Before you ever contact Apple Computers about helping to develop the MacOS X interface or doing any other type of design for them, though, you need to develop your skills into something marketable.

From there, if you get the job, all you have to do is sit down and do what you love doing: Draw. That’s about all there is to it, and pretty soon you could be the brains behind buttons like .

“How”ever, hopefully you won’t need to copy someone else’s design to find your niche. It takes individual creativity and imagination to survive in the design world. Many people will give you advice on drawing Aqua buttons that basically amount to copying others’ work. If you don’t have it in you, you shouldn’t be in design. There are plenty of ideas to try out that haven’t already been used, specifically the ones between your own ears.

All it takes is a little creativity, technical skill and natural talent, and you could be creating the Aqua buttons for Apple Computers. There’s nothing simple about it, but for those who qualify it’s a great outlet for their talent.

To some, the icons for Windows XP and Windows Vista are just different, but, to others, they cleverly employ a useful design technique. Semi-transparency is used on the graphics, which smoothes the edges and helps them blend in better with their surroundings.

My point is that you can use this technique yourself when you’re designing icons. Anyone can smooth edges. All that’s needed are a few basic tools.

The good news is that you don’t need to put out all the time and expense necessary to purchase and learn Adobe Photoshop or Corel Draw. They serve their purposes, but they’re not necessary for small art designers. They actually won’t even let you assign more than one format or resolution to the different components of your icon. All the features they have are meant to improve photographs; the more pixels the better. You need something highly specialized that lets you get down to the basic elements of an image. You’re concerned about every pixel in your icon images, because sometimes an icon is only 16 pixels-square.

Instead of photo editing software that will allow you to do all types of neat things on large images, you should be looking at icon editors. They were created specifically for the detailed work of designing icons where you don’t need to deal with the big picture as much as the little details. There are all kinds. You probably already own simple programs that would work, like Paint, but, in order to keep tabs on a large collection of icons or do various manipulations, you’ll need something more specialized, particularly if you draw icons from scratch.

The more complex icon editors are a far cry from the simplicity of the Paint program, even if they aren’t as fancy as Adobe Photoshop and Corel Draw. They are marketed to both the amateur and the professional. With them, you can make your icons look modern and slick without excessive costs and training time. All kinds of file types are supported- ICO, ICPR, BMP, JPEG, CUR, PNG, GIF, RC, XPM, XBM, WBMP and Adobe Photoshop PSD. You also have the option of doing transparencies and semi-transparencies with alpha channels, and gradients. However you choose to do your design- from scratch or an existing image, icon editors make the job more convenient for you.

Icons have obviously come a long way in recent years, and you can keep up without having to worry about going broke or wasting time. Getting an icon editor is all it takes to make the very best of the icons out there.

If you have a digital image, whether taken with a digital camera, scanned from a hard copy or obtained some other way, there are often several adjustments that need to be made before you can put it on the internet in the form of email or a website. If you own Photoshop but don’t know how to use it, you can still edit your images easily without wasting a lot of time.

1. Cropping

Sometimes, you might have a picture and you wish you could just cut out the part you want and leave the rest. Open Photoshop, go to the left toolbar and look for “Crop.” Put in the size you want near the top edge of the panel. 600×800 is a standard web size. Now click on the cropping tool and click and drag to select the part of the picture you want. Double click to finish.

2. Auto Contrast, Auto Color, Auto Levels

Instead of spending hours trying to guess at what your image needs, just go to “Image Adjustment” on the main menu. There you’ll find “Auto Contrast,” “Auto Color” and “Auto Levels.” Don’t just randomly press them. Do them one at a time and decide if you’ve made an improvement. If you don’t like what you see, you can always press ctrl and z to undo. Experiment until you have what you want.

3. Sharpness

You can set parameters for image sharpness easily with the “Filter>Sharpen>Unsharp Mask”. The preview box will show you what’s going on and you don’t have to apply your adjustments until you’ve gotten the picture how you want it.

“Filter>Sharpen>Sharpen” or “Sharpen Edges” will also improve your image, but they do it automatically. Whatever works best for you is what you should go with.

4. Black and White

Converting a color image to black and white is very simple. All you have to do is go to the main menu and select “Image>Adjustments>Desaturate.” If your image looks too pale, just go to “Image>Adjustments>Brightness/Contrast” and watch the preview as you make changes. Find your balance and click “OK.”

5. Saving for the Web

Photoshop actually has an option just for this. Go to “File>Save for Web.” Select a format, which in this case would be “jpeg,” which creates small files with the least loss in definition, and choose a quality to save it with. Set a size on the lower left and press “Save.”

Always save a copy and keep the original.

One important thing to note about saving pictures in different formats is that you should always retain the original. Number one, you may want it for something else, and number two because every time you save a picture to a different format it loses quality, so you always want to start with the original.

Now you’re ready to publish your pictures on the web. There’s really nothing to it.

We’ve talked about interface icon sets’ styles and sizes, so now we’re ready to create them.

For the most part, this article will go over the most basic concepts involved in computer drawing. All icon stamps have been systemized in outline and meaning to the best of my abilities. This is a good resource for novice artists and web designers alike.

There are two basic situations in which an icon designer finds his/herself: A picture or object is given from which the icon will derive or a description in words. Don’t be daunted by any seeming lack of information. With the proper training, you’ll be able to jump right into any project with complete confidence.

1. Visualize the Image

Although it may seem like the logical thing to do to just start drawing the icon as soon as you have a rough idea of what it should look like, it’s actually better to make sure you have complete details before you ever draw a single line. There are some serious misconceptions you can end up with when you get ahead of the project. Just take the simple case of a phone. You wouldn’t draw the same phone when marketing to businessman/woman as you would for a housewife. One would identify with a cell phone while the other would more readily receive a household phone. How well your audience relates to your icon is very important, so always get as many details as possible before you start a project.

It’s not always as easy as that, though. One other important point to consider would be the website style. On an antique shop’s page, you wouldn’t use a cell phone, not because your audience wouldn’t relate as much as because it’s just plain incongruous. You might consider using some other icon or none at all in this case, since there aren’t many phone designs that really look antique without being ineffective.

Site style and user preferences should be what guide your icon’s design, and not so much your own imagination.

2. Compose the Icon

Once you’re ready to move beyond the look of the icon, it’s time to shut off your computer for a while. Photoshop, Illustrator, and CorelDraw are not needed at this point. Believe it or not, a good, old-fashioned pencil and paper still have their applications in graphic design.

At this junction, you just want to relax and let your hands take over. Keep drawing until you have the variation you want, keeping the website’s style in the forefront of your mind.

There are true artists and those who really don’t know why they’re in icon design, but both hit a brick wall every now and again. It’s not a problem with the individual as much as with people in general. When it comes time to render one’s surroundings, the details just don’t come pouring out, except with those few hopelessly observant people. What I mean is that when you think of a street you probably just see a general paved road. Chances are you don’t think of its character marks- fissures and cracks, uneven spots and slightly crooked lines. The left hemisphere is responsible for observation, and it will replace specifics with the general.

It is only through acute observation that you can translate your left-brained interpretation of your surroundings into something more individualized and artistic, something right-brained, the right hemisphere being where your subconscious resides, your inner psyche. One of the things the right hemisphere controls is speech, and you know you don’t think about grammar and mechanics when you’re talking. Most of the time, though, graphic designers of all types get caught up in the “proper technique” and such, and they can’t seem to make a graphic work. Look at it this way: A graphic is just a representation of reality. A circle and some lines summarizes the way a lot of people draw humans, but that’s not how they really appear. It’s just one interpretation.

Approach all of your drawing as an interpretation, while also keeping in mind some points specific to icon design.

3. Determine the Details

Speed drawing can help you figure out what the most important elements of an object are. Since icons are so small, you don’t have space to try to be a flowery artist; you want to be an efficient one. Consider the example at the right of the human form reduced to a 16×16 pixel and 100×100 pixel spaces, respectively.

The first man is 7×37 pixels while his larger replication is twice that size. Icons can get even smaller than these, but they serve the purpose of an example. You see that the man is wearing a suit, and therefore he’s probably a businessman. The only facial feature is a one-pixel eye.

As you draw icons, you need to learn to recognize the basic details that identify an object.

4. Be Minimalistic

Lest you think that small scale is all it takes to make a good icon, examine the reduced photograph on the right. Believe it or not, this man has the same dimensions as our little businessman. The only difference is we had complete control over what went into the businessman while this photograph is everything there was for the camera to see. This inevitably means many unnecessary details, and that’s how come, although our graphic was very simple, it was clear, while this reduced photo is grainy and ineffective as a communicational device.

After you recognize the basic elements as we discussed in the former section, you can then draw using a minimalist technique. Good icon designers effectively eliminate unnecessary details and thereby produce communicational aids that work well. It is possible to have balanced, small images that are drawn according to these guidelines, like the phone pictured on the right.

5. How to Show Action

You can expect to have to deal with motion at some point in your icon designing career. Animation might seem like a good option, but I only advise it for onMouseOver JavaScript, and even then sparingly.

The dynamics of motion are well-explained in the “Book of Recreational Physics.” I will give you the basics below.

First of all, let the user complete the graphical illusion. In the example graphic, we have two sets of parallel lines. The first one is vertical and the other horizontal. Curiously enough, the horizontal lines look more dynamic, even though it is exactly the same as the first one, except for the fact that it’s rotated 90 degrees. That is because all action, all forward motion, occurs in the horizontal plane. Vertical lines are subconsciously grouped with rest. Just to see this concept in action, try applying motion blurs in Photoshop. I guarantee that the horizontal motion blur will be the one that makes the object appear to move.

Any icon that has principally horizontal components will look more like it’s active.

“Traditional Animation” by Walter Croft talks about another aspect of creating motion in icon or any other type of graphics. The idea is that there is something called “notice,” where every action is preceded by another action. If you want your icon to appear active, you must capture a moment where notice can be observed and the aftermath of it construed. For example, someone about to throw a ball draws their hand back, and one preparing to jump first squats. The user knows this as well as you do, so it is very useful in icon design.

There are other aspects of dynamics that go beyond the action of living things. Suppose you have a pen writing on paper, or a door swinging in on its hinge. Stretching and contraction can effectively render your objects in a realistic light. The principle that guides stretching and contraction is that objects retain their volume as they are manipulated. Therefore, in the case of a door, when a force acts near the handle, you can decrease the volume around this area but the volume must increase in some other area to compensate for this. If the volume leaves from the center, then it goes to the edges, and so you have a thick middle and think edges when your door is in motion.

The dynamics of motion are good guides, as long as you don’t take them too far, in which case your object will just look distorted.

There’s really not much more I can say to coach your drawing. Feel it out and scan the graphic when you finish drawing it.

6. Transfer the Image

Once you have the image on your graphics editor (any raster graphics editor), it’s time to create the graphics file that will be your icon.

The main thing to remember is that you should still be observing the rule of depicting only a minimum in details.

Secondly, keep your image proportionate. Every change in scale should mean that all portions of your object are changing at the same rate. If you want half scale, every dimension should decrease by half.

The last rule is to leave all the effects- dithering, shadows, and filling- until after you have straightened out the details. Contours should be your start, then you can edit them as necessary and mark up the primary details.