Custom tool and PIO icons

[TurtleBuilds]

Hello, I want to create a custom tool icon using a symbol that I have drawn. However, every time I try to upload an image as an icon it shows an error that says the file size must be 26x20 and 70 dpi. My question is what is the best way to go about creating an icon? 

[Gadzooks]

If you don’t have the resources just Google it and find an online ‘icon builder’. There are quite a few. 
(Generally) Upload a file, set your icon size from a list and use the output. 
 

 

[TurtleBuilds]

So I managed to make the required file size and accompanying high res image but when I upload them to VW for the icon it shows up as a red x. It no longer shows the error of wrong file size but accepts the image and fails to show it.

[Jesse Cogswell]

They made a couple of changes to icons in VW2024.  One of them was moving away from the .png file format and instead going to .svg format.  This is great because .svg format is actually a vector graphic, so the icon will scale appropriately between standard density and high density displays.  They also added dark mode to WIndows systems, which is what is causing your red X issue.

 

If you want to continue using the .png method, you will need four separate files per icon:

• Icon.png     (26x20 pixels at 72 dpi)
• Icon @2x.png    (52x40 pixels at 72 dpi)
• Icon_dark.png   (26x20 pixels at 72 dpi with colors set for dark mode)
• Icon_dark @2x.png   (52x40 pixels at 72 dpi with colors set for dark mode)

VW will determine the pixel density of the display and will choose which icon to display.  Even though it shouldn't really matter since you're specifying the exact pixel sizes, Mac requires that you must have a dpi of 72 for your icons otherwise they will error out.  I've never had a problem on Windows, but if you will have some Mac users, it's best to plan for it.

 

The key here is having icons with the _dark suffix, that is what VW will use when you have dark mode engaged.  I'm betting that if you were to switch to light mode, your icon would work properly.

 

Now, if you want to embrace the future and use the .svg format, you only need two icons:

• Icon.svg
• Icon_dark.svg

Since the icons are scalable vector graphics (that's where the svg comes from), VW will automatically scale the icon to match the display dpi.  But something to consider is that those icons will not work on versions of Vectorworks before 2024, so if backwards compatibility is important to you, you might want to stick with the .png method.  That said, if you're developing plug-ins in VW2024, they wouldn't be compatible with earlier versions anyway so it would probably be best to embrace the newer and better format.

 

In terms of how to create the icons, here's a couple of rough work flows you could try.

• .png method:
  • I use the .png method since backwards compatibility is important to me and some users of my plug-ins.  I'll generally draft up the icon in Vectorworks (since it's the drawing tool I'm most comfortable with anyway), then make sure everything has a pretty thick line weight.  I'll then zoom out until the icon is roughly the size it will be in the workspace.  I take a snip of the screen using the Windows snipping tool, and paste it into Photoshop.  In Photoshop, I'll delete the background behind the icon using the magic wand tool, and then use the crop tool with the settings set to 52x40 pixels at 72 dpi.  If the output is to my liking, I'll save this as the @x2.png file and then scale that again for the standard 26x20 icon.  The real trick is managing any kind of aliasing that happens when the image is "de-rezed", hence why I tend to use really thick line weights.
• .svg method:
  • Once again, I'll draft out my icon in Vectorworks.  From there, I will export it as an .eps file using the File-Export-Export EPSF option.  This will give me a vector graphic that I can manipulate in Adobe Illustrator.  I'll import the .eps file in Illustrator, and make sure that I set my artboard to be 26x20 pixels.  I'll manipulate the icon so it fits within the artboard, then export it as .svg.  I'll then make adjustments to color for the dark mode options (such as inverting black to white) and export the _dark.svg file.

I recognize that both of my methods require the use of Adobe software.  You could try using something like Inkscape instead of Illustrator, which is free, but also does not accept .eps files for import.  In this case, you could try exporting from VW as a .dxf file, which Inkscape will accept.

[Pat Stanford]

@MullinRJ I hope your backups are current and you restore successful.  🤞

[MullinRJ]

Hi @Pat Stanford,

   Backups are current. Restore has yet to be voted upon.  🤔 

 

Raymond

[TurtleBuilds]

@Jesse Cogswell, @Pat Stanford I have reattempted to make an icon and this time I tried to make .svg files for them. I used Inkscape (thank you for the suggestion) and set the document size to 26x20 pixels with a 72 dpi. I have created both a regular .svg file and an inverted _dark.svg file. I have made some notable progress in that now instead of a red x there is just a grayish square 🤣. I have also tried switching to light mode which just shows as a lighter grayish square.

 

I gave up on images and just tried simple text next for the icon image and attached screenshots of the "icons" since I couldn't attach .svg. I made the black text the regular icon and the purple the _dark file. 

 

Do you have any idea what is going on? I have probably 9 or 10 custom plug ins and am sick of just seeing the little wrench icons but cannot figure this out for the life of me.

[Jesse Cogswell]

Would you mind attaching the .svg files and I'll see if I can get them to work on my machine?  I haven't used Inkscape much (I gave up on it for my icons since it can't do EPSF import), but I remember Illustrator being fussy about setting up the artboard size to match the icon size.

[TurtleBuilds]

@Jesse Cogswell I couldn't attach them to the forum because it says .svg isn't recognized but I did post them here: https://my.sharuku.com/tile?q=ulecc

 

I posted both the plain text I tried to make work and the actual image I was trying to use. Thanks

[Stephan Moenninghoff]

@TurtleBuilds you are using plain text in your SVGs. If you convert this text to vectors before you create the SVGs, you will be fine.

[Stephan Moenninghoff]

@TurtleBuilds I downloaded the 'Bahnschrift' font that you seem to be using and have converted it to vectors. Here is the result. (If you cannot upload certain file types, it helps to just zip them).

Converted.zip

[TurtleBuilds]

@Stephan Moenninghoff That did work for text, thank you. Is there a similar process that needs to be done for using a .dxf or an image in the .svg file?

[TurtleBuilds]

I figured it out, it seems that I was using a .png inside of the .svg file and needed to create a bitmap out of the .png to make it work. I haven't tried the .dxf method yet but I think I will just export from vectorworks as a .png and use inkscape to create a bitmap of the .png and use that for my icon image. Thank you guys for helping me figure this out, it has been bugging me.

[Stephan Moenninghoff]

@TurtleBuilds you might be better off just recreating your icon in Inkscape and exporting to SVG. If you're not bothered about aligning with the pixel grid, SVG is the better option as it wil support any sizes you end up with, due to UI scaling on Mac or desktop scaling on Windows. Unless this is purely utilitarian and you're not bothered about the look...

[Stefan Bender]

Actually, text in images is a problem if the plug-in has to be translated into another language.