Need help/advice with skins/graphics

[moster67]

Just like the title says: I need some help/advice with skins and graphics.

I have written an application which is functional but with an ugly user-interface. In order to make it look more fancy, I thought I would add a skin or some graphical effects such as imagebuttons. The problem is that I don't know how to! Apart from the graphics (the actual images) which I will look into later, I still need to know how to proceed.

Any guidelines? I thought I would apply a nice background-image to the form and then add image-buttons which would look nice with the background. Is this the way to go? What about resizing? If the application is used with different screen-resolutions, how do I handle this. Do I use a Panel?

As you can see, I have a lot of doubts. I have seen many programmes with great looking user-interfaces, even written in .Net so I guess it must be possible. As I mentioned before, I will look into the actual images to use later since I first need to know how to work with graphics.

I attach an user-interface to give you an idea what I would like to achieve (I know it's for an iPhone but there are similar user-interfaces also for Windows Mobile).

Many thanks in advance for your help.

rgds,
moster67

 

[ExcludeReality]

Well, I can't really tell you how your application will look, that's for you to decide.

To make nice buttons, I suggest you make them yourself in Paint.NET (It's quite simple).
Or try the fgGradientButtons library.

Make your background image 480 x 800. If the resolution is smaller it will resize.
Any bigger size would be unnecessary.

To make a good UI I suggest big, finger-friendly buttons.

A "skinnable" application might be a good idea.
The users can then make their own skins. Kinda takes the pressure off you.

 

[moster67]

ExcludeReality: Thanks for your tips. I have downloaded Paint.net and will start playing around with it.

A few more questions:

What regards the background image, I will do as suggested by you i.e. make it 480 x 800 (as matter of fact, I recently got myself a HTC HD2 which supports this resolution). However, what do you with the imagebuttons? I guess, I must re-position them according to the resolution of the device. Is this correct? Would it somehow be better to put all imagebuttons in the panel-control to faciliate the re-positioning?

thanks.

 

[ExcludeReality]

I'm not very good with resolutions.
You might have to reposition all control during runtime, or a panel might do the trick.

To make an application specificly for your resolution, set the form size to 240 x 400 and compile with Auto Scale.

 

[moster67]

Many thanks for your help. Now I have something to start with. :sign0060:

 

[klaus]

Hi moster67,

With ImageButtons you must be aware of :
- Their shape is a rectangle, if you want to have other shapes you must set the surrounding transparent. In your skin picture the round buttons with arrows, must be set in rectangles, be careful that they don't overlap.
- The transparent color for Imagebuttons is the color of the upper left corner pixel.
- The image shown in the transparent areas is the background image of the form and not the image you see on the screen! If there are objects between the forms background and the ImageButton the image of this control will not be shown.
- If you put ImageButtons on a Panel, you must set it's background color the same as the form's one. If the form has a background image, you should not use panels because they don't have an Image parameter. Panels are very convenient when you need to show or hide groups of buttons.
- You cannot use Image controls with ImageButtons because they don't accept child controls.

For the positionning of the buttons, you can use the standard screen size of 240 / 400 and compile with Autoscale, be aware that if you want also support the 240 / 320 screen size you must manage the lower 80 pixels. With Autoscale, no need to position the buttons according to the screen resolution. Only if you want to take into account screen orientation you must position the buttons, but this must be done anyway.
If you really want or need to use the 480 / 800 screen resolution you must set the screen size in the desktop IDE to that size and compile without Autoscale. If your program should also run on the desktop you must, in the source code, increase all font sizes by 2 when running on the desktop, because fonts sizes are in physical units and not in pixels, otherwise the texts would be too small.

Attached a sample program with 3 forms:
- Player ImageButoons with images of your skin image. The quality is not good, I resized your image to fit the PPC screen size and copied the button images. But it is for the principle.

- Player1 with a background image (your skin) but using the frmPlayer1_MouseDown event. And testing if the cursor position lies in a given button area and if yes triggers the function.

- HTC Layout 3 examples of what can also be done.
1) Zoom with 3 buttons on a hidden panel. When the zoom button is clicked a panel is displayed with 3 more button and when mouving the cursor the buttons are selected or unselected (uses the Door library).
2) GPS is a toggle button one click enables next click disables and so on
3) Maps standard button

Hope this will help you.

Best regards.

 

[moster67]

Klaus,

I saw your reply only now. What wealth of information you supplied and many thanks for the sample program. :icon_clap:

I hope to find some time this weekend and study this further.

I owe you a beer my friend!

Take care and once again my sincerest thanks.

 

[moster67]

Klaus,

just a few more question if I may:

-If I need to use transparent areas, I guess I need to save the image in the png-format. Is this correct?

-is there a standard DPI-size I should use? I noted that the images included in your sample-application were using 96 DPI. Is this the standard?

-DPI ? Is this related to the resolution of the image itself? If it is high, does this mean it is very sharp and less blurry?

Thank you and have a great weekend.

 

[klaus]

Hi moster67,

-If I need to use transparent areas, I guess I need to save the image in the png-format. Is this correct?

No, you can save the images in different formats. The color of the upper left corner pixel sets the transparent color. I save images for ImageButtons in bmp format, I had trouble with the jpg format because areas with the same color, the transparent color, didn't have any more the same color over the whole area. I think that the png format will be OK, never tried it.

-is there a standard DPI-size I should use? I noted that the images included in your sample-application were using 96 DPI. Is this the standard?

No, an image is defined in pixels, the DPI scale is the size of a pixel point on the screen. That means that the same image on a 240/320 screen (96 DPI) is bigger than the same image on 480/640 screen, for a same screen size.
The only advise I could give you is to set the image size to the size of your buttons, in that way the images fill the whole button and look as the original. It is possible to have images of different size than the buttons but in that case the images are stretched or shrinked or simply smaller. In the IDE you can select how the images will be displayed, cCenterImage, cNormalImage, cStretchImage.

-DPI ? Is this related to the resolution of the image itself? If it is high, does this mean it is very sharp and less blurry?

No, as explained in the previous point, it depends only on the screen resolution.


With the advice of having the image size equal to the button size, if you write a program for a 480/640 screen, not AutoScale compiled, the image width and height in pixels must be double than for a 240/320 screen. The images in that case are sharper because of the higher resoultion.

Hope these explanations are understandable.

Best regards.

 

[moster67]

Thank you Klaus. Very good information.