Printable View
I have been asked to create some 16x16 icons which will appear in a dropdown menu for a custom software application (they will appear directly to the left of each menu option).
Aside from coming up with meaningful icon designs, the 16x16 format has been giving me headaches in producing something recognizable/distinct due to the size and antialiasing.
If anyone would like to share their tips, examples, special software, etc., it would be appreciated.
Regards, John
Hello John,
I like minimalistic, clean and sharp icons so by tips are probably biased into that direction:
1. Keep the amount of hues low, 2 or 3 should be enough.
2. Use even pixel shapes and snapping whenever possible. Although Xara renders subpixel stuff nicely, non-snapped lines will be blurry when exported. Even pixel shapes stay razor sharp.
3. Learn the zoom key shortcuts, you'll need to zoom out 100% more often than is fun.
4. Xara's bevels look good in that size, but shadows are pretty useless.
Please find attached some icons from one of my interface projects.
Good luck!
.jon
John for creating .ico files I use two programs:
Microangelo and Axialis Iconworkshop.
I create the graphics in Xara Xtreme. For the 16x16 pixel graphics I usually select a small portion of one of the larger icons. I try for an item that conveys the general idea for the program or menu item.
An ico file is not usually needed for menu item icons. A bmp file is usually used. The resource editor provided with the software development application allows for a colour to be selected to be the transparent area of the bitmap. Unless you already own Visual Studio, Delphi, or another software developent package it would be very expensive to buy simply to make icons.
Jon and Bill:
Thanks for both of your help!
Your examples helped ease the pain.
My colleage could only use BMP format so color options were very limited.
My 1st draft of the icon (10 icons) used blue, orange, black, and white.
The attached are some samples I came up with; they probably won't mean much to you guys, and although they are primative my collague felt they were recognizable symbols for menu optitons.
John they look very good. Clear and easily distinquished. As you say I don't know what they represent but I am sure a user of your collague's application will know.
Thanks for showing your results.
admiration for anyone who can work that small - they are distinctive and I think you've done a great job there
John has your collague mentioned needing the icons in a single file?
Some developers prefer having the 16x16 icons in a single line of images in a single file as seen in the toolbar strip in the attached. Other developers prefer individual files as seen in the operating system icons in the attached.
The developers that prefer the single file can select a region within the strip and display them in any order they desire.
Bill, I believe their application is limit in how the user can built a custom extension/menu and the supporting icons
Steve... Zoom in and the little can get really big.
The hard part is drawing the really small stuff inside the really large stuff and have it look like what it is supposed to.
yes John, sorry, I am not suggesting any one actually draws it that small :eek::D
but you need to be able to get the detail right so it translates [reduces and maintains clarity] - and 16x16 is small - so it is not straight forward I would have thought
currently at the size I draw by hand, the reduction factor to print is about 28% - eg 21inches => 6.25inches [600pix on screen] - I find that bad enough
Awe.... I see. My apologies. When I have to draw that small I constantly zoom in and out to make sure it looks like it should. If one had a large enough display, or maybe two displays then one could just use new view. When I try to use new view the windows are too small to really work anything.
Maybe I should get me one of them old persons displays... the really huge ones. Naw... then I would need 2.... one for at home and one for work. :)
two monitors - or large monitor and split screen, with new view is my preferred solution too, given the space.... :D
I used to draw 16 x 16 icons in Xara for a living, never knew about multiple views? How do they work, how do I enable them?
(Yeah, I'm the same guy who used Xara for 5+ years without ever knowing about being able to place multiple colors on a gradient either.)
window menu new view
no one knows everything [I think] :)
Thanks!
(Although, AAAAAARG, uses Mdi... Microsoft's worst invention after the Registry! And I can't see an option to tile vertically... and I'm on a widescreen monitor. This feature should definetly have been put inside a dockable palette!)
not sure there is a vertical option - if there is I would like to know too :)
you can of course open two instances of the same file [open same file twice at same time] however this is flying by seat of pants - but you can then split the screen vertically with windows - however you need to reorganise your toolbars to accomodate this as well or you 'loose' some of them
see this thread
http://www.talkgraphics.com/showthre...highlight=view
:)
Maybe a way to split windows would be great, for example when you reach the edge of the window an the resize arrow shows, pressing ctrl and dragging would split the screen up to where you drag it. Here is an example (don't mind the scroll bars)Quote:
Originally Posted by eobet
What's up with registry? Wouldn't window work without registry? Quite a jungle though...
Marc
coco,
I actually mind the scrollbars - that theme looks great, is it available somewhere?
I mentioned the scrollbar because I forgot to put them in the images :-)
Yes the theme is a windows port of Max Rudberg's Milk 2.0 theme for OS X
http://lennard.deviantart.com/art/Milk-2-0-5420575
You have to have the Uxtheme patcher to make install it.
Marc
I haven't read the *entire* thread, just throwing my 2 cents in:
- Open an new view (Window > New View) and move that new window aside. Watch that new window in 100% view (16 by 16 pixel). You can use the Windows Magnifier (or any other tool) to have a look what the 16x16 pixel icon looks like while you modify the Xara icon.
- Make sure when using lines, the line with is 1 pixel. I made a simple template. See the top layer named "Pixel Grid". When drawing lines, always draw exactly on the black or white grid, not inbetween(!), this will cause blur.
Vector pixelling is so much fun ;)
Nostow:
Great example and template. I am going to store it in my templates directory ... just in case.
Also like the way you "subdivided" your layers.
Question: Do you change your view quality/anti-aliasing setting when exporting?
John
Hey John, glad the template was somewhat useful to you.
I always leave the quality 100% when exporting and choose option "minimise visible anti-aliasing" in the export options.Quote:
Originally Posted by jclements
Thanks a lot! I've had my XP patched for some time but haven't found many serious themes.Quote:
Originally Posted by coco
cheers,
Jon