Author Topic: Prizm Icon Design Guidelines  (Read 5188 times)

0 Members and 1 Guest are viewing this topic.

Offline JosJuice

  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1344
  • Rating: +66/-14
    • View Profile
Prizm Icon Design Guidelines
« 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:


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.
« Last Edit: August 03, 2017, 03:25:32 pm by JosJuice »

Offline AngelFish

  • Is this my custom title?
  • Administrator
  • LV12 Extreme Poster (Next: 5000)
  • ************
  • Posts: 3242
  • Rating: +270/-27
  • I'm a Fishbot
    • View Profile
Re: Icon Design Guidelines
« Reply #1 on: May 05, 2011, 12:48:57 pm »
Great work. This will be very useful. Stickied
∂²Ψ    -(2m(V(x)-E)Ψ
---  = -------------
∂x²        ℏ²Ψ

Ashbad

  • Guest
Re: Icon Design Guidelines
« Reply #2 on: May 05, 2011, 01:17:41 pm »
Hmm, this be very helpful.

++

Offline z80man

  • Casio Traitor
  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 977
  • Rating: +85/-3
    • View Profile
Re: Icon Design Guidelines
« Reply #3 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.

List of stuff I need to do before September:
1. Finish the Emulator of the Casio Prizm (in active development)
2. Finish the the SH3 asm IDE/assembler/linker program (in active development)
3. Create a partial Java virtual machine  for the Prizm (not started)
4. Create Axe for the Prizm with an Axe legacy mode (in planning phase)
5. Develop a large set of C and asm libraries for the Prizm (some progress)
6. Create an emulator of the 83+ for the Prizm (not started)
7. Create a well polished game that showcases the ability of the Casio Prizm (not started)

Offline fxdev

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 177
  • Rating: +34/-6
    • View Profile
Re: Prizm Icon Design Guidelines
« Reply #4 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)
« Last Edit: October 01, 2012, 02:08:32 pm by cfxm »

Offline DJ Omnimaga

  • Former TI programmer
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55847
  • Rating: +3151/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • DJ Omnimaga Music
Re: Prizm Icon Design Guidelines
« Reply #5 on: June 22, 2011, 05:57:38 pm »
Cool. By the way is the gradient absolutely needed when making custom icons?
In case you are wondering where I went, I left Omni back in 2015 to form CodeWalrus due to various reasons explained back then, but I stopped calc dev in 2016 and am now mostly active on the CW Discord server at https://discord.gg/cuZcfcF



Official Website |T-Shirt store | Reverbnation | Facebook | Youtube | Twitter | Spotify

Offline fxdev

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 177
  • Rating: +34/-6
    • View Profile
Re: Prizm Icon Design Guidelines
« Reply #6 on: June 22, 2011, 06:06:21 pm »
You can use whatever icons you want - with or without gradient.
« Last Edit: June 23, 2011, 11:13:21 am by cfxm »

Offline DJ Omnimaga

  • Former TI programmer
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55847
  • Rating: +3151/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • DJ Omnimaga Music
Re: Prizm Icon Design Guidelines
« Reply #7 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.
* DJ_O homes PRIZM dev resumes when Summer starts for real.
In case you are wondering where I went, I left Omni back in 2015 to form CodeWalrus due to various reasons explained back then, but I stopped calc dev in 2016 and am now mostly active on the CW Discord server at https://discord.gg/cuZcfcF



Official Website |T-Shirt store | Reverbnation | Facebook | Youtube | Twitter | Spotify

Ashbad

  • Guest
Re: Prizm Icon Design Guidelines
« Reply #8 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.