Recent

Author Topic: Good style for icons and glyphs and size  (Read 503 times)

Nicole

  • Sr. Member
  • ****
  • Posts: 464
Good style for icons and glyphs and size
« on: September 13, 2022, 01:36:09 pm »
This is not a question, but I would appreciate to hear your ideas.
The goal is:
How does an application look nicely?
It shall look
- "built in one shape"
- not too small and not too large icons
- communicate the functions clearly
- does not kill the user by information and images

How do you reach this?
I have some ideas, but the result are far from satisfying me.

I use our old hero "Colormania" and started by "borrowing" the colors of a Lazurus-theme I liked. These colors I add to my frames and backgrounds and buttons.

Here is my first question:
Does Lazarus allow prefab "themes" like Delphi for applications?

Then I use the Lazarus "image collection for every purpose" (not sure about the name).
I sorted the images by size and load them in ImageLists_16, ImageList_32 and so on.

Here is my next question:
Which sizes is "best"?
e.g. in a TPageControl I use 16 bits. Looks nicely from size, but I can hardly see enough details. And I tried 48 pixel sizes. Looks great, - but stuffs the screen.

How do you do it?
And do you use multi-size ImageLists or sizes-sorted?

Thank you for sharing your styles of working.

circular

  • Hero Member
  • *****
  • Posts: 3866
    • Personal webpage
Re: Good style for icons and glyphs and size
« Reply #1 on: September 15, 2022, 08:24:35 am »
About icons, now it is possible to use SVG so that you can resize them on the fly:
https://wiki.freepascal.org/BGRAControls#TBGRASVGImageList

It is in BGRAControls library. The icons of this control tab is not yet defined in current version. I guess I am going to do some icons for them.
Conscience is the debugger of the mind

Nicole

  • Sr. Member
  • ****
  • Posts: 464
Re: Good style for icons and glyphs and size
« Reply #2 on: September 15, 2022, 09:32:22 am »
Thank you, they really look good!
The tiger-image was copied (just for my private use) at sudden.

Will those control be available by the online package manager soon?

wp

  • Hero Member
  • *****
  • Posts: 10268
Re: Good style for icons and glyphs and size
« Reply #3 on: September 15, 2022, 11:09:29 am »
Does Lazarus allow prefab "themes" like Delphi for applications?
No. By default, Lazarus draws the application by calling the operating system's widgetset routines. This way a Lazarus application looks like the other standard applications of the OS, and if the user decides to change the theme of the OS, the lazarus application will follow.

If you want to use your own colors and styles, you must use the customdrawn widgetset (which is only half-finished), or use third-party components. That's fine if you are the only user of your application. But if other people are supposed to use it be aware that not everybody will like your choice of colors.

Then I use the Lazarus "image collection for every purpose" (not sure about the name).
I sorted the images by size and load them in ImageLists_16, ImageList_32 and so on.
You mean the "general purpose" images in the Lazarus images folder? That's a new collection of currently 352 motives each one in 6 sizes (png format, but there are also the svg masters at https://sourceforge.net/p/lazarus-ccr/svn/HEAD/tree/image_sources/lazarus/images/general_purpose/svg%20(Roland%20Hahn)/.
There is no need to put the images into different image lists. Prepare the ImageList editor for additional sizes (to the default size given by ImageList.Width/Height) by clicking on the "New resolutions" button. When your control needs a larger size by default set its ImagesWidth to the requested size (the default 0 means: use the default size of the ImageList, i.e. ImageList.Width). In addition, when the ImageList.Scaled is true, the application automatically picks a larger size when the monitor has a higer pixel density than usual.

Which sizes is "best"?
e.g. in a TPageControl I use 16 bits. Looks nicely from size, but I can hardly see enough details. And I tried 48 pixel sizes. Looks great, - but stuffs the screen.
My personal choice: 16x16, sometimes 24x24. Anything larger hurts my eyes, and such applications usually are banned from my HD quickly...

And do you use multi-size ImageLists or sizes-sorted?
In the first step you must tell the Imagelist which image sizes are needed. Decide on the basic image size, as I said: usally 16x16. This is used at 96ppi screen resolution (in Windows: 100%). If your application will also run at 144ppi (150%) or 192ppi (200%), add the "resolutions" "24" (=150% of the basic size, 16) and "32" (200% of 16) by means of the "New resolutions" buttons in the ImageList editor. If the basic size will be larger, say 32x32, for some controls (e.g. TListView.LargeImages vs. .SmallImages), you should also specify "resolutions" "48" and "64". So, in total, a standard application will require you to add 24 and 32 with the "New resolutions button"; for an application needing also 32x32 images, you have to add 24, 32, 48, and 64 in total. The 16x16 size does not need to be added by the "New resolutions" button because it is already known from the Imagelist.Width and .Height specification.

In the next step you add the images themselves. Click on "Add more resolutions" button. Navigate to the images/general_purpose folder of the Lazarus installation. Click on the 16px version of the image that you want to add. Then Shift-click on the last size of that image to be added. "Open" adds the selected sizes of the image to the image list. Repeat will all other images. Add only images that you need - they require a fairly large amount of memory.

If you do not use the general_purpose images folder and draw the images by yourself, you may skip all the intermediate sizes. The minimum is to draw the larges images that you need; the intermediated smaller sizes are calculated with sufficient quality. However, the smallest image (16x16), sometimes also the 24x24 image, appears a bit fuzzy; therefore, it is recommended to provide special version of these sizes, too.

Finally select the controls which require the 32x32 default size and set their ImagesWidth to 32 so that the 32x32 version of the images is selected at 96ppi.

AlexTP

  • Hero Member
  • *****
  • Posts: 1957
    • UVviewsoft
Re: Good style for icons and glyphs and size
« Reply #4 on: September 15, 2022, 11:30:03 am »
I posted this useful info to the wiki,
https://wiki.freepascal.org/TImageList#How_to_create_multi-resolution_ImageList_in_the_application

Feel free to adjust this text.
« Last Edit: September 15, 2022, 11:32:10 am by AlexTP »

circular

  • Hero Member
  • *****
  • Posts: 3866
    • Personal webpage
Re: Good style for icons and glyphs and size
« Reply #5 on: September 15, 2022, 12:42:27 pm »
Thank you, they really look good!
The tiger-image was copied (just for my private use) at sudden.

Will those control be available by the online package manager soon?
Yes, they are in BGRAControls, which needs BGRABitmap, and both are in the OPM.
Conscience is the debugger of the mind

 

TinyPortal © 2005-2018