![]() ![]() You can scale or throw away decoration you must keep information legible. The important thing is to differentiate what is information and what is decoration. Experience will teach you as you go.ĭifferent sizes will need different proportions and appropriate scaling amounts. The amount that you scale each graphic will vary (the Skype icon works better at 75% than 80%), so you'll have to experiment a bit. The circles define the boundaries, so they are all scaled 50%. This reduced icon still conveys the same information clearly, but is the size you need and will be consistent with the rest of the set when you have scaled them. Nudge the "g+" layers to center them in the circle. Select both the "g" shape layer and the "+" text layer, and choose Edit > Transform > Scale as before, but this time, enter 80 in the W or H field and press Enter/Return. Enter 50 in the W or H field and press Enter/Return.Īt this point, your circle is 24 px in diameter, but the "g" and the "+" are too large.Be sure that the center point in the Transform control proxy is selected, and toggle the link between the W and H fields so your scaling is proportional. ![]() Select the circle and choose Edit > Transform > Scale. Here's how to scale this set from 48 px to 24 px, working from the PSD: The graphical elements in the circles carry the vital information, so you must treat them more carefully. In this case, the circle shapes don't carry any information, but in several cases their colors do, so you can't eliminate them. These must remain legible, the rest is disposable. Its purpose is to communicate easily-recognized information at any given size, so your first step, before you start scaling anything, is to identify what parts of the icon carry the information. An icon is a special kind of infographic. This particular set is composed of shapes and text, so resizing is not going to impact quality, but you can't just downsize these icons. Sharpening may also increase or decrease the quality. I expect lanczos working better, but maybe not for every icon. Resize by dividing by multiples of two: from 128×128, you can get 32×32, but creating a 41×41 icon may give weird results, To achieve better quality, you may still want to: Can you tell me what you see on the right side? If quality doesn't matter, you just resize the image. At the right, I just scaled down the original image. Considering the icon set you link to in your question, you obviously don't want to keep a circle around the icon for 24×24 icons: remove the circle, and keep only the content.Īt the left, I removed the circle. This means that if UX and design quality matters, you can't just scale down an icon and expect it to be as clear as the original one. Those rules are actually followed in Windows XP icons. ![]() On a smaller icon, there is no enough place to draw a pencil in a way it does not cover the notepad, and is recognized as a pencil at the same time. For example a large icon of a notepad can feature a notepad with a pencil. The number of objects must decrease when the size decreases. The object may be rotated to be in perspective when the icon is large. Other factors than the object detail level must be taken in account:Ī shadow, for example, is nice to have on a 64×64 icon, but the same shadow will look stupid on a 16×16 favicon. Actually looks like PF-19686592 calculator for me. The icon on the right, the resized version of the large one, is completely meaningless: it might be a PDA, or a silver box, or anything else. The icon on the left, used by Windows 7, is pretty clear, despite the low resolution. Let's see what happens when we go to an even smaller scale: On the right, I believe it's a strangely shaped PDA with a large screen, two buttons at the bottom of the screen and one large button at the very bottom. Now, compare, side by side, the downscaled icon on the left, and the icon I resized in Photoshop from the larger one: I take the graphically excellent keyboard icon used in Windows 7: For a 16×16 icon, four keys is enough: either you draw four and users understand that those are keys, or you draw more and everything becomes flat. For example, a large icon of a keyboard may contain every key of the keyboard. Those details, which are nice on a 128×128 icon, would be disturbing on a 32×32 icon instead of helping visually identify the icon, they will do the opposite. The answer applies both to vector and to rasterized icons. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |