[HN Gopher] Show HN: Screenstab - A tool to turn screenshots int...
       ___________________________________________________________________
        
       Show HN: Screenstab - A tool to turn screenshots into image assets
        
       Author : mikaelaast
       Score  : 126 points
       Date   : 2021-02-10 13:14 UTC (9 hours ago)
        
 (HTM) web link (www.screenstab.com)
 (TXT) w3m dump (www.screenstab.com)
        
       | marcodiego wrote:
       | Back in the day we simply configured compiz switcher and got a
       | good screenshot:
       | https://upload.wikimedia.org/wikipedia/commons/f/f4/Compiz-S...
       | 
       | Linked image is not as beautiful as reality was.
        
       | WORMS_EAT_WORMS wrote:
       | Just want to quickly say congrats and awesome idea. Will
       | definitely use in future
        
         | mikaelaast wrote:
         | OP: Thanks :)
        
       | markhall wrote:
       | This is great concept with a strong execution. Interested to see
       | how the price-point resonates relative to typical frequency of
       | use.
        
       | kareemm wrote:
       | Fantastic idea. I've looked hard for a tool to make nicer product
       | marketing screenshots without a designer and there are very few
       | nice tools. The best I've found is Screely[1].
       | 
       | Couple suggestions:
       | 
       | 1. Be able to add a magnifying glass effect to draw the eye[2]
       | 
       | 2. Put in different browser chrome
       | 
       | 3. Allow annotations and arrows that don't look like they were
       | made with a quick and dirty screenshot tool
       | 
       | 4. Allow resizing and cropping
       | 
       | 5. If you want to get fancy, build an OS X app to take and edit
       | the screenshot in one go.
       | 
       | 6. Add drop shadows and other effects
       | 
       | Paying for a tool like this above would save me so much time
       | making product marketing screenshots and would be a no-brainer
       | for me.
       | 
       | 1 - https://www.screely.com/
       | 
       | 2 - like this:
       | https://www.pixeden.com/media/k2/galleries/157/001-loupe-scr...
        
         | mikaelaast wrote:
         | OP here: Thank you very much. That was my starting point as
         | well, to quickly generate consistent and good-looking marketing
         | material without involving a human, basically. Thanks for the
         | thoughtful feedback and suggestions.
        
       | O_H_E wrote:
       | Useful or not, that looks sexy.
       | 
       | Bonus points if you can add a set of copy-able settings, so one
       | can apply the same transformations to different pics potentially
       | in different sessions.
        
         | mikaelaast wrote:
         | OP here: I humbly thank you! Yes. Saving settings as well as
         | batch processing of images are both on my roadmap.
        
       | gegtik wrote:
       | This is cool as heck
        
         | mikaelaast wrote:
         | OP: <3
        
       | Bob_LaBLahh wrote:
       | Very nice. I'd use it.
       | 
       | Two ideas to consider: (1) give option for one time purchases (2)
       | raise your price (I'd pay more)
       | 
       | Good luck!
        
         | michaelmcdonald wrote:
         | This. So much this. I'm sick and tired of subscriptions for
         | software. The fatigue is real.
        
       | op00to wrote:
       | No idea what this actually does after reading the web site. Is
       | there a gallery of examples or something?
        
         | tyingq wrote:
         | It appears to spruce up screenshots with tilt, drop shadows,
         | and so on.
         | 
         | It really, really, could use a gallery of before/after examples
         | though.
        
         | manjana wrote:
         | There is an example on the landing page. It transforms, skews
         | and add shadows (+ more probably) to images.
        
       | m3kw9 wrote:
       | The mix of seller, buyer and "you" in the writing makes it hard
       | to follow who's who sometimes.
        
       | endisneigh wrote:
       | I'd rather pay $100 once and have this on my computer
       | permanently. Any chance of that happening?
        
       | fudged71 wrote:
       | A while back I saw a way to take an SVG screenshot of a webpage,
       | which seems like an excellent intermediary format if you are
       | warping text etc and not wanting to run into aliasing problems
       | etc. Is that what you are doing?
        
       | glsdfgkjsklfj wrote:
       | Here is something completely different:
       | https://github.com/gcb/mk6
       | 
       | you can "write" (or even read) the screen shot in very simple
       | HTML5 (soon markdown) and a CSS file will magically make it
       | kinda-look like windows/gnome/kde/osx/ios/android.
       | 
       | goal is both to have fully accessible "screenshots" in
       | documentation and to ease the authoring for developers. Mostly
       | because i was tired of having a VM with default vm themes just to
       | create screen shots :)
        
       | woliveirajr wrote:
       | Why stab the screen to get beautiful images?
        
         | mikaelaast wrote:
         | OP here: Finally someone is asking the right questions... I
         | don't know. Naming stuff is hard, and it was late at night.
        
           | twobitshifter wrote:
           | I think it's a cool product but the name is not something
           | memorable for me.
        
       | kinard wrote:
       | Well done, seriously well executed.
        
       | dvh wrote:
       | "Before" contains information. "After" is stock photo fluff.
        
         | sneak wrote:
         | People pay money for "stock photo fluff", as you put it.
        
         | mikaelaast wrote:
         | OP here: Yes. Not to mention how OCR-unfriendly it is... I
         | don't know what to tell you. Screenfluff didn't have the same
         | ring to it.
        
         | [deleted]
        
       | sscarduzio wrote:
       | This is really pretty. Thanks for taking the time to creating it.
       | I concur with other users saying that it's strange to scroll to
       | move: messy with trackpads, and what does it mean to move? Better
       | provide an optional scroll bar that mirrors the scrolling, or can
       | be manipulated directly with the mouse.
        
         | mikaelaast wrote:
         | OP: Thank you :) So yeah, I gather that the scrolling is a bit
         | unintuitive... For what it's worth, the up and down keyboard
         | keys are mapped to the same motion, so they should be a good
         | substitution.
        
       | btbuildem wrote:
       | Ah.. my go-to for this is to take a photo of the screen with my
       | phone. The effect is spot on, and as bonus, you can capture the
       | pixellated nature of the image.
        
         | EForEndeavour wrote:
         | The risk of horrible moire comes to mind.
        
           | mnw21cam wrote:
           | Indeed. There's even an xkcd for it - https://xkcd.com/1814/
        
       | simplecto wrote:
       | This is neat. Points for execution!
       | 
       | I did this for the first iteration of my side-project using my
       | camera to "take a photo of a photo".
       | 
       | I did a side-by-side comparison of screenstab vs iphon6 taking
       | pic of screen. original screenshot as control
       | 
       | Here: https://imgur.com/a/urRmG2S
       | 
       | WFH means we have time on our hands to do comparisons like this.
       | LOL
        
         | mikaelaast wrote:
         | OP here: Thanks a bunch! Your comparison highlights something
         | that always bothers me about taking a real-life photo of a
         | screen: the banding/moire effect resulting from the physical
         | pixels being viewed from an angle. This was actually something
         | I encountered early on in Screenstab when I was attempting to
         | replicate the look of a real subpixel layout. Had to scrap that
         | approach.
        
           | simplecto wrote:
           | Interesting! You should put a side-car blog up and talk about
           | the challenges and lessons that came from building this
           | thing. I've been doing that and was able to ride the front-
           | page of HN for about 18 hours. Link in profile.
           | 
           | Also, I see that you are in Norway?! Hej from Sweden :-)
        
             | mikaelaast wrote:
             | OP: I like that idea. And yes, I've noticed your posts.
             | Hej, sota bror!
        
       | rbinv wrote:
       | Cool idea. I wonder if the effect(s) could be achieved solely
       | with CSS?
       | 
       | edit: the page says the transforms are done locally, but maybe
       | you could also offer a hosted API so screenshots can be replaced
       | automatically.
        
         | mikaelaast wrote:
         | Hi, OP here! The depth-of-field effect is pretty much
         | unattainable with CSS. I have toyed with the idea of an API as
         | well, to sweeten the deal for subscribers (and also it would be
         | neat as heck!).
        
           | [deleted]
        
       | digitalgangsta wrote:
       | Nice idea and i really like the simplicity! Could you provide
       | other effects? If there was a range of different effects offered,
       | using the same simple interface that'd be very cool.
        
         | mikaelaast wrote:
         | OP here: Thanks, and great question! I really like the idea of
         | it being a one-click thing. Adding features is a slippery
         | slope...
        
       | o-__-o wrote:
       | For those looking for a DIY solution, ImageMagick is the tool
       | 
       | https://legacy.imagemagick.org/Usage/warping/
        
         | NearAP wrote:
         | Thanks for this. Was looking for a tool like this just about 2
         | weeks ago (for flipping and rotating images on the web; I saw
         | [1] but it was for Shopify)
         | 
         | 1. https://apps.shopify.com/flip-and-rotate-product-image
        
         | detritus wrote:
         | ImageMagick's neat, but the steps required to warp and then
         | tenderly shadow and sheen the output of a grab are, in my
         | experience, much better done (initially at least) with a GUI
         | tool. A lot quicker to intuit, test and iterate.
         | 
         | I hate the thing personally[1], but GIMP would likely be a
         | better graphic manipulation suggestion, in this context.
         | 
         | Of course, once you've worked out what you're after, and want
         | to manipulate tens or thousands of images, ImageMagick's your
         | wizard.
         | 
         | .
         | 
         | [1] I'd just download a trial of AffinityPhoto and use that
        
           | tyingq wrote:
           | Paint.Net with the Shape3D and Drop Shadow plugins does
           | pretty well. Definitely some learning curve, but nowhere like
           | GIMP or Photoshop. And free like beer.
        
       | bennyp101 wrote:
       | Ah, it doesn't work on my Firefox :(
       | 
       | > WebGL warning: <Create>: AllowWebgl2:false restricts context
       | creation on this system
       | 
       | Works fine on Chrome though, looks cool - couple of things;
       | 
       | - I found the the scroll to move very strange to use, click and
       | drag would be nicer
       | 
       | - When I changed the blur intensity, it took over the mouse
       | movements and used that to move the image rather than scroll -
       | until I clicked on the image again
        
         | mikaelaast wrote:
         | OP here! Dang it! What OS and version of Firefox are you on, if
         | you don't mind my asking? I hear ya about the scroll, and
         | that's valuable feedback. Are you using an actual mouse or a
         | trackpad?
        
           | bennyp101 wrote:
           | Latest Firefox on Manjaro - pretty sure it's to do with with
           | the graphics driver and Firefox not playing nicely (fine on
           | Chrome) - so I wouldn't worry too much! (There's some webgl
           | config settings I think...)
           | 
           | Using a mouse, so the scrollwheel to move it seemed ... off
           | ... but then changing the blur intensity made it do what I
           | would expect (letting the mouse move the image) so that's all
           | good! :D
        
             | tylermenezes wrote:
             | I'm using the same setup and no problems here! Maybe a
             | problem with open-source graphics drivers? I'm using
             | proprietary.
        
             | mikaelaast wrote:
             | OP: Invaluable feedback. Thank you :)
        
         | dubcanada wrote:
         | I am guessing this has something to do with your OS or gfx card
         | more then your Firefox. It seems the error is most likely due
         | to something stopping WebGL initialization on your Firefox.
         | 
         | On a brand new installation of FF dev on Windows it works.
        
           | bennyp101 wrote:
           | Yea, pretty sure theres some webgl config settings that I
           | need to tweak - works fine in Chrome, I just use that as
           | fallback in case something doesn't work in FF.
        
       | darsoli wrote:
       | Is there only one transform option, or could you offer several?
       | That might be a good way of satisfying those who want a very
       | fancy looking image to others who want specific functionality
       | (magnify certain portions of a window, etc).
        
       | hahamrfunnyguy wrote:
       | Pretty neat. What are some intended uses case for something like
       | this?
       | 
       | I've created similar content for a hero image before, but outside
       | of that or perhaps as part of a video I am not sure how I would
       | use this.
        
         | neodymiumphish wrote:
         | Yeah, this is my take as well. I plan on doing TryHackMe/CTF
         | write-ups on GitHub/Medium/etc, but there's no way I would be
         | using this at that price range for something like that, where
         | it's maybe 3 images per post and one or two posts per month.
         | Maybe I can get by with the free offering, though, but I'd like
         | to make the screengrabs a bit more legible.
        
           | pg5 wrote:
           | You could do single window screenshots and then use GIMP with
           | some drop shadows.
        
           | mikaelaast wrote:
           | OP here: That's <$1 per image :) I'd venture to say that's a
           | good deal, any way you slice it.
        
       ___________________________________________________________________
       (page generated 2021-02-10 23:02 UTC)