Images for UI in side GDL

[Joze Marinko]

I want to create an image for a user interface, but no matter what I do, it always ends up looking blurry. Are there any guidelines for designing UI images?

The original image is in TIF format. When I open it in Preview (macOS), I see four images of different sizes. How is that possible? Which image does ArchiCAD select? How can I create a TIF that contains four images?

Thanks for any addvice.

[runxel]

The best way to make UI images is to use the LPXML_Converter to spit out the tif from an svg.

What happens is that the converter will give you a so call multipage TIF. Its a special case of the TIF format that allows to store many pics inside it, like a container. It does not really see much usage since most people do not know about this, let alone encounter it in the wild (and afaik Photoshop could never handle these files correctly either – and apart from very special applications for laboratory imagery like ImageJ / Fiji most usual image editors out there never cared to implement this part of the spec as well).

The intended use case here is that at runtime Archicad should select the one sub tif that is best for the current resolution, without any input from the user.

I'm not sure why it does not seem to work for you tho. On Windows I would have suspected the usage of "odd" display scaling factors like 150%.

[Joze Marinko]

Thanks for your answer. I know how to put raster image in Library part with LPXML Converter. Do you have some kind of instructions how to translate svg to tif?

[runxel]

Yeah, as I said you'd use the converter for that:

lpxmlconverter convertlibrary -excludesvg folder_source folder_target

The flag is a bit weirdly named. ¯\_(ツ)_/¯ But basically it just means that the svg should become tif.

[Laurentiu]

Graphisoft has a GUI Icon Style Guide, this gives you an idea of how to create both icons and images for the user interface. You can find it here.

Make sure to look at page 19 where it explains how to align strokes to grid and this way when you get a tiff you won't have it pixelated. Also do try to use the colors from page 22, for consistency sake.

There's also a step by step guide at page 45 for Illustrator (paid) and Inkscape (free), but personally I have used Affinity (also free) and it worked great. In Affinity you work in the Vector View but you also have the "Pixel view" to see how the image looks if pixelated, so you get a good idea if it's gonna be blurry or not.

I found it easiest to work on a 480x266 (max for an object page UI) canvas first, then crop the canvas to the exact outline of the image i need. Working on a canvas that's the size of the UI gives you a sense of how much space you have for the UI.

After exporting a svg from Affinity, I converted the svg to tiff through the LPXML_Converter, and then imported that inside Archicad so the GDL script can read it. You probably can do the export to tiff from Affinity, but the LP_XML_Converter has the advantage of converting everything at once, like the whole folder of svgs.

To convert svg to tiffs, you use the convertlibrary -excludesvg command, then you give it the source folder (where the svg files are) and  the destination folder (where you want the tiffs to be saved).

"path/to/LP_XMLConverter" convertlibrary -excludesvg "source_folder" "destination_folder"
As an example:
"E:\GDL\LibDev Toolkit 28\Tool\WIN\LP_XMLConverter.exe" convertlibrary -excludesvg D:\svg D:\tiff

If you're happy with how the object looks, then you can embed the images inside the .gsm with the LPXML_Converter.

MF BIM has a Udemy tutorial (paid but well worth it) that explains that process.

One last tip, to place infields on top of ui_pict , you need to define the ui_infield twice, before and after the ui_pict.

I learned all this recently, so maybe it will be of help to you as well. 🙂