How to turn a screenshot into a browser mockup

When you’ve worked in the web industry as long as I have, it’s almost impossible to not find various tools that are freely available online that help improve productivity. Today’s tool is screely.com, which is a tool that allows you to quickly turn a screenshot into a browser mockup.

Why is screely useful? Because it helps to make your app or website look 100% more professional and consistent than if you were to just use a raw screenshot.

A few of you may already know about and frequently use the tools I share, but for a lot of you, these tools will not only be new to you but will also bring value to you and your workflow.

Instantly turn a screenshot into a browser mockup.

What is Screely, and how can it help me?

Screely allows you to upload a quick screenshot and it will generate an image that is displayed in a generic-looking web browser. There are also some configurable options for you to play to meet your needs, along with a download button. It’s that simple!

Screely Configuration Options

To get the aesthetics you are looking for, the tool has the following configuration options available:

  • Browser window type
  • Background color (single, no support for gradient)
  • Padding
    • Vertical
    • Horizontal
  • The dark mode is useful when you have a dark website UI and you are trying to find a suitable contrasting background color.
A screenshot of the configuration options available in Screely, which includes: Window type, background colour, vertical and horizontal padding.

Example browser mockup using Screely

With very little time and effort, the end result helps to make your document or app look much more polished. Here is an example of a Screely browser mockup using the exact same image above.

How to turn a screenshot into a browser mockup

Who is the creator behind Screely?

The creator behind screely.com is Jurn van Wissen, or @jurn_w.

Why should I care who created a tool I use?

I think it’s important to find out who created a tool and to take the time to look at their work. This serves at least 3 benefits:

  1. You may discover some other new tools that you may not otherwise have found, which will continue to improve your productivity and workflow.
  2. Discovering who created the tool/app means you potentially have a way to get in touch and send a message of thanks.
  3. This small action can genuinely give a creator the motivation to improve the current offering or to continue building and sharing future tools.

Always remember to support the creators of the tools you use freely. If you can spare a few bucks and support the development of the tools you benefit from, please do. But at the very least, please seek out the developer of the app to say a word of thanks. You’ll never know how much that can mean to creators.