Image resolution
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
I spent half of yesterday trying to convert a PNG to SVG using several different online converters, and could not get a good result. The image had gradients, transparency, and shadows and SVG doesn't do those very well. It's better for line drawings and simpler shapes. That's why I asked to see a sample image, since some are better than others for SVG conversion.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Image resolution
If you’re on a Mac, give Vectornator a go. It’s free. I auto-traced a photo of a sunset with it (ie converted from JPEG to SVG) and the result was pretty good, given how many shades of orange and blue were in the image.
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
Thanks, I'd never heard of it. It did create a pretty impressive SVG, but when imported into LC it became a blank, empty rectangle. Of course, I don't know what I'm doing.
The image is a title for my card game Casey's Solitaire which I'm using as a test stack for web deployment. The PNG doesn't display on a web build so I thought maybe an SVG would. If anyone wants to see if you can get it to display in LC (not necessarily on web, just in the IDE) I'll enclose the image here. Note that not only the background is transparent, but also the white insides of the letters.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 3991
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Image resolution
Jacque,jacque wrote: ↑Tue Oct 04, 2022 8:01 pmThe image is a title for my card game Casey's Solitaire which I'm using as a test stack for web deployment. The PNG doesn't display on a web build so I thought maybe an SVG would. If anyone wants to see if you can get it to display in LC (not necessarily on web, just in the IDE) I'll enclose the image here. Note that not only the background is transparent, but also the white insides of the letters.
I tested the PNG image you posted and loaded it as control and referenced into a one card stack with just the images and a text field to check transparencies. It the image was visible in the stack as intended (with transparencies). Then I deleted the referenced image and tried to build for web local.
Using LC 9.6.9 rc1 it worked and opened in Safari displaying the image with transparencies but there was an error in the message box
Using LC 10.0.0 dp4 it displayed the image (including transparencies) in Safari and no error in the message box.transparentPNG-Test - err #2
exit(9481576) implicitly called by end of main(), but noExitRuntime, so not exiting the runtime (you can use emscripten_force_exit, if you want to force a true shutdown)
Kind regards
Bernd
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
Thanks Bernd, I see that it does display on Safari. I guess I never tried that, I've been testing in Firefox. So it's a browser-specific error after all.
I'm using LC 10.0.0 dp 4 and I didn't get an error. Thank you for pointing me at Safari and for taking the time to look at the image.
BTW, I do see the PNG in the IDE but I was wondering if anyone could convert it to SVG and see it into the IDE. Not you necessarily. Maybe someone who has Vectornator...
Edit: I reloaded the stack in Safari and the image didn't display again, same as Firefox. It shows up as a plain white box.
I'm using LC 10.0.0 dp 4 and I didn't get an error. Thank you for pointing me at Safari and for taking the time to look at the image.
BTW, I do see the PNG in the IDE but I was wondering if anyone could convert it to SVG and see it into the IDE. Not you necessarily. Maybe someone who has Vectornator...
Edit: I reloaded the stack in Safari and the image didn't display again, same as Firefox. It shows up as a plain white box.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Image resolution
Well i thought i'd test this - but the image is not well suited for SVG, which is essentially line art.
There are too many gradients of same/similar grey colour which means trying to replicate this creates a very messy SVG.
Truly too awful to even show here.
One way around this is to auto-trace this as a sketch with high complexity & low contrast. I only tinkered with it for a few minutes and came up with this using 60% contrast:
with 75% contrast:
Having said that it just isn't as good looking as the bitmap; however you could just create the text is an vector graphics app, save as svg, import to LC and apply effects in LC, which gives you an infinitely resizeable text graphic (the image below shows the graphic on the right resized and with drop shadow applied):
As such i'd guess the best way to 'convert it to SVG' is to actually create it as SVG to start with with a vector graphics app - or if you want have pretty gradients i guess PNG or similar is the way to go...
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
Thank you stam, those first two are actually better than the ones I got from the online converters yesterday. You should have seen those. Truly awful.
I like your text SVG very much, it's a nice effect. I may try that. Since the game hasn't been updated in 10 years it's probably time for a new look. Did you make the text in Vectornator?
I like your text SVG very much, it's a nice effect. I may try that. Since the game hasn't been updated in 10 years it's probably time for a new look. Did you make the text in Vectornator?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Image resolution
Thanks Jacque.
Surprisingly Affinity Designer, a paid product, doesn't do auto-tracing which Vectornator - a free app - does! (the auto-traces above were with Vectornator).I made the logo you like in Affinity Designer - but replicated it pretty exactly in Vectornator (which is fast becoming my favourite vector app...)
The font is Hobo Std (115 pt in Vectornator) and i reduced the tracking to -6 in the text settings (brings the letters closer together).
I then clicked the 'Create outlines from text" button to create the vectors, removed fill and added stroke 4 pt. You'll probably want to tinker with these settings.
The other thing to note is that while the image is infinitely scaleable, the you will likely need to change the dropShadow size and other effects in LC with big changes in image size as the effects are fixed and don't scale with image size (although you can probably do this programmatically).
Feel free to use the attached vectornator file - i included both the text version and the vector image of the logo for comparison.
(you'll need the font Hobo Std to replicate my vector image)
HTH
Stam
- Attachments
-
- Casey's Solitaire Logo.zip
- (52.29 KiB) Downloaded 40 times
-
- Livecode Opensource Backer
- Posts: 9287
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: Image resolution
Converting things from anything other than plain black and white in Inkscape is largely rubbish:
- -
Ok: from Left to Right:
1. Original JPG from the internet.
2. Inkscape Trace Black and White.
3. Inkscape Colour #1
4. Inkscape Colour - the best I could manage.
And let's not go down the screamingly naive path I went this morning with a favourite painting
of mine by Camille Corot:
- - -
Although, to be honest, that looks a bit better than what it did with Minnie Mouse.
- -
Ok: from Left to Right:
1. Original JPG from the internet.
2. Inkscape Trace Black and White.
3. Inkscape Colour #1
4. Inkscape Colour - the best I could manage.
And let's not go down the screamingly naive path I went this morning with a favourite painting
of mine by Camille Corot:
- - -
Although, to be honest, that looks a bit better than what it did with Minnie Mouse.
-
- VIP Livecode Opensource Backer
- Posts: 3991
- Joined: Sun Jan 07, 2007 9:12 pm
- Location: Bochum, Germany
Re: Image resolution
Just to add to the mix:
here is Corot made of 24 graphics all done in LC. Extracted from the Corot image Richmond posted.
Although reducing Corot to 24 colors is missing the point of Corot: it is all about subtle color differences...
As for the stack: you can pull apart the graphics in edit mode and see how it works. But do not change their size. Button "rearrangeGraphics" will restore the stacked graphics location.
For some effects see the buttons and option menu.
Kind regards
Bernd
here is Corot made of 24 graphics all done in LC. Extracted from the Corot image Richmond posted.
Although reducing Corot to 24 colors is missing the point of Corot: it is all about subtle color differences...
As for the stack: you can pull apart the graphics in edit mode and see how it works. But do not change their size. Button "rearrangeGraphics" will restore the stacked graphics location.
For some effects see the buttons and option menu.
Kind regards
Bernd
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
Thanks very much! I will experiment with it. I'd also like to try it myself but I couldn't find how to trace a font. I'm not very good with graphic apps, like I said, I don't know what I'm doing.
Edit: I understand now after re-reading your original instructions. I'm on my way. Thank you.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Image resolution
That's amazing.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com