Show HN: Screenstab – A tool to turn screenshots into image assets | Hacker News Reader

Show HN: Screenstab – A tool to turn screenshots into image assets

screenstab.com

142 pointsmikaelaast58 comments

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...

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.

Another feature idea: be able to export videos with "focus pull" effect. I was editing a video earlier this week; would've been great to have a tool like this.

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

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.

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 :-)

OP: I like that idea. And yes, I've noticed your posts. Hej, söta bror!

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.

For those looking for a DIY solution, ImageMagick is the tool

https://legacy.imagemagick.org/Usage/warping/

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

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.

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

The typical 3D rotate using ImageMagick as a shell script: http://www.fmwconcepts.com/imagemagick/rotate3D/index.php

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

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?

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

OP: Invaluable feedback. Thank you :)

I'm using the same setup and no problems here! Maybe a problem with open-source graphics drivers? I'm using proprietary.

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.

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.

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.

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.

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.

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!).

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!

This. So much this. I'm sick and tired of subscriptions for software. The fatigue is real.

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.

OP here: Thanks, and great question! I really like the idea of it being a one-click thing. Adding features is a slippery slope...

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.

OP here: I humbly thank you! Yes. Saving settings as well as batch processing of images are both on my roadmap.

"Before" contains information. "After" is stock photo fluff.

People pay money for "stock photo fluff", as you put it.

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.

This is great concept with a strong execution. Interested to see how the price-point resonates relative to typical frequency of use.

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).

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?

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.

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.

You could do single window screenshots and then use GIMP with some drop shadows.

OP here: That's <$1 per image :) I'd venture to say that's a good deal, any way you slice it.

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.

The risk of horrible moiré comes to mind.

Indeed. There's even an xkcd for it - https://xkcd.com/1814/

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 :)

No idea what this actually does after reading the web site. Is there a gallery of examples or something?

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.

There is an example on the landing page. It transforms, skews and add shadows (+ more probably) to images.

I’d rather pay $100 once and have this on my computer permanently. Any chance of that happening?

Well done, seriously well executed.

The mix of seller, buyer and “you” in the writing makes it hard to follow who’s who sometimes.

Just want to quickly say congrats and awesome idea. Will definitely use in future

OP: Thanks :)

This is cool as heck

OP: <3

Why stab the screen to get beautiful images?

OP here: Finally someone is asking the right questions... I don't know. Naming stuff is hard, and it was late at night.

I think it’s a cool product but the name is not something memorable for me.

The product is very good but after I heard about "expertsexchange" I can't help noticing how URLs can have undesired consequences.

Reply on news.ycombinator.com