Prizm Icon Design Guidelines

JosJuice · Power User Joined: 17 Oct 2010 Posts: 306 Location: Sweden

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 your game/program. Users will see it even when they aren't playing your game/running your program, and if someone's add-in menu gets filled with icons that aren't user friendly, the add-in menu may become confusing. To make sure that your icons work well, there are a few things you should think about.

Style
The object that's the main focus of your 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 also needs a bit of space (and the things that the Prizm OS will place on it, which we'll get to later). The official icons from Casio are somewhat colorful, somewhat 3D-looking, and they have shadows are slightly translucent. You can follow the style of these if you want to, or create your own kind of icon! 2D sprites work well if they aren't too similar to the backgrounds. If you do something that's different from how things are usually done, please check that it looks good and that things work well.

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 object(s) with different backgrounds - not two objects that are completely different from each other or the same object(s) with minor variations. There is one exception, though. When placing text in the icon (this is not recommended!), 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 should have a pure black background, and the selected icon should have this background:

You can use a background that's similar to this one instead, but it's recommended that you use this one for consistency. If you're too lazy to create an actual icon, please use the background with nothing on top of it for the selected icon - don't make the selected icon pure black!

The Prizm OS
The Prizm OS is a bit quirky when it comes to icons. Our problem when creating icons (apart from the fact that we need two icons instead of one) is that some areas of it will be drawn on in the add-in menu. I have marked those areas in red here:

The square on the top right area of your icon will always be completely unseen, and you should never place anything that might be important there. However, it's recommended that you don't hide any flaws in there, since we don't know if the user is going to use something that isn't the Prizm OS to view the icons. The larger area on the bottom is where the name of your add-in will be placed. The main focus of your icon shouldn't be under it, but since it doesn't cover it completely, you can place things that aren't very important there. For example, a small part of the ruler in Conversion and Geometry is placed there, and an unimportant part of one of the images in the Picture Plot icon is also placed there. You should never place the name of your add-in in the icon since the OS does this for you.

merthsoft · File Archiver Joined: 09 May 2010 Posts: 2735

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!
_________________
Shaun

KermMartian · Posted: 05 May 2011 10:52:24 am Post subject:

JosJuice · Power User Joined: 17 Oct 2010 Posts: 306 Location: Sweden

KermMartian · Posted: 05 May 2011 11:00:26 am Post subject:

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.
_________________

Qwerty.55 · Expert Joined: 08 Dec 2010 Posts: 613

Can we get a cross post on omnimaga too? Thanks for the info and the icon.
_________________
∂²Ψ -(2m(V(x)-E)Ψ
----- = -------------
∂x² ℏ²Ψ

JosJuice · Power User Joined: 17 Oct 2010 Posts: 306 Location: Sweden

Tari · Posted: 05 May 2011 12:09:43 pm Post subject:

KermMartian · Posted: 06 May 2011 12:05:28 am Post subject:

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?

_________________

Qwerty.55 · Expert Joined: 08 Dec 2010 Posts: 613

Very nice. The icon seems a bit small compared to the background though.
_________________
∂²Ψ -(2m(V(x)-E)Ψ
----- = -------------
∂x² ℏ²Ψ

KermMartian · Posted: 06 May 2011 02:15:27 am Post subject:

JosJuice · Power User Joined: 17 Oct 2010 Posts: 306 Location: Sweden

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.

KermMartian · Posted: 28 May 2011 10:30:29 am Post subject:

Thanks again for these templates! I changed the selected Obliterate icon to have the proper background.
_________________

Ashbad · Posted: 28 May 2011 10:34:04 am Post subject:

JosJuice · Power User Joined: 17 Oct 2010 Posts: 306 Location: Sweden

z80man · New Member Joined: 01 May 2011 Posts: 77 Location: City 17

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]http://img.removedfromgame.com/imgs/selwalnut.bmp[/img] [img]http://img.removedfromgame.com/imgs/unwalnut.bmp[/img]

Edit: and the image won't come up ???

Ashbad · Posted: 29 May 2011 06:51:50 am Post subject:

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.
_________________
-Ashbad

JosJuice · Power User Joined: 17 Oct 2010 Posts: 306 Location: Sweden

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.

KermMartian · Posted: 30 May 2011 08:31:59 am Post subject:

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.
_________________

z80man · New Member Joined: 01 May 2011 Posts: 77 Location: City 17

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.