Show HN: Screely – Instantly turn screenshots into beautiful images | Hacker News Reader

Show HN: Screely – Instantly turn screenshots into beautiful images

screely.com

121 points0verAchiever78 comments

This looks like a great idea, so good work. Looking forward to seeing how it develops in the future.

Tangentially, though, I'd love to know how such a simple, half-functional, and clearly proof-of-concept site can garner almost a thousand upvotes on ProductHunt?! I've submitted substantially more complex (and finished) products in the past that have only gotten 5-40 upvotes and like 2 comments a pop. Is it a matter of getting an influencer to post it for you? Does wip.chat help with this? I find it utterly bizarre.

(Yes, I'm jelly.)

>Tangentially, though, I'd love to know how such a simple, half-functional, and clearly proof-of-concept site can garner almost a thousand upvotes on ProductHunt?! I've submitted substantially more complex (and finished) products in the past that have only gotten 5-40 upvotes and like 2 comments a pop.

As the others have stated, complexity does not equal value to the user. I think that the simplicity is exactly what people like about it. It doesn't try to do everything, it only does one thing and that makes it easy to use and easy to understand the value proposition.

People on PH and HN are very tolerant of MVP's and understand they won't function perfectly and not have many features. It only does one thing and it does it well in 95% of the cases.

>Is it a matter of getting an influencer to post it for you? Does wip.chat help with this? I find it utterly bizarre.

There is no secret to doing well during your launch (or at least, not that I know of), but it's a combination of lots of smaller variables (timing, luck, optimizing your post and more). As you can see I hunted Screely myself from a relatively new account so I don't think this plays a role.

You are not allowed to ask for upvotes so wip.chat does not help in this way. There are plenty of products that came out of wip.chat that did not do well at all.

However, I think there is a huge amount of value in being part of a community of makers/developers/designers. I have gotten feedback from others during development, they helped me when I got stuck with programming issues and they gave me tips for how I should launch. Wip chat will not magically make your launch do well but it will help you make a product than can do well on it's own.

> I think that the simplicity is exactly what people like about it.

I totally agree. I know there's a bitchy comment on the PH about it 'not doing enough', but I think that's ridiculous: your tool is designed to solve one specific task, and it appears to do that very well, so please concentrate on small, incremental polish rather than totally changing the nature of it!

There are many factors for your project being a success on PH, but I must agree with @yoshyosh that the most crucial thing is having a product that caters to the audience on the platform.

I've posted a product on PH at the start of the year and basically got the same response as Screely. It's a fairly simple app that's catered to a specific audience (SEO, web developers...), so the response was more than a thousand upvotes and a lot of traction on other platforms as well.

I think it doesn't matter if the project is complex or even completely finished, as long as it solves a specific problem of the audience you are presenting it to, it will get traction. Sometimes the problem is the right way to present your project to the audience though, more so with complex projects...

I think it most likely has to do with catering to the PH audience and what they may like. HN, DN, and other sites work the same way, most of the time your product/content has to cater to that audience's interests. It can also depend on when you posted, since new products go live on the homepage after midnight.

it may be just sheer luck. Or there may be a ring of influencers effectively rigging the votes. But I guess luck explains it: there are thousands of dumb products like this that don't get many votes also.

I regularly want to share what I've worked on with others on Twitter or Slack/Telegram.

However, sharing a simple screenshot always was a bit too bland for my taste... I wanted to make it look better. Give it a background, put it in a fake window with some shadows etc.

You can do this in Photoshop or Sketch with some templates but that takes a lot of time if you just quickly want to share something with friends or coworkers.

That's why I build Screely. With Screely you can instantly generate a beautiful image from a simple screenshot without needing to dive into Photoshop or Sketch first.

Upload an image, choose your background color and hit that download button so you can share it with others.

I have many more features I want to add like gradient backgrounds, ability to generate an image without the fake window, adjusting the padding and size and much more customization options. But I first wanted to ship the MVP and get some feedback from others and hear their opinions.

PS. I only started to learn programming pretty recently so if you find a bug or something weird. Let me know and I'll try to fix it as fast as possible!

> I wanted to make it look better. Give it a background, put it in a fake window with some shadows etc.

Interesting, I'm the complete opposite. When I make or receive a screenshot I want to crop down to the focal point.

One of the best IT investments ${BIGCORP} made when I worked for them was to install SnagIt on every user's machine. Suddenly their documents had neat, inline cropped screenshots instead of huge one-per-page full-screen dumps. Saving in storage costs alone must have paid for that deployment.

And our bug reports became much easier to triage since the users just included an image of the problematic field, instead of the whole screen with a comment 'see error'. Where?!

Reporting bugs and sharing designs on social media or in chat with friends or co-workers are very different use cases though. Screely is aimed at making the latter easier, SnagIt fixed the first one for you.

Congrats on the launch!

I love apps like these. It's great to see what someone who just started to learn to code can achieve and how well it is accepted by the community. I mean, these simple niche apps have sometimes so much impact to a specific community, because they're solving a specific problem that people forgot (or didn't think) to address.

Thank you, I'm glad to hear you like it!

I'm happy it was received so well because I had a lot of doubts when I launched it. There are still bugs to be fixed and features I want to add but I first wanted to see the response to the MVP before I spent months developing this further.

I suspect the simplicity is what people like about it so much. It only does one thing and has one button so it's easy to use and also very easy to try.

Hopefully this inspires others that also recently started coding that you really don't need to build a super complex product to do well!

That were exactly my thoughts when I did a similarly simple project this year. No need for the product to be perfect or completely finished if you're putting it out there for free (in my opinion).

Also, there will always be room for improvement and people wo won't like it or demand features, so remember to keep your head up even in those situations and be proud of what you've accomplished.

Cool product! Mind sharing what kind of deployment architecture you used? I'm curious what beginning programmers go to for such things.

The site runs on Netlify. I love it!

Easy to setup, add https and offers deploying from the command line right away.

On mac: <CMD> + <Shift> + <4> then pressing <space> will allow you to select a window for screenshot which includes the window border, title, and transparent shadow.

Hold <option> while clickling the window to remove the shadow.

Hold <control> while clicking to skip the desktop and copy it to the clipboard directly.

Never ceases to amaze me the options (no pun intended) that OS X developers put hidden in the simplest of system apps. Makes them so versatile.

I remember as a stupid middle-schooler thinking I was being cool showing everyone how many <option>/<control>/<cmd> key combos there are to take the perfect PhotoBooth shot.

PSA: Reminder – option click everything for nice surprises.

On Ubuntu: holding <Alt> while pressing <PrtScr> will limit the screenshot to the current window.

(Other tips: holding <Ctrl> will copy it to your clipboard, and holding <Shift> will allow you to select a region.)

Alt+PrintScrn on Windows, takes the focused window and no extra shadows.

I recently discovered Windows+Shift+S to take a shot of an arbitrary area of my Screen. Now I use it ALL the time. It's practically the only new feature in Windows 10 worth having!

Not everyone uses Mac & some people prefer to have better looking screenshots from their Windows PCs or Linux Distros :)

Looks useful, congrats on the launch!. One thing, since the page says you're not uploading images to your server(s) - you might want to rename the "Upload the screenshot" button to something that reflects that. Good luck!

Hadn't even thought about that!

Replacing it by something like 'insert' does not feel accurate either but I'm not a native english speaker. Is there any synonym to 'upload' or 'insert' that would make more sense in this case and make it clear that everything is handled client-side?

Yeah, I think “Select Your Screenshot” or “Choose Your Screenshot” would be great options.

Maybe “Convert,” like “Convert a screenshot”

"Provide", "Select", "Choose", "Pick"... Anything but "Upload"

"Upgrade your screenshot"

How are they not uploading the image?

Maybe they mean they are not storing it permanently on disk. The upload is still happening, right? Or is it all being done in browser with JavaScript?

The last one:)

I'm using client-side JS to create the image on a HTML canvas element and turning that DOM element into an image. Server-side rendering would be easier since you don't have to deal with browser compatibility issues but I think there are enough websites collecting whatever data they can from you. No need for more ;)

Cool, thanks for clarifying.

I might be old school but it always seems very dubious for me to rely on a web server controled by who the f... know for such basic task that can be done more efficiently offline.

And also why is it free? Can we be sure the service won’t store every image send? Would be a nice way to gather free real word training example for a neural network so it can learn what frame contain nothing useful and what frame contain login/password. Because we can be sure that someone WILL send out login/password while network protocol will gladly be giving their good old IP adresse along...

That’s oddly specific, I am sure you have 100x better way to harvest passwords. Like run a free proxy server.

It depends on what is your target. No enterprise will tolerate that their employees set up a proxy (and even so clever employees are not the target).

However I’ve seen a lot of people using free web based tool to replace pretty basic dumb stuff such as assembling pdf.

Would’nt it be nice for a concurrent company to buy all pdf assembled by your employees using this web service based on company IP?

Of course nerd might find out that pdf is uploaded (most probably however he will use offline FOSS solution because he know better). But the basic employee that use this « because someone send them a link to this awesome tool » will never even thought of it...

I have no proof this scheme is used by scammers, but it seems highly plausible to me.

They say nothing is sent to the server, and why lie when it's so easy to check if they do or not.

It isn't for a typical user (although they probably won't care, even if they should). It would be nice if browser developers started thinking about this if — as I hope — more functionality gets pushed to the client-side, like this.

OSX/macOS has already been doing this for me for quite some time. I always try to frame my screenshots to look fairly "presentable." E.g.: https://i.imgur.com/rozu1Do.png

Edit: I figure my comment probably comes off a bit negative. I think this is a cool service and I would likely use it if there were an API available. Props to coming up with a neat little app to develop and bring to the public...simple ideas like this are hard to come by and stick to.

Thanks for your clarification. MacOS might solve your need for making screenshots look presentable but there are still many situations where it doesn't solve the problem (e.g. only showing a small section of a page instead of the full window, people using Windows/Ubuntu or mobile devices). That's what I am aiming to solve with Screely.

I also want to add many more features to Screely that MacOS can't do such as gradient backgrounds, custom image backgrounds with company logo, tweet this image and much more.

This is great! I've wasted so much time in the past doing this manually in Sketch.

We're planning to release some major features for EnvKey[1] over the next few weeks, and so we'll be putting a lot of new screenshots up on the marketing site. I look forward to giving it a run through at that point and hopefully saving lots of time. I'm happy to give feedback on the process. Congrats on making something useful!

1 - https://www.envkey.com

Thank you, I'm glad to like it!

Looking forward to seeing the new screenshots. If you run into any problems or have feedback, just send me a message.

I am trying to figure out what's the value of this additional fake window around the screenshot. Could you describe any valid use case, please?

I was thinking the same, but I think it's mainly for prototyping. You have a design that will eventually end up inside a window frame, and you want to show how it might look, before it's actually implemented. I hope that's the purpose.

I think just putting it in context is the key part. Many products adopt this kind of style for their screenshots (see sublimetext [1], for example). TBH, in that case, I think it's most useful when they accurately reflect reality so you can understand whether it's a native app versus a web app, or whether it's a mac app or a windows app, etc. Still, even just an indicator that 'this is a screenshot' is a useful design element, even if it might already seem as obvious as can be.

[1] https://www.sublimetext.com/

Am I the only one who prefers the "naked" screenshot (https://www.screely.com/img/before3.png) over the one with gimmicks? (https://www.screely.com/img/after3.png)

The gimmicks blow up the file size (especially when/if they add an alpha channel only for the shadow) and don't look better in every scenario.

I think such decoration should be applied when neccessary, for instance with CSS within a website.

This is really awesome! I will definitely use this. Congratulations on the launch :D Do you plan on allowing someone to add a text overlay in the future? That would really help. I really want to make screenshots that look kind of like this: https://s3.amazonaws.com/shopify-app-store/61a672cfd4a83c1ba...

Thank you, glad to hear you will use it!

There are no plans for adding text overlay in the immediate future but I will keep your suggestion in mind for future development.

I thought this meant the opposite – I often take screenshots on my phone and wish to trim the screen decorations before sharing.

At those "done feature list" you should add:

- tray icon enabled native app for all big three

Nothing would make this stick faster than just having to press a key combo (like we already do in Windows with alt+prtscr) and have it pop an image link in front of me to paste/use wherever I want.

The trouble with native apps is that unless you open source, no-one trusts them anymore.

I have 100's of small tools a bit like Screenly et al., that I have written over the years for Windows, but because I wont open source them, people just wont download them, so there's no point releasing.

We're in a really sad place now software-wise, where all the little developers (like me) can no longer release freeware or shareware without someone accusing it of being riddled with malware.

Nice work, and congratulations! I have a suggestion for you: create a Slack plugin, so you can type /screely and then a URL (or even cooler, if you could drag and drop) and it returns a converted image you can choose to post, a la /gifs plugin.

Thank you! Have gotten a couple of similar requests already so it seems like people want to make it easier to integrate this into one's workflow.

If that's a Slack plugin, browser extension or something I don't know yet but I'm definitely going to focus on this area in future development of the product.

Fancy feature request: Let me change the OS to even retro ones, like Win95 or OS/2 :)

Windows does that natively, with Alt+PrintScreen.

Some Linux distros also support that out of the box.

Apologies for the pedantry in advance, but Linux distros probably don't support that. It's the desktop manager / window manager doing that for you.

You are absolutely correct. I actually was going to write WM, but then I realized that it might be incorrect, I didn't actually know if it was the WM or additional software. So I said the distros do it, since it would be inaccurate but not incorrect.

Cool stuff!

I built this much more limited Chrome extension to save our designer's sanity (from frequent requests from marketing) a few years ago. Works well enough.

https://jmartin.ca/screenshot-chrome/ https://chrome.google.com/webstore/detail/standardized-scree...

Thanks. But this doesn't work for me :( Even in incognito mode with no other extensions enabled, I get this error:

"For best results, don’t mouse over the page during capture and set “Actual Size” from the “View” menu. Your finished image will open in a new window.

Uh oh, something went wrong! Try reloading the page and running this again."

In case you're interested, I'm running Chrome on Linux. chrome://version says '64.0.3282.186 (Official Build) (64-bit)'

Congratulations on the release.

In "Coming Soon", do the lines with strikethrough mean that the feature has been implemented or removed from the plans?

Thank you!

The strikethrough means the feature has been implemented and I'm working on the next one.

A green tick or similar alongside each item (in addition to the strikethrough, I think) would probably convey positivity less ambiguously. (FWIW, I understood it to mean 'feature has been implemented', but that's clearly not everyone's experience!)

You could add "(done!)" after those, perhaps in a different color.

I first thought that the idea was to lend "fake credibility" to an image, by making it seem like the output from an application.

But I guess the main idea must be prototyping, and to show off how a particular design might look in the end, once implemented as part of an application.

Killer feature of all screenshot webapps: paste. Meaning, I should be able to paste an image on my clipboard to your app and have it generate. Snag.gy (https://snag.gy/) does this well.

This has been requested a lot after launching so will work in adding this in the future.

Thanks for your feedback!

Suggestion: an effect like the one Amazon uses on their blog/docs about AWS. I'm on mobile now, but if you don't know what I'm talking about I'll find an example.

Do you mean something like this? https://aws.amazon.com/blogs/aws/aws-iot-1-click-use-simple-...

The solid black border around the image?

No, I mean the effect shown on these https://aws.amazon.com/blogs/aws/amazon-aurora-backtrack-tur... notice the effect can appear on any and every border.

I don't see any fake window? Has that been disabled?

It has definitely not been disabled! Could you tell me what browser and OS you are using?

Happening here too; on Firefox/Win10.

Something that seems unrelated is that, in your drawWindow function you seem to be assigning an onload handler and then immediately overwriting it with a different onload handler. This is not really the problem, but I mention it just so you know.

Now, the actual problem seems to be there's a long standing bug in Firefox where it won't draw SVG to neither canvas nor Image elements if they don't have a proper width and height set (and it seems it has to be pixel based, a percentage width/height won't work either). I've just tried adding it to the <svg> template string you have in drawWindow and it does seem to solve the problem.

Thank you for letting me know and also looking into it!!

Was able to quickly fix this issue thanks to you! I've just pushed the fix to production so it should be fixed now. Would you mind testing it one more time to check if it works?

Yes. It works now :)

Good to hear! :D

What about «Select your Screenshot»?

Gah, my prev comment was placed wrong (fat fingers on the phone)

Have you thought about integrating with Sharex?

I think we spoke earlier about this on Drift, but just to be sure you get a reply if that was someone else..

I don't have any immediate plan for integrating with Sharex but I am thinking about making a chrome extensions to make it easier to integrate into your workflow. So you can immediately open a new screenshot in Screely.

Will keep your suggestion in mind for future development!

This is a really cool use of canvas, nice! :)

Thank you. It's been fun learning about <canvas> and doing everything client-side!

Reply on news.ycombinator.com