16 by 16 pixels. [tutorial]
- Started
- Last post
- 27 Responses
- usvthem
Hello,
I don't know if any of you work on software GUI[s]...I do...one of the hardest things to make is a 16x16 icon that looks nice and clear. I have developed a nice technique if anyone is interested in learning it... Here is a image showing the final result
of a 16x16px[s] "Action" Icon I made for a client[s] software application.[Final Result]
http://www.meversusthem.com/publ…The application works in all versions of Windows so i didn't [not that i would even consider it, because i consider it a waste of my time] make a XP style icon. I decided to use the Windows 2000 White Page Icon since it's been used in all prev versions of Windows, I then made a pixel exclamation mark. I couldn't just leave it at that since the application also works on Windows XP I had to give it an updated look that would compliment both Windows 2000 and Windows XP.
we have developed a Gradient Generator that works differently and in my opinion better then photoshop[s] atleast for this task, it was specificly designed for this.
Below is a screenshot of the Gradient Generator [if anyone is interested in it e-mail me at
http://www.meversusthem.com/publ…What the Gradient Generator allows you to do is set a "compressed" gradient here is a image showing of a reference grayscale with different set increment[s]
using the Gradient Generator you can set an angle, increment[s] width and height 2 colors also Value vs. %
here is an example at a 145 degree angle of different increments set
http://www.meversusthem.com/publ…For each color you set a gradient using 1 specific increment now u can change it up but i decided to keep the same increment and that 5 then you put the icon over each gradient template and cut and paste that color and put the layers together
this is the final result using the layers
http://www.meversusthem.com/publ…if you clear your cache and refresh the link and look at the fav icon you will see the red page result in 16x16 the page is actually 13x16
hope you like the technique took me some time to think of a neat way of doing this before offering such a service to a client.
in a few weeks i will post the UI i made for a software application.
- bomy_dick0
very interesting. ty
- usvthem0
np.
- Crouwel0
yeah, nice. bit of a long story though. when's there a mac realease?
- usvthem0
you mean of the gradient generator? we don't code for mac :( atleast not yet, ill look into porting it. But now its only for windows made in Delphi.
- usvthem0
hey Janne sorry about the length.
- scarabin0
i'm not sure i understand. isn't photoshop a "gradient generator"?
- Crouwel0
no worries about the length there, usvs, i still enjoyed it very much.
you know what they say, quality over ...
;P
- usvthem0
scarabin
yeah photoshop does have a gradient generator, but it sucks.it works diff if you check the increments + value vs % if you even know what that means....also if u were to check each pixel you would see that it goes by how many increments you set DO that in photoshop! GOOD LUCK
go from bottom top top left gradient goes by 5 increments depending on value vs %
- usvthem0
thanks janne :) glad people like it.
the quality is alot better then even mac os x 16x16 icons, atleast in my opinion, this way you still have the sharpness + gradient but the gradient is alot more controlled if you get what the generator does.
- usvthem0
if you have a pc you can download the gradient generator here
http://www.meversusthem.com/publ…
zip and rar format
- fusionpixel0
what about AXIALIS?
- usvthem0
what about it? did you read this thread?
- fusionpixel0
nvm
- bomy_dick0
so sorry if i missed something but can we try this ?
thank you
- usvthem0
http://www.meversusthem.com/publ…
if you have a pc u can download the gradient generator here
http://www.meversusthem.com/publ…
- bomy_dick0
coolissimo
merci !
- usvthem0
no problem.
- usvthem0
wow this thread might have gotten me another icon job :) well possiably.
- subversve0
i do a lot of icons at work, and 16x16 definitely poses a challenge sometimes. did you ever try using macromedia fireworks for creating icons? i started using it a couple of years ago and i've pretty much stopped using photoshop since.
- usvthem0
I use photoshop and illustrator and then microangelo for ico files but toolbars require bmp or png Vista icons will require even more layers for diff backgrounds...
iv developed my own methodes for 16x16 over the years, even when it comes to illustrator and im doing 16x16 i do it in a 16x16 grid some people just resize a full scale icon to 16x16 and thats why alot of them look like shit.