How do you grab screenshots of your web app for your landing/marketing pages?
Hey everyone,
Just wondering, how do you grab screenshots of your web app for your landing/marketing pages?
I can think of 3 ways:
- Using a chrome extension like Awesome Screenshot
- Using the computer's snip tool (e.g. Windows snipping tool).
- Using the computer's print screen tool and then crop in an image editing program.
Pros/cons? Any other tools or workflows that are better?
Thanks!
Trending on Indie Hackers
I use and love CleanShot
This looks rad!
Thanks for the recommendation! The app and website look super clean (hence the name, I suppose).
In firefox open dev console, and do this:
:screenshot --file --filename "screenshot.png" --dpr 2 --selector ".element.to.screenshot"
Don't use "selector" if you want the whole page, and you get clean high quality screenshots, than if you would get from any screenshot tool. Play with dpr for even higher quality.
Wow, thanks for sharing. I had no idea! I use chrome instead of firefox, but it looks like chrome dev tools has built in screenshot capabilities too.
I really like the ability to select nodes/elements for grabbing parts of the website. That way I don't have to worry about cropping and I get the exact image that I want. That's awesome! Thanks again!
I just posted this question on Twitter and got some great ideas…
Thanks! Really great ideas. I never even considered making a replica in a design tool like Figma. I particularly like that idea because then it could be exported as an SVG which would be a lot smaller than a hi-res jpg, png or even webp.
I guess the main downside is that a design recreation will definitely take more time than just taking a screen snap. I wonder if there's a tool that can convert part of a web page as an svg image?
Memo to self: need to build a large Twitter following so I can ask these types of questions.
Personally I use SnagIt because I can then easily upload the screenshot into Dropbox/Google Drive.
Cool, hadn't heard of it before. I'll check it out. Thanks!
I usually get by just fine with the in-built snipping tools to initially grab the screenshot but the thing I struggle with is how to put it on the page (or marketing materials) in an impactful way that doesn't just look like a boring-ass screenshot 😅
To help with that I've started scratching my own itch and am currently building: https://slantt.co
Hey Dave! Wrap.so might be good fit for your marketing materials!
Nice subtle promo 😉
I think your app fits a well-defined need, I know products already exist specifically for iOS mockups and such. As a bit of feedback, something looks off in your iOS screenshots (third image on the homepage)... the proportions or angle or something looks a bit funny to me. Anyway, best of luck to you!
Gotta get the plugs in where you can, amirite! Thanks for the feedback too.
Absolutely 👍
Hey there,
I asked on Reddit a couple of months ago, if the results can help you out -> https://www.reddit.com/r/ProductManagement/comments/pco2ec/what_is_your_favorite_screenshot_tool/
Awesome, thanks!
I take a screenshot using the OS's tools (for iOS and macOS, specifically) and then load it into Inkscape to add text and a background.
I use Inkscape because it's free, but I wish it wasn't so darn slow on Macs. Once you have a few elements in a canvas, dragging and dropping feels like moving through molasses.
Thanks, makes sense. I tried Inkscape a long time ago and I thought it was terrible. I went with Affinity Designer and love it, totally worth the $55 one-time price tag. For my use case, it's just as good as Adobe Illustrator if not better.
Inkscape has a lot of idiosyncrasies. It's slow as hell, but I'm really quick at using it now, so it's hard for me to move away. I can whip up icons and artwork really quickly with it since I know all the keyboard shortcuts and what all the tools do. If anything, I should just start running it on a Windows machine since it works faster there.
Yeah, I get it. Learning all the complexities of an app is a really strong lock-in. For me, moving from Adobe Illustrator to Affinity Designer took a lot of effort and investment so I don't blame you.
That's awesome you were able to move to AD. $55 isn't bad at all.
Once you get used to tools and are super fast using them, it's kind of a super power and eliminates a lot of guesswork in your workflows.
I do #3 and then use Cleanmock (https://cleanmock.com/) to make it look nice and professional. I usually edit the image in Figma first so I have the appropriate size so it doesn't get stretched out once I upload to Cleanmock.
Thanks for sharing. Any benefit that cleanmock has over doing mockups directly in Figma? I would imagine there are plenty of mockup templates for Figma available and you would have more control doing it that way.
Yeah you’re right. Honestly it’s just a bad habit I need to unlearn probably haha. I used to have mockup librairies (like Angle) in Sketch which I found a bit janky and then I found Cleanmock which was way easier to use and haven’t tried doing it all in Figma. Maybe I should tho
Just to add one other option, I just added a Figma plugin to MockRocket.io, which might help here!
Awesome, I'll check it out!
Well, sometimes easier is better and usually done is better than perfect!
Hey,
Screely is my favorite tool, it is also available in chrome extension. Beautiful simple screenshots of your page.
Looks good, I'll check it out. Thanks!
Hey Daniel!
If you like Screely, you might enjoy wrap.so (shameless plug). It's also a browser extension for capturing beautiful product screenshots. Would love to know what you think!
Hey Steven.
I built a browser extension called wrap.so for this exact use case! It lets you capture and edit beautiful, shareable product screenshots.
Let me know if this is what you're after.
Looks neat, but your signup isn't working. After I enter my information, it just shows 3 waving dots on the submit button indefinitely. 😢
That's really strange! Can I ask what browser you're using? As well, did you try to sign up with email or Google?
Thanks!
I was using email. I just went back to your site and it looks like the account was created and I can log in. I think it's just that the account creation form doesn't automatically log the user in after the account is created, and it just stays on the form with the 3 bouncing dots.
Thanks a lot for sharing that context! It looks like there's an analytics script hanging.
Are you using Brave as a browser by any chance?
I was using Chrome with uBlock Origin which looks like it's blocking Hotjar and Plausible on your site.
Great question and awesome suggestions in comments. Thanks a lot Steven.
👍
Also consider a product illustration like https://www.youtube.com/watch?v=1HDR-AV4ODU just another option to think about
Thanks for sharing this.
I have to say though, I don't really understand why companies do product illustrations that approximate the UI instead of showing the actual UI. I've always been weirded out by that. I want to see the real thing! Not a vectorized abstraction.
Like, if you were buying a car and visited an auto website, wouldn't it be strange to see a vector illustration of the car on the landing page instead of a photo?
Unless you severely crop your screenshots, I find they just don’t work as well as I’d hope.
They aren’t responsive, especially on mobile. It can be hard to focus on what’s important and leave the user squinting and trying to read the details.
Product illustrations look great no matter the size, give you full control over what to highlight, and are mobile friendly—all while keeping the look and feel of your original app.
Personally, I like when apps let me try a product without forcing me to login. That way, I can explore the UI all I want without having to commit to it.
Interesting, I didn't think about responsive/mobile. Thanks for your persepctive.
I wonder if anyone has done an a/b test on trial-to-paid conversion rates with and without forced login. I could see it going either way. No login would create a larger funnel and more trials. But login would have more qualified users and also enable email marketing to increase the conversion rate.
i actually simply used the mac internal video recording tool to put videos as gifs on my pagey hope this doesnt look unprofessional. i think its the worst looking part of my page, and i also dont know if this particular section is even needed. https://einladung.app any feedback?
I do think they look kinda small. I'm not animating anything right now, but I think I usually see companies use .mp4 files rather than gifs for animations.
Hope this site https://www.tricksehow.com/ give you your desired solution.
This comment was deleted 3 years ago.
Thanks!