Show HN: Screenshot.rocks – Create browser mockups from screenshots | Hacker News Reader

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

github.com

69 pointsdignite24 comments

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.

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.

Thats two of us.

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.

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

[0] https://browserframe.com/

Do any of these tools support gif animated screenshots?

Self-plug but https://animockup.com does :)

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)

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.

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/

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.

Everybody is doing screenshots the same way these days.

The only options missing are: show Apple laptop and cafe latte next to the laptop.

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/

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!

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.

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

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

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

Do one thing and do it well. Seems useful and I appreciate the simplicity.

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

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

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

Reply on news.ycombinator.com