0

  • I used Apple Numbers (a Spreadsheet app with styling options) to create a UX flowchart of various user interfaces of an app.

  • Apple Numbers has a PDF export option.

  • The problem is that even though some border lines in the table have been set to "none" in the export you nevertheless get small visible hairlines, see this cutout:

[Undesired hairlines in UI design

I want to to eliminate the hairlines by image processing

Before creating a flyover video over the graphics.

My basic idea is:

  1. Convert vector to bitmap with very high resolution (oversampling, e.g. to 600 or 1200 DPI)
  2. Then downsample to the target resolution (e.g. 150 DPI) with an algorithm which eliminates the hairlines (disappearing in the dominance of neighboring pixels) while overally still remaining as crisp and sharp as possible.

So step 1, I already figured out, by these two possibilities:

  • a. Apple Preview has a PDF to PNG export option where you can specify the DPI.
  • b. ImageMagick convert -density 600 source.pdf export.png

But for step 2 there are so many possibilities:

resample <DPI> or -filter <FilterName> -resize 25% or -scale 12.5% (when from 1200 to 150)

Please tell me by which methods (resample, resize, scale) and which of the interpolation algorithms or filters I shall use to achieve my goal of eliminating the hairlines by dissolving them into their neighboring pixels, with the rest (normal 1px lines, rendered text and symbols, etc) remaining as crisp as possible.

porg
  • 1,079
  • 1
  • 11
  • 17
  • to _remove_ them after they've happened, I'd recommend a median filter followed by any downscaling -- to prevent them, you'd need to draw these things differently, not object by object, but by sampling every pixel and figuring out what objects are hit by it... at least at those border pixels. – Christoph Rackwitz Feb 24 '22 at 12:20
  • Going back to the source and editing it is no option in that case. Why? The whole Apple numbers file is made of dozens of tables each with hundreds of border lines. Impossible to select all these and do some color manipulations. – porg Feb 24 '22 at 12:46
  • During normal onscreen display in Numbers these hairlines are not here. So another possibility I realized: 1) Display on Retina screen with high resolution. 2) Create screenshots with stitching. I have Snagit which does that: Scrolling mode fails, but at least Panorama mode works (records you while you scroll (on one axis and try at regular speed for best results). But to get the effective resolution, this is way more manual labor. I need to do that for multiple sheets within that Spreadsheet. So still looking for image postprocessing solutions. – porg Feb 24 '22 at 12:51
  • Best results I achieved so far by PDF -> PNG 1200 -> PNG 150. Then the hairline is only a very faint grey almost not distinguishable. PDF -> PNG 600 -> PNG 150 already more noticable. PDF -> PNG 300 -> PNG 150 quite noticable. Maybe I try oversampling to 1800 or 2400. But the effort increases exponentially! PDF to 600 took 2min, PDF to 1200 took 37min and PNG 1200 to PNG 150 already took 14min. All clocked with unix `time` utility. So rather than oversampling more than necessary I need to figure out the correct interpolation algorithm. – porg Feb 24 '22 at 12:57
  • @ChristophRackwitz I do not understand your instruction of a media filter for removing the hairlines. As in my previous comment you see that it faints and faints the more oversampling I do prior downsampling. But never get it away. What's the best algorithm for "weak lines drowning in dominant neighboring surfaces" ? – porg Feb 24 '22 at 12:59
  • media**n** filter, before downsampling. https://imagemagick.org/script/command-line-options.php#median a 3x3 or 5x5 median should suffice. – Christoph Rackwitz Feb 24 '22 at 13:16

1 Answers1

0
  1. ImageMagick PDF tp PNG conversion with different DPI settings: convert -density XXX flowchart.pdf flowchart-ImageMagick-XXX.png
  • flowchart-ImageMagick-150.png ; flowchart-ImageMagick-300.png ; flowchart-ImageMagick-600.png
  1. Apple Preview PDF to PNG export with different DPI settings:
  • flowchart-ApplePreview-150.png ; flowchart-ApplePreview-300.png ; flowchart-ApplePreview-600.png
  1. Different downscaling processings

  • a) convert -median 3x3 -resize 50% flowchart-ApplePreview-300.png flowchart-150-from-ApplePreview-300-median-3x3.png thanks to the hint from @ChristophRackwitz

  • b) convert -filter Box -resize 25% flowchart-ImageMagick-600.png flowchart-150-from-ImageMagick-600-resize-box.png

Comparison

flowchart-ApplePreview-150.png

flowchart-ApplePreview-150

flowchart-150-from-ApplePreview-300-median-3x3.png

flowchart-150-from-ApplePreview-300-median-3x3

  • ✅ Hairlines gone
  • ❌ But font is not as crisp anymore, median destroyed that.

flowchart-150-from-ImageMagick-600-resize-box.png

flowchart-150-from-ImageMagick-600-resize-box

  • Overally still quite crisp
  • Hairline only very very faint, even only faint when zoomed in

Both variants are somehow good enough for my KenBurns / Dolly cam ride over them. Still I wished that there'd be an algorithm that keeps cripness but still eliminates 1px lines in very high DPI bitmaps. But I guess this is a Jack of all trades only in my phantasy.

Processing Durations

  • MacBook Pro 15'' (Mid 2014, 2,5 GHz Quad-Core Intel Core i7)

ImageMagick PDF to PNG

  • PDF source Ca. 84x60cm (33x23'')
  • 300dpi -> 27s
  • 600dpi -> 1m58s
  • 1200dpi -> 37m34s

ImageMagic Downscaling

time convert -filter Box -resize 25% 1@600.png 1@150-from-600.png
# PNG @ 39700 × 28066:  135.57s user   396.99s system   109%  cpu   8:08.08 total

time convert -median 3x3 -resize 50% 2@300.png 2@150-from-300-median3x3.png
# PNG @ 19850 × 14033:  311.48s user     9.42s system   536% cpu      59.76 total

time convert -median 3x3 -resize 50% 3@300.png 3@150-from-300-median3x3.png
# PNG @ 19850 × 14033:  237.13s user     8.33s system   544% cpu      45.05 total
porg
  • 1,079
  • 1
  • 11
  • 17