/awesome-website-screenshots

:notebook_with_decorative_cover: :books: A curated list of ways to take :sparkles: Awesome Website Screenshots :heart_eyes:

Awesome Website Screenshots Awesome

A curated list of taking Website Screenshots on different devices with different resolutions in different frames.

Contents

Projects

  • Pageres - Capture screenshots of websites in various resolutions. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.
  • Pageres-CLI - Command-line tool for the above project Pageres.
  • BreakShot - Screen capture desktop app for responsive websites. It detects all available resolutions and take screenshots of each one.
  • Screenshot application - Simple screenshot application & web service powered by Express, Redis, node-canvas, palette, and PhantomJS.
  • Screenshot as a Service - Simple screenshot web service powered by Express and PhantomJS.
  • Screenshot Stream - Capture screenshot of a website and return it as a stream.
  • Node Webshot - Webshot provides a simple API for taking webpage screenshots.

Websites

  • PlaceIt - Huge number of device frames are available. Choose any device like Windows Phone, desktop, Samsung mobiles, Mac, iPhone or even smartwatch. Can upload the image or just the URL.
  • Magic Mockups - Same as PlaceIt. Although, the collection of device mockups is not too large, but we can certainly get your required image at this website. Can upload the image or just the URL.
  • Dunnnk - All devices available except Windows Phone mockups. Provides only one option. Only can upload the image, cannot provide the URL.
  • Page2Images - Provides an interface to enter the URL and it generates in 3 frames, i.e, a Tab, a Phone & a Desktop.
  • Frame - Not a huge number of frames as PlaceIt,but allows to crop the image.
  • MockUPhone - Unlike other web apps, use a device mockup in two different views i.e. landscape and portrait. Has a huge collection of devices. The most interesting thing is it has some Windows Phone and SmartTV as well.
  • Mockupsjar - Free online tool for generating the mobile frame, it looks pretty good and the website is clean and easy to use. Find device frames for iOS, Android, MacBook, flat devices and browser frames. Create device frame using a three simple steps pickup the image, upload and download.
  • PicApp - Consists of clean design and easy to use online tools and comes with free and pricing options. Find device frames for popular phones, tablets, computers and watches.
  • MockDrop - Popular free online tool for generating the device frame or mock ups. Find the device frames for smartphones, laptops, desktops, tablets and watches.
  • Mockerie - Huge number of mockups, not all are free. Unique features of Mockerie is to add various color effects.
  • Device Art Generator - Add Nexus device frames to screenshots. It comes with a very small collection of devices. Has Android Wear device. The only restriction is to upload a PNG image as other formats are not supported.
  • Am I Responsive - Take all devices(Phone, Tablet, Laptop, Desktop) screenshots in 1 image.
  • Realshots - Realistic App Screenshots for Free.
  • Mockup Photos - Free & Premium Mockup Photos with more than 510+ unique mockups.

APIs

Device Mockups

If you have Photoshop or Illustrator on your PC, you have an advantage. You can decorate your device frame according to your wish using those tools. However, here are some other websites from where you can download device mockups for free and without any restrictions.

  • Diverse Device Hands - Small yet very useful website providing beautiful mobile mockup with hands. Download all the mockups and use Photoshop or any other image-editing tool to include mobile screenshots into them. Only mobile, no PC mockups.
  • TutsPlus - Download device mockups from the Design section of TutsPlus at no cost. The collection is not too large, but it certainly has some good looking devices frame.
  • Behance - A portfolio maker for graphic designers. Search for mockups or get beautiful device frames at Behance. No direct link to download mockups from Behance.
  • Dribbble - Download a lot of Photoshop files from Dribbble. Just like Behance, there is no direct link. Search for any mockup with the device name.

Blogs

Contribution

⭐ Suggestions and PRs are welcome! ⭐

Please read the contribution guidelines to get started.

License

CC0

To the extent possible under law, Akshay Kadam has waived all copyright and related or neighboring rights to this work.