First, I would like to thank Tari for his icon creation and extraction tools which helped me a lot when creating this topic, and everyone else involved in Prizm hacking for allowing us all to be able to do what we can do with the Prizm right now.

Icons are a part of Prizm add-ins that are usually considered unimportant. They don't affect the add-in itself, but it's still a good idea to create a nice set of icons for any program. Users will see it even when they aren't running the program, and if the Main Menu is full of icons that don't adhere to a few guidelines, navigating the menu can be confusing.

Style
The object that's the main focus of the icon shouldn't take up all of the 92x64 pixels that it has access to. It should generally be a bit smaller since the background and other elements also need a bit of space. The official icons from Casio are somewhat colorful, a bit 3D-looking, have shadows and are slightly translucent. You can follow the style of these if you want to, or create your own kind of icon. 2D sprites usually work fine if they aren't too similar to the backgrounds.

Example icons:


Selected/Unselected
In all add-ins, two icons must be provided - the selected icon, and the unselected icon. The two icons should show the same objects with different backgrounds - not objects that are completely different from each other or the same objects with minor variations. There is one exception, though. When placing text in the icon (this should only be done in special cases, not for writing the name of the add-in!), the text in the unselected icon should be white with a black outline and the text in the selected icon should be black with a white outline. Run-Matrix and Equation are examples of this. The unselected icon needs to have a pure black background, and the selected icon needs to have this background:



If no custom icon has been made for your program, the background with nothing on top of it should be used for the selected icon. Never make the selected icon pure black!

Areas drawn by the OS
The Prizm OS is a bit unusual when it comes to icons, as it draws on top of certain areas. Those areas are marked in red here:



The square on the top right area of the icon will always be completely unseen, and anything important shouldn't be placed there. However, hiding defects or other odd things there is not recommended, since some users might use something other than the OS to view the icons. The larger area on the bottom is where the name of the add-in will be placed. The main focus of the icon shouldn't be under it, but the area won't be completely covered, so things that aren't very important can be placed there. For example, a small part of the ruler in the icons of Conversion and Geometry is placed there, and an unimportant part of one of the images in the Picture Plot icon is also placed there. The name of the add-in should never be included in the icon since the OS takes care of including it.
This is very detailed, good work. If I new how to sticky a thread, I would do it for this. This is handy for all prizm developers. Thanks!
merthsoft wrote:
This is very detailed, good work. If I new how to sticky a thread, I would do it for this. This is handy for all prizm developers. Thanks!
This is very handy! Thread renamed to "Icon Design Guidelines" and stickied. One difficulty that I have had in making icons for my programs thus far is that I use MSPaint to create the 8-bit BMPs, and it absolutely loves to wreck the color palette. I suppose if I made my icon's main feature have fewer colors that more would be left over for making the background. JosJuice, do you happen to know how many colors are used to make the selected background?
KermMartian wrote:
merthsoft wrote:
This is very detailed, good work. If I new how to sticky a thread, I would do it for this. This is handy for all prizm developers. Thanks!
This is very handy! Thread renamed to "Icon Design Guidelines" and stickied. One difficulty that I have had in making icons for my programs thus far is that I use MSPaint to create the 8-bit BMPs, and it absolutely loves to wreck the color palette. I suppose if I made my icon's main feature have fewer colors that more would be left over for making the background. JosJuice, do you happen to know how many colors are used to make the selected background?
The selected background has 26 colors, including common colors such as pure black and white. Why are you saving an 8-bit BMP? Prizm icons support up to 16...
I'm not sure if reducing the amount of colors will help. For example, MS Paint always uses the same palette for all GIF images no matter what colors you need.
I was under the impression it was choosing an optimized palette that minimized the final icon's Euclidean distance in 6144-space from my original icon, but I could be entirely overestimating its capabilities. Someone had told me that you needed 256-color icons for the Prizm, since that's what Simon's tool seemed to use (?), so that's what I have been using.
Can we get a cross post on omnimaga too? Thanks for the info and the icon.
Qwerty.55 wrote:
Can we get a cross post on omnimaga too? Thanks for the info and the icon.
Right, I forgot about that. I'll do it now.
KermMartian wrote:
Someone had told me that you needed 256-color icons for the Prizm, since that's what Simon's tool seemed to use (?), so that's what I have been using.

5-6-5 16bpp is the format the Prizm uses, so mkg3a takes 24bpp bitmaps (never mind that was the easiest variant to handle). I've used Paint.NET to make test icons, and you can indeed tell MS Paint to save 24-bit bitmap files.
That's superb; I will absolutely be doing so, and I'll be using JosJuice's templates for all my current and future icons. Nice job, guys!

Edit: Critiques of these two icons I just made for one of the projects near the very top of my Prizm queue?

Very nice. The icon seems a bit small compared to the background though.
Qwerty.55 wrote:
Very nice. The icon seems a bit small compared to the background though.
Indeed, I was following some of the guidelines in JosJuice's post to make room for the text at the bottom of the icon as per the reference icons' precedent. Does it look odd?
I think that's a good size. Sure, it looks a bit odd when viewing it without the text, but that's also true for the Casio icons, so it's nothing to worry about.
Thanks again for these templates! I changed the selected Obliterate icon to have the proper background.
KermMartian wrote:
That's superb; I will absolutely be doing so, and I'll be using JosJuice's templates for all my current and future icons. Nice job, guys!

Edit: Critiques of these two icons I just made for one of the projects near the very top of my Prizm queue?



That looks very nice, Kerm Smile 3D grapher, no?

I suggest that since the Prizm's version of the text below the icon is ugly, build without a specified name and make your own name to make it look even better Smile I personally think Casio's text ruins otherwise very nice designs.
Ashbad wrote:
I suggest that since the Prizm's version of the text below the icon is ugly, build without a specified name and make your own name to make it look even better Smile I personally think Casio's text ruins otherwise very nice designs.
I'm against that idea. Using our own kind of text would clash against the other icons. It becomes impossible to use localized names, and the OS might freak out if an add-in doesn't have a name.
I have an icon of my own to be checked out. This is what I'll be using for the shell I'm working on called Walnut. Walnut referring to a walnut shell.

[img]https://img.ourl.ca/rfg/selwalnut.bmp[/img] [img]https://img.ourl.ca/rfg/unwalnut.bmp[/img]

Edit: and the image won't come up ???
Hmm, an actual walnut Smile looks great! However, I would try to get rid of the faint black outline in the selected version, so it looks more natural.

EDIT: it won't com up because it's a bitmap, and here on cemetech .bmp or .dib files don't render Wink try changing it to .png.
The image needs to be a bit more to the upper-left. It isn't centered at all like it is now. And like Ashbad said, the black outline should be removed.

The image doesn't show up because you're using a bmp, which Cemetech blocks.
Can you tell us more about this Walnut, z80man? Perhaps it needs its own topic? And I am similarly against the name tricks that Ashbad mentioned; I think the name front that the Prizm OS uses is fine.
Walnut is an asm shell that I've been working on for a while now. The main gui is programmed in C while the majority of library calls are in super-optimized asm. The built in shell calls are called in a similar manner to how OS calls are made, but use a different address. I will also be working on a new C linker to support how Walnut runs programs. One main feature is that programs will not run from a static address. The base address will be passed to a program when it boots though. Right now I have a ton of homework so you should be seeing a new project thread within 2 weeks.
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 2
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement