15 ms·

Show HN: Screely – Instantly turn screenshots into beautiful images

121 points by 0verAchiever 8y ago

0verAchiever 8y ago
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!
- sarabande 8y ago
  Cool product! Mind sharing what kind of deployment architecture you used? I'm curious what beginning programmers go to for such things.
  - 0verAchiever 8y ago
    The site runs on Netlify. I love it! Easy to setup, add https and offers deploying from the command line right away.
- curiousigor 8y ago
  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.
  - 0verAchiever 8y ago
    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!
    - curiousigor 8y ago
      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.
- dingaling 8y ago
  > 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?!
  - 0verAchiever 8y ago
    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.
perk 8y ago
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!
- 0verAchiever 8y ago
  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?
  - troydavis 8y ago
    Maybe “Convert,” like “Convert a screenshot”
  - boaticus 8y ago
    Yeah, I think “Select Your Screenshot” or “Choose Your Screenshot” would be great options.
  - AdamJacobMuller 8y ago
    "Upgrade your screenshot"
  - naikrovek 8y ago
    "Provide", "Select", "Choose", "Pick"... Anything but "Upload"
- natch 8y ago
  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?
  - 0verAchiever 8y ago
    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 ;)
perk 8y ago
What about «Select your Screenshot»?
- perk 8y ago
  Gah, my prev comment was placed wrong (fat fingers on the phone)
- deleted 8y ago
  [deleted]
danenania 8y ago
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 https://www.envkey.com
- 0verAchiever 8y ago
  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.
leetbulb 8y ago
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 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.
- 0verAchiever 8y ago
  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.
jmarcher 8y ago
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://jmartin.ca/screenshot-chrome/ https://chrome.google.com/webstore/detail/standardized-screenshot/pabdhaakclnechgfhmnhkcbmjobeoope https://chrome.google.com/webstore/detail/standardized-scree...
- rahimnathwani 8y ago
  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)'
kroltan 8y ago
Windows does that natively, with Alt+PrintScreen. Some Linux distros also support that out of the box.
- adtac 8y ago
  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.
  - kroltan 8y ago
    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.
kuczmama 8y ago
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/61a672cfd4a83c1bac075d69847cd757/screenshot/41007/original.png https://s3.amazonaws.com/shopify-app-store/61a672cfd4a83c1ba...
- 0verAchiever 8y ago
  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.
slig 8y ago
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.
- 0verAchiever 8y ago
  Do you mean something like this? https://aws.amazon.com/blogs/aws/aws-iot-1-click-use-simple-devices-to-trigger-lambda-functions/ https://aws.amazon.com/blogs/aws/aws-iot-1-click-use-simple-... The solid black border around the image?
  - slig 8y ago
    No, I mean the effect shown on these https://aws.amazon.com/blogs/aws/amazon-aurora-backtrack-turn-back-time/ https://aws.amazon.com/blogs/aws/amazon-aurora-backtrack-tur... notice the effect can appear on any and every border.
Mandatum 8y ago
I don't see any fake window? Has that been disabled?
- 0verAchiever 8y ago
  It has definitely not been disabled! Could you tell me what browser and OS you are using?
  - genezeta 8y ago
    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.
    - 0verAchiever 8y ago
      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?
      - genezeta 8y ago
        Yes. It works now :)
        0verAchiever 8y ago
        Good to hear! :D
dsnuh 8y ago
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.
- 0verAchiever 8y ago
  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.
riquito 8y ago
Congratulations on the release. In "Coming Soon", do the lines with strikethrough mean that the feature has been implemented or removed from the plans?
- 0verAchiever 8y ago
  Thank you! The strikethrough means the feature has been implemented and I'm working on the next one.
  - pronoiac 8y ago
    You could add "(done!)" after those, perhaps in a different color.
  - oneeyedpigeon 8y ago
    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!)
archagon 8y ago
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.)
- yoshyosh 8y ago
  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.
- curiousigor 8y ago
  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...
- 0verAchiever 8y ago
  >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.
deleted 8y ago
[deleted]
basseq 8y ago
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/ https://snag.gy/) does this well.
- 0verAchiever 8y ago
  This has been requested a lot after launching so will work in adding this in the future. Thanks for your feedback!
code_duck 8y ago
I thought this meant the opposite – I often take screenshots on my phone and wish to trim the screen decorations before sharing.
- deleted 8y ago
  [deleted]
Twisell 8y ago
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...
- hartator 8y ago
  That’s oddly specific, I am sure you have 100x better way to harvest passwords. Like run a free proxy server.
  - Twisell 8y ago
    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.
- Jleagle 8y ago
  They say nothing is sent to the server, and why lie when it's so easy to check if they do or not.
  - oneeyedpigeon 8y ago
    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.
null0pointer 8y ago
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.
- cygned 8y ago
  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.
  - sarreph 8y ago
    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.
- croon 8y ago
  Alt+PrintScrn on Windows, takes the focused window and no extra shadows.
  - Jaruzel 8y ago
    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!
- deadcoder0904 8y ago
  Not everyone uses Mac & some people prefer to have better looking screenshots from their Windows PCs or Linux Distros :)
- deleted 8y ago
  [deleted]
- Vinnl 8y ago
ebj73 8y ago
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.
gbajson 8y ago
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?
- ebj73 8y ago
  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.
- oneeyedpigeon 8y ago
  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/ https://www.sublimetext.com/
adrow 8y ago
Have you thought about integrating with Sharex?
- 0verAchiever 8y ago
  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!
kowdermeister 8y ago
Fancy feature request: Let me change the OS to even retro ones, like Win95 or OS/2 :)
fb03 8y ago
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.
- Jaruzel 8y ago
  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.
ktpsns 8y ago
Am I the only one who prefers the "naked" screenshot (https://www.screely.com/img/before3.png https://www.screely.com/img/before3.png) over the one with gimmicks? (https://www.screely.com/img/after3.png 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.
mcintyre1994 8y ago
This is a really cool use of canvas, nice! :)
- 0verAchiever 8y ago
  Thank you. It's been fun learning about <canvas> and doing everything client-side!

121 points by 0verAchiever 8y ago

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!

sarabande 8y ago
Cool product! Mind sharing what kind of deployment architecture you used? I'm curious what beginning programmers go to for such things.
- 0verAchiever 8y ago
  The site runs on Netlify. I love it! Easy to setup, add https and offers deploying from the command line right away.
curiousigor 8y ago
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.
- 0verAchiever 8y ago
  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!
  - curiousigor 8y ago
    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.
dingaling 8y ago
> 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?!
- 0verAchiever 8y ago
  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.

perk 8y ago

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!

0verAchiever 8y ago
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?
- troydavis 8y ago
  Maybe “Convert,” like “Convert a screenshot”
- boaticus 8y ago
  Yeah, I think “Select Your Screenshot” or “Choose Your Screenshot” would be great options.
- AdamJacobMuller 8y ago
  "Upgrade your screenshot"
- naikrovek 8y ago
  "Provide", "Select", "Choose", "Pick"... Anything but "Upload"
natch 8y ago
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?
- 0verAchiever 8y ago
  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 ;)

perk 8y ago

What about «Select your Screenshot»?

perk 8y ago
Gah, my prev comment was placed wrong (fat fingers on the phone)
deleted 8y ago
[deleted]

danenania 8y ago

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 https://www.envkey.com

0verAchiever 8y ago
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.

leetbulb 8y ago

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

0verAchiever 8y ago
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.

jmarcher 8y ago

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://jmartin.ca/screenshot-chrome/ https://chrome.google.com/webstore/detail/standardized-screenshot/pabdhaakclnechgfhmnhkcbmjobeoope https://chrome.google.com/webstore/detail/standardized-scree...

rahimnathwani 8y ago
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)'

kroltan 8y ago

Windows does that natively, with Alt+PrintScreen. Some Linux distros also support that out of the box.

adtac 8y ago
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.
- kroltan 8y ago
  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.

kuczmama 8y ago

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/61a672cfd4a83c1bac075d69847cd757/screenshot/41007/original.png https://s3.amazonaws.com/shopify-app-store/61a672cfd4a83c1ba...

0verAchiever 8y ago
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.

slig 8y ago

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.

0verAchiever 8y ago
Do you mean something like this? https://aws.amazon.com/blogs/aws/aws-iot-1-click-use-simple-devices-to-trigger-lambda-functions/ https://aws.amazon.com/blogs/aws/aws-iot-1-click-use-simple-... The solid black border around the image?
- slig 8y ago
  No, I mean the effect shown on these https://aws.amazon.com/blogs/aws/amazon-aurora-backtrack-turn-back-time/ https://aws.amazon.com/blogs/aws/amazon-aurora-backtrack-tur... notice the effect can appear on any and every border.

Mandatum 8y ago

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

0verAchiever 8y ago
It has definitely not been disabled! Could you tell me what browser and OS you are using?
- genezeta 8y ago
  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.
  - 0verAchiever 8y ago
    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?
    - genezeta 8y ago
      Yes. It works now :)
      - 0verAchiever 8y ago
        Good to hear! :D

dsnuh 8y ago

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.

0verAchiever 8y ago
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.

riquito 8y ago

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

0verAchiever 8y ago
Thank you! The strikethrough means the feature has been implemented and I'm working on the next one.
- pronoiac 8y ago
  You could add "(done!)" after those, perhaps in a different color.
- oneeyedpigeon 8y ago
  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!)

archagon 8y ago

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

yoshyosh 8y ago
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.
curiousigor 8y ago
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...
0verAchiever 8y ago
>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.

deleted 8y ago

[deleted]

basseq 8y ago

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/ https://snag.gy/) does this well.

0verAchiever 8y ago
This has been requested a lot after launching so will work in adding this in the future. Thanks for your feedback!

code_duck 8y ago

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

deleted 8y ago
[deleted]

Twisell 8y ago

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

hartator 8y ago
That’s oddly specific, I am sure you have 100x better way to harvest passwords. Like run a free proxy server.
- Twisell 8y ago
  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.
Jleagle 8y ago
They say nothing is sent to the server, and why lie when it's so easy to check if they do or not.
- oneeyedpigeon 8y ago
  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.

null0pointer 8y ago

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.

cygned 8y ago
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.
- sarreph 8y ago
  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.
croon 8y ago
Alt+PrintScrn on Windows, takes the focused window and no extra shadows.
- Jaruzel 8y ago
  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!
deadcoder0904 8y ago
Not everyone uses Mac & some people prefer to have better looking screenshots from their Windows PCs or Linux Distros :)
deleted 8y ago
[deleted]
Vinnl 8y ago

ebj73 8y ago

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.

gbajson 8y ago

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?

ebj73 8y ago
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.
oneeyedpigeon 8y ago
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/ https://www.sublimetext.com/

adrow 8y ago

Have you thought about integrating with Sharex?

0verAchiever 8y ago
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!

kowdermeister 8y ago

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

fb03 8y ago

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.

Jaruzel 8y ago
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.

ktpsns 8y ago

Am I the only one who prefers the "naked" screenshot (https://www.screely.com/img/before3.png https://www.screely.com/img/before3.png) over the one with gimmicks? (https://www.screely.com/img/after3.png 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.

mcintyre1994 8y ago

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

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