#GUI tips about icons

1 messages · Page 1 of 1 (latest)

queen spear
#

can you tell me how to have some good looking icons instead of the crap it becomes when i compress to be on the software like this picture? see the difference and what it becomes

howcome.png
reef basinBOT
#

<@&987246487241105418> please have a look, thanks.

#

Here is an AI assisted attempt to answer your question 🤖. Maybe it helps! In any case, a human is on the way 👍. To continue talking to the AI, you can use </chatgpt:1108714622413963314>.

#

To ensure that your icons maintain their quality when compressed for use in software, here are some tips:

  1. Start with high-resolution icons: Begin with high-quality, vector-based icons that can be easily scaled without losing detail. This will provide a solid foundation for the icon design.

  2. Keep it simple: Icons should be visually clear and easily recognizable at smaller sizes. Avoid intricate details or excessive complexity that may get lost when compressed.

  3. Use appropriate sizes: Create icons in various sizes to accommodate different display resolutions and device types. Design separate versions for small, medium, and large sizes to ensure optimal clarity.

  4. Optimize file formats: Choose appropriate file formats like SVG (Scalable Vector Graphics) or PNG (Portable Network Graphics) for your icons. SVG files are resolution-independent and can scale without losing quality, while PNG files offer transparency support.

#

  1. Pay attention to contrast: Ensure that the icon's colors have sufficient contrast against the background they will be displayed on. This will help maintain visibility and legibility even after compression.

  2. Test across devices: Preview your icons on different devices and operating systems to ensure they appear as intended across various platforms. This will help identify any potential issues caused by compression or scaling.

  3. Minimize compression artifacts: When compressing icons, use appropriate settings to minimize compression artifacts such as blurring or pixelation. Experiment with different compression algorithms or tools to find the best balance between file size and visual quality.

  4. Seek professional help if needed: If you lack design skills or require highly polished icons, consider hiring a professional graphic designer who specializes in iconography to create custom icons tailored specifically for your software.

Remember, maintaining visual quality after compression is a challenge due to limited file size constraints in software applications. However, following these tips should help you achieve better-looking icons even after compression.

queen spear
#

noticed that on this picture is not perceived how bad the quality was

alpine ember
alpine ember
#

Might be aliasing or dithering

#

Change that setting

queen spear
alpine ember
#

It should be a setting

#

SetAliasing

queen spear
alpine ember
#

What code define the icon

queen spear
#

and
<Button id="btn_refresh" layoutX="515.0" layoutY="39.0" mnemonicParsing="false" onAction="#refreshPage" prefHeight="25.0" prefWidth="33.0" styleClass="btn_re_at" stylesheets="@styleb.css" textAlignment="RIGHT" AnchorPane.rightAnchor="209.0" />

alpine ember
#

So i think you can add a setting in the button to tweak this

#

Either that or there is an imagebutton option

queen spear
alpine ember
#

Id hope so

#

Lol

queen spear
#

=[

alpine ember
#

Id guess dithering because aliasing doesnt do loose pixels

queen spear
#

that thing was a < i removed already

#

but the quality is crap though

queen spear
alpine ember
#

uh idk

#

in javafx

#

im lost

queen spear
queen spear
#

anyone else with tips? 😦

winged token
forest trench
#

how big is the original image? looks like it's being scaled down a lot

wispy grove
#

which file format are you using?

forest trench
#

rasterized images dont scale very well. i'd recommend converting to a vectorized image, scaling that down, then coverting it back to a rasterized image

#

id recommend using vectorized image files, but javafx doesnt have good support for loading vectors from files

wispy grove
#

why not use SVGs if you're not using them? (seems to be the case)

queen spear
queen spear
wispy grove
#

yes

queen spear
wispy grove
#

what Dioxin and I said

queen spear
wispy grove
queen spear
#

i could manage a svg path that changes the button background actually but i faced other problem, the only working path changes the color of my button to light grey instead of the original black. Whats the reason for such? also could fix such through css stylization but no sucess on resizing to smaller than the following picture

queen spear
#

as you can see into this picture the icons got better as i customized but i have the error of this refresh button pic stated into the picture, anyone help me?

trash333.png
queen spear
queen spear
#

found other problem related to all this, my svg file makes the icon/button small, is it possible to set around the button with a colored space that makes the button bigger?

alpine ember
#

Goodness

alpine ember