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