Omnimaga

Calculator Community => Casio Calculators => Topic started by: JosJuice on May 05, 2011, 12:33:40 pm

Title: Prizm Icon Design Guidelines
Post by: JosJuice on May 05, 2011, 12:33:40 pm
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:
(https://img.ourl.ca/prizmicons.png)

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:

(https://img.ourl.ca/prizmempty.png)

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:

(https://img.ourl.ca/prizmguidelines.png)

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.
Title: Re: Icon Design Guidelines
Post by: AngelFish on May 05, 2011, 12:48:57 pm
Great work. This will be very useful. Stickied
Title: Re: Icon Design Guidelines
Post by: Ashbad on May 05, 2011, 01:17:41 pm
Hmm, this be very helpful.

++
Title: Re: Icon Design Guidelines
Post by: z80man on May 05, 2011, 10:12:53 pm
So far the best example of a program following these guidelines has been Merthsoft's minesweeper. Though the background for the selected sprite is different, it is barely noticeable. Perhaps the mkeg3a program could automatically add the the selected sprite in order to simply icon design.
Title: Re: Prizm Icon Design Guidelines
Post by: fxdev on June 22, 2011, 05:41:35 pm
I have attached a small package.

It contains five Windows bitmaps:
- default add-in icons (selected/unselected)
- default fkey icons (three different types)
Title: Re: Prizm Icon Design Guidelines
Post by: DJ Omnimaga on June 22, 2011, 05:57:38 pm
Cool. By the way is the gradient absolutely needed when making custom icons?
Title: Re: Prizm Icon Design Guidelines
Post by: fxdev on June 22, 2011, 06:06:21 pm
You can use whatever icons you want - with or without gradient.
Title: Re: Prizm Icon Design Guidelines
Post by: DJ Omnimaga on June 22, 2011, 06:27:53 pm
Ok good to hear. I was worried since the gradient might have caused certain custom icons to look a bit weird.
/me homes PRIZM dev resumes when Summer starts for real.
Title: Re: Prizm Icon Design Guidelines
Post by: Ashbad on June 22, 2011, 07:51:26 pm
I'm doing Prizm Dev D: like an hour a day too.  However, there's only like 2-3 active Prizm coders here, and even on cemetech many people are stopping for now.  It's sad, but a good project will jumpstart things I'm sure.