5 ms·

Show HN: Screenshot.rocks – Create browser mockups from screenshots

69 points by dignite 6y ago

ivarojha 6y ago
Think I misunderstood the description. Correct me if I'm wrong, with this we can add nice looking browser toolbar on top of the screenshot, right? I was under the impression that once the screenshot is uploaded, the elements in the page are extracted and can be moved around i.e. we can play with the buttons, form fields, texts or any identifiable element that can be separated by its boundary.
- omk 6y ago
  Thats two of us.
yodon 6y ago
You made a tool that makes screenshots but you don't have a single screenshot on the site and you have an unviewable purple rectangle as the only "image" on the git repo? I don't get your logic.
- kylebenzle 6y ago
  The project makes no sense to me. So I take a screen shot of just the web page, then use a tool to make it look like I took a screenshot of the browser too? I think it is official, HN has gone to the dogs
  - andrewl 6y ago
    I'm not seeing the value of this either. But I don't think that one person submitting one not very useful tool means that Hacker News itself is going to the dogs.
    - pintxo 6y ago
      Taking a screenshot of your actual browser means you either reveal details about your personal preferences (bookmarks, plugins, etc) or you have to use a factory standard browser. Also this way, you cannot just easily choose the used browser, but also the device, think smartphone, tablet, android vs apple...
sixhobbits 6y ago
I use BrowserFrame[0] fairly often for creating tutorial screenshots etc. This looks very similar. Was it inspired by that? [0] https://browserframe.com/ https://browserframe.com/
- yodon 6y ago
  Do any of these tools support gif animated screenshots?
  - alyssaxuu 6y ago
    Self-plug but https://animockup.com https://animockup.com does :)
    - yodon 6y ago
      Super - this will certainly come in handy at some point, though I was primarily looking for browser screenshots at the moment (which I think your animockup doesn't do today)
      - alyssaxuu 6y ago
        Awesome. And indeed, I do plan on adding more mockups + the option for people to make their own (selecting the area where the video would be placed). It seems like there is some demand.
- Jetroid 6y ago
  I don't think it's an original idea. I use Screely [1] for these purposes. The Web Archive seems to imply that BrowserFrame is about a year older than Screely, though. [1] https://www.screely.com/ https://www.screely.com/
onion-soup 6y ago
So an entire tool to add “slick” macos browser top bar? Umm, thanks I guess... lol
- 8organicbits 6y ago
  Do one thing and do it well. Seems useful and I appreciate the simplicity.
chrismorgan 6y ago
How am I supposed to paste? I put an image on my clipboard, and so far all I’ve got by focusing all the focusable things and pressing Ctrl+V is the image filling the fake address bar. My attempts at dropping images (from the same browser) are also failing to do anything. Firefox, Windows.
amelius 6y ago
Everybody is doing screenshots the same way these days. The only options missing are: show Apple laptop and cafe latte next to the laptop.
elwell 6y ago
Nice start; what are you plans for future (killer) features?
httpsterio 6y ago
For all commenters who do not see the value, these types of images are often used in marketing. If you share a screenshot without a device, it doesn't really look that good or marketable. The context and frame around the screenshot simply looks more professional and stands out better. Toi could always throw the screenshot into figma and use a plugin to generate the images but this seems much simpler. As one commenter said, do one thing well and this seems to do it.
butz 6y ago
Would be nice to see more browser and operating system variations. Don't forget mobile browsers.
namanaggarwal 6y ago
Don't ne disheartened by the comments asking the usefulness of this. I have been asked by lot of product guys to include browser in the screenshot so it looks better in their presentation.
frequentnapper 6y ago
It says Drop, paste, or click to upload an image, but pasting doesn't do anything.
cybernabjo 6y ago
Very nice, maybe there should be a way to change the border color.
imvetri 6y ago
It's nice. Im curious to know how does it work?
steventey 6y ago
This is incredible! Love the simplicity in the UX design. Gonna post it on Twitter in a bit - would love to tag you but I can't find your Twitter. One suggestion - a way for people to share the link directly or just copy the PNG file without downloading it will reduce friction for people who don't really have space on their devices. Great job, Dave!
erklik 6y ago
I have possibly found a "bug". Not sure. Some websites, especially that take a while to load simply won't have the complete screenshot. Here's an example, the below link will only have the header in the screenshot without the header image : http://www.tusifahmad.com/ http://www.tusifahmad.com/

69 points by dignite 6y ago

Think I misunderstood the description. Correct me if I'm wrong, with this we can add nice looking browser toolbar on top of the screenshot, right? I was under the impression that once the screenshot is uploaded, the elements in the page are extracted and can be moved around i.e. we can play with the buttons, form fields, texts or any identifiable element that can be separated by its boundary.

omk 6y ago
Thats two of us.

yodon 6y ago

You made a tool that makes screenshots but you don't have a single screenshot on the site and you have an unviewable purple rectangle as the only "image" on the git repo? I don't get your logic.

kylebenzle 6y ago
The project makes no sense to me. So I take a screen shot of just the web page, then use a tool to make it look like I took a screenshot of the browser too? I think it is official, HN has gone to the dogs
- andrewl 6y ago
  I'm not seeing the value of this either. But I don't think that one person submitting one not very useful tool means that Hacker News itself is going to the dogs.
  - pintxo 6y ago
    Taking a screenshot of your actual browser means you either reveal details about your personal preferences (bookmarks, plugins, etc) or you have to use a factory standard browser. Also this way, you cannot just easily choose the used browser, but also the device, think smartphone, tablet, android vs apple...

sixhobbits 6y ago

I use BrowserFrame[0] fairly often for creating tutorial screenshots etc. This looks very similar. Was it inspired by that? [0] https://browserframe.com/ https://browserframe.com/

yodon 6y ago
Do any of these tools support gif animated screenshots?
- alyssaxuu 6y ago
  Self-plug but https://animockup.com https://animockup.com does :)
  - yodon 6y ago
    Super - this will certainly come in handy at some point, though I was primarily looking for browser screenshots at the moment (which I think your animockup doesn't do today)
    - alyssaxuu 6y ago
      Awesome. And indeed, I do plan on adding more mockups + the option for people to make their own (selecting the area where the video would be placed). It seems like there is some demand.
Jetroid 6y ago
I don't think it's an original idea. I use Screely [1] for these purposes. The Web Archive seems to imply that BrowserFrame is about a year older than Screely, though. [1] https://www.screely.com/ https://www.screely.com/

onion-soup 6y ago

So an entire tool to add “slick” macos browser top bar? Umm, thanks I guess... lol

8organicbits 6y ago
Do one thing and do it well. Seems useful and I appreciate the simplicity.

chrismorgan 6y ago

How am I supposed to paste? I put an image on my clipboard, and so far all I’ve got by focusing all the focusable things and pressing Ctrl+V is the image filling the fake address bar. My attempts at dropping images (from the same browser) are also failing to do anything. Firefox, Windows.

amelius 6y ago

Everybody is doing screenshots the same way these days. The only options missing are: show Apple laptop and cafe latte next to the laptop.

elwell 6y ago

Nice start; what are you plans for future (killer) features?

httpsterio 6y ago

For all commenters who do not see the value, these types of images are often used in marketing. If you share a screenshot without a device, it doesn't really look that good or marketable. The context and frame around the screenshot simply looks more professional and stands out better. Toi could always throw the screenshot into figma and use a plugin to generate the images but this seems much simpler. As one commenter said, do one thing well and this seems to do it.

butz 6y ago

Would be nice to see more browser and operating system variations. Don't forget mobile browsers.

namanaggarwal 6y ago

Don't ne disheartened by the comments asking the usefulness of this. I have been asked by lot of product guys to include browser in the screenshot so it looks better in their presentation.

frequentnapper 6y ago

It says Drop, paste, or click to upload an image, but pasting doesn't do anything.

cybernabjo 6y ago

Very nice, maybe there should be a way to change the border color.

imvetri 6y ago

It's nice. Im curious to know how does it work?

steventey 6y ago

This is incredible! Love the simplicity in the UX design. Gonna post it on Twitter in a bit - would love to tag you but I can't find your Twitter. One suggestion - a way for people to share the link directly or just copy the PNG file without downloading it will reduce friction for people who don't really have space on their devices. Great job, Dave!

erklik 6y ago

I have possibly found a "bug". Not sure. Some websites, especially that take a while to load simply won't have the complete screenshot. Here's an example, the below link will only have the header in the screenshot without the header image : http://www.tusifahmad.com/ http://www.tusifahmad.com/