Re: Best practise approach for artwork for iOS and Android?
This work for a few images, but let's say that your app has 100's images. Your package / SA has limits. I found it easy to settle on a routine. Images 400 X 400 or less I produce at 800 X 800 and run them the TinyJPG and get optimized. So the 2X size work well, in fact in "mandatory" on small image (100 X 50) from full screen images (414 X 736) the 1X, otherwise "eagle eyes" complain Of course it is not optimal, but from user feedback; they only complain "the image a fuzzy" when we take an item below a certain rect (400 X 400) AND optimize it AND display a 1X... when the image is bigger, I suspect treatment of edges and sharpness are still "acceptable" to the eye -- after optimization, even my eagles eyes users TinyPNG.com I have not found any this better. My own command line tool (run it through ImageMadic and mozjpg) never come close to TINYpng.com. Works so well that save in photoshop at the native rect (2X for image below 400x400 are save a 800 X 800) and save out at 100% quality on Photoshop . Drop in TINYpng.com (does jpeg as well) and look at savings!\ And test them side by side with the originals. Of course, is you are doing Ansel Adam coffee book style photographic representations that’s a different story. But my users are interest in the content of the photo -- "the documentary" aspect. They hardly notice the photo quality (except for small images, where I think optimization "breaks" the photo) Brahmanathaswami On 6/12/18, 10:45 AM, "use-livecode on behalf of Mark Waddingham via use-livecode" wrote: TL;DR: if you can find a tool which can upscale your images acceptably to 2x or even 4x - do so - keep the original image as foo.png and the upscale ones as foo@2x/4x.png and set the filename of the image with foo.png. The engine should do the rest (from the using as much as it can pixel data wise at least point of view). ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
Just one thing to add here based on what Trevor mentioned - these are images which you have complete control over so... If you can upscale them (perhaps using the tool Lagi suggests) with a good degree of visual improvement then you can use the multi-resolution aware feature of referenced (filename) image objects to improve the display of your images on high resolution screens. Modern devices have screens which are 2-3x the dpi of screens we have lived with for decades - so more pixel data means better quality display. When you use the filename property such as 'foo.png' the image object will look for images which have name 'foo@x.png' first where x is 1,1.5,2 or 4 based on the number of device pixels available. E.g. On a 2x retina device - it will look for the 2x image and fit it to the logical (the rect) size. Note: the base size is taken from the 1x image size and the file actually used is based on the 'effective scale' of the total transform from image text to device pixels - so the dpi setting in the images don't matter and it's much more competent than just using the type of screen. TL;DR: if you can find a tool which can upscale your images acceptably to 2x or even 4x - do so - keep the original image as foo.png and the upscale ones as foo@2x/4x.png and set the filename of the image with foo.png. The engine should do the rest (from the using as much as it can pixel data wise at least point of view). Warmest Regards, Mark. Sent from my iPhone > On 12 Jun 2018, at 17:23, Trevor DeVore via use-livecode > wrote: > > On Tue, Jun 12, 2018 at 2:01 AM, Tiemo Hollmann TB via use-livecode < > use-livecode@lists.runrev.com> wrote: > >> >> I thought the dpi only reflects at print, because any screen has it's fixed >> pixels. I think an image 800x600 with 144 dpi looks identical on any >> screen, >> as an image 800x600 with 72 dpi because in both cases 800x600 screen pixels >> are being used and there is nothing between the pixels. Or don't I see >> anything here? >> > > Changing the DPI setting in the image may affect display in image viewing > applications. If you were to change the DDPI setting of an 800x600 image > from 72 to 144 then the image would be displayed as a 400x300 image in an > application like Preview on macOS or Photoshop. LiveCode will display an > image using the natural dimensions by default. That means an image with > 800x600 pixels will be displayed as an 800x600 image. > > As a developer you could get the `metadata` of an image and check the > `density` key in the resulting array to determine if you should resize the > image based on the density setting. Depending on your application you may > face a new dilemma, however. You have to decide what the base DPI is for > the image. An image with 144 DPI could be a 2x image if created on macOS > (base of 72 DPI) or a 1.5x image if created on Windows (base of 96 DPI). > So that image may need to be displayed at 400x300 or 533x400. > > -- > Trevor DeVore > ScreenSteps > www.screensteps.com > ___ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
on Tue, 12 Jun 2018, Lagi Pittas wrote: > I don't know what sort of images you have but > take a look at xara (xara.com/designer-pro/features) I use Xara Photo Graphic Designer and agree with Lagi's recommendation. Check these videos about intelligent scaling: https://www.youtube.com/watch?v=dfNLaZ5cSHs https://www.youtube.com/watch?v=s9j-WYl0OJY Al ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
On Tue, Jun 12, 2018 at 2:01 AM, Tiemo Hollmann TB via use-livecode < use-livecode@lists.runrev.com> wrote: > > I thought the dpi only reflects at print, because any screen has it's fixed > pixels. I think an image 800x600 with 144 dpi looks identical on any > screen, > as an image 800x600 with 72 dpi because in both cases 800x600 screen pixels > are being used and there is nothing between the pixels. Or don't I see > anything here? > Changing the DPI setting in the image may affect display in image viewing applications. If you were to change the DDPI setting of an 800x600 image from 72 to 144 then the image would be displayed as a 400x300 image in an application like Preview on macOS or Photoshop. LiveCode will display an image using the natural dimensions by default. That means an image with 800x600 pixels will be displayed as an 800x600 image. As a developer you could get the `metadata` of an image and check the `density` key in the resulting array to determine if you should resize the image based on the density setting. Depending on your application you may face a new dilemma, however. You have to decide what the base DPI is for the image. An image with 144 DPI could be a 2x image if created on macOS (base of 72 DPI) or a 1.5x image if created on Windows (base of 96 DPI). So that image may need to be displayed at 400x300 or 533x400. -- Trevor DeVore ScreenSteps www.screensteps.com ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
Hi, I don't know what sort of images you have but take a look at xara ( xara.com/designer-pro/features) Scroll down to the intelligent scaling video - better yet they have a trial. I think the intelligent scaling might even give you the "safe Zone" that SB mentioned Regards Lagi Lagi On Mon, 11 Jun 2018 at 14:48, Kee Nethery via use-livecode < use-livecode@lists.runrev.com> wrote: > If you use the imagery you have, don’t distort it to fill the screen. That > always looks bad. Add white space and/or crop but keep the proportions > correct. > > If you run them through a smoothing filter to up the dpi, you will want to > bit poke each image to restore sharp corners that should not have been > rounded. > > Personally, if the app worked well with the images you had, and redoing > them is your big go/no go, I’d use the images you have. If one app gains > traction, perhaps v2 has new images. > > Toss them all against the wall and see what sticks. > > My two cents. > > Kee Nethery > > > On Jun 11, 2018, at 1:54 AM, Tiemo Hollmann TB via use-livecode < > use-livecode@lists.runrev.com> wrote: > > > Hi, > > > > I have three old windows program (going back to the 90th), designed for > > children, which are based on "full window" image backgrounds (douzends of > > cards, each with another background image) and lots of small detail > images. > > Up to now I have only developed LiveCode for Windows and MacOS, no > > experience yet with iOS and Android development. I try to evaluate the > work > > load to redevelop those old windows programs for mobile and one general > > question before I start is the art work. Since the old art work has a > size > > about 800x600 by 72dpi, I obviously would need to let redesign all art > work > > for the todays resolutions, which would be a pretty costly part of the > > project and probably the go or nogo for the whole project. > > > > > > > > Since there are so many different screen sizes, resolutions and aspect > > ratios on iOS and Android, I wonder how to cover all those variants > > technically in LiveCode and basically from the art work side. E.g. which > > size and ratio I would have to let create the "master" images by the > artist > > (to be also on the safe side for the next years)? > > > > Since I can't let design for each ratio a different master image for each > > card, I probably would have to distort the "master" image to each > different > > screen size (app only for tablets in landscape mode)? Could I let make > the > > OS the distortion of one background image per card in LiveCode, or would > I > > need to import and assign different images (which I have distored in > > photoshop before) for each screen size in each card? Additionally I would > > need to create douzends of polygons as clickable objects, above each > image > > for small parts of it, where I am not sure, if they would keep their > exact > > target area, when the background image will be distort - probably not. > > > > > > > > Up to now it looks to me as a never ending story, but perhaps I don't > see a > > good approach > > > > Any experience or pointers to a how to are very welcome. > > > > > > > > Tiemo > > > > > > > > > > > > > > > > ___ > > use-livecode mailing list > > use-livecode@lists.runrev.com > > Please visit this url to subscribe, unsubscribe and manage your > subscription preferences: > > http://lists.runrev.com/mailman/listinfo/use-livecode > > > ___ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your > subscription preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
Other replied on resolution. I'll reply as to content. You may not have the option, but there is a "safe zone" for landscape and portrait. We recently hire an artist to do a kid's story. She was asked to put "sky" the top and "grass" and the bottom and significant elements in "safe zone" Later we are will set the image to "the loc of this card" (centered) On devices that crop, we lose the top and bottom but significant elements remain visible. Is this helpful? Probably not... if it is, I have a "safe zone" stack I can send you. Brahmanathaswami On 6/10/18, 10:55 PM, "use-livecode on behalf of Tiemo Hollmann TB via use-livecode" wrote: Up to now it looks to me as a never ending story, but perhaps I don't see a good approach Any experience or pointers to a how to are very welcome. ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
I would bulk-convert all the images to a higher resolution, perhaps 144dpi. On Mac, Graphic Converter can batch process these in seconds, and I am sure there are other programs that do the same on both Mac and Windows. Use these higher-resolution images in your project. On mobile, use fullScreenMode "showAll", which will automatically adjust the display to fit any resolution and screen size on both iOS and Android. Depending on the original card size, some edges will either be cropped or empty space will be added. There are ways around this, mainly by displaying an image at a larger size than the (original) card size. There was a bug in the showAll fullscreenmode when navigating cards, but that has just been fixed and will be in the next 9.0 release. There are also workarounds for this right now if you don't want to wait. This is a quick process that doesn't take much time because you won't have to adjust every image. On 6/11/18 3:54 AM, Tiemo Hollmann TB via use-livecode wrote: Hi, I have three old windows program (going back to the 90th), designed for children, which are based on "full window" image backgrounds (douzends of cards, each with another background image) and lots of small detail images. Up to now I have only developed LiveCode for Windows and MacOS, no experience yet with iOS and Android development. I try to evaluate the work load to redevelop those old windows programs for mobile and one general question before I start is the art work. Since the old art work has a size about 800x600 by 72dpi, I obviously would need to let redesign all art work for the todays resolutions, which would be a pretty costly part of the project and probably the go or nogo for the whole project. Since there are so many different screen sizes, resolutions and aspect ratios on iOS and Android, I wonder how to cover all those variants technically in LiveCode and basically from the art work side. E.g. which size and ratio I would have to let create the "master" images by the artist (to be also on the safe side for the next years)? Since I can't let design for each ratio a different master image for each card, I probably would have to distort the "master" image to each different screen size (app only for tablets in landscape mode)? Could I let make the OS the distortion of one background image per card in LiveCode, or would I need to import and assign different images (which I have distored in photoshop before) for each screen size in each card? Additionally I would need to create douzends of polygons as clickable objects, above each image for small parts of it, where I am not sure, if they would keep their exact target area, when the background image will be distort - probably not. Up to now it looks to me as a never ending story, but perhaps I don't see a good approach Any experience or pointers to a how to are very welcome. -- Jacqueline Landman Gay | jac...@hyperactivesw.com HyperActive Software | http://www.hyperactivesw.com ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Best practise approach for artwork for iOS and Android?
If you use the imagery you have, don’t distort it to fill the screen. That always looks bad. Add white space and/or crop but keep the proportions correct. If you run them through a smoothing filter to up the dpi, you will want to bit poke each image to restore sharp corners that should not have been rounded. Personally, if the app worked well with the images you had, and redoing them is your big go/no go, I’d use the images you have. If one app gains traction, perhaps v2 has new images. Toss them all against the wall and see what sticks. My two cents. Kee Nethery On Jun 11, 2018, at 1:54 AM, Tiemo Hollmann TB via use-livecode wrote: > Hi, > > I have three old windows program (going back to the 90th), designed for > children, which are based on "full window" image backgrounds (douzends of > cards, each with another background image) and lots of small detail images. > Up to now I have only developed LiveCode for Windows and MacOS, no > experience yet with iOS and Android development. I try to evaluate the work > load to redevelop those old windows programs for mobile and one general > question before I start is the art work. Since the old art work has a size > about 800x600 by 72dpi, I obviously would need to let redesign all art work > for the todays resolutions, which would be a pretty costly part of the > project and probably the go or nogo for the whole project. > > > > Since there are so many different screen sizes, resolutions and aspect > ratios on iOS and Android, I wonder how to cover all those variants > technically in LiveCode and basically from the art work side. E.g. which > size and ratio I would have to let create the "master" images by the artist > (to be also on the safe side for the next years)? > > Since I can't let design for each ratio a different master image for each > card, I probably would have to distort the "master" image to each different > screen size (app only for tablets in landscape mode)? Could I let make the > OS the distortion of one background image per card in LiveCode, or would I > need to import and assign different images (which I have distored in > photoshop before) for each screen size in each card? Additionally I would > need to create douzends of polygons as clickable objects, above each image > for small parts of it, where I am not sure, if they would keep their exact > target area, when the background image will be distort - probably not. > > > > Up to now it looks to me as a never ending story, but perhaps I don't see a > good approach > > Any experience or pointers to a how to are very welcome. > > > > Tiemo > > > > > > > > ___ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode ___ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode
