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, which is a tool that allows you to turn a screenshot into a browser mockup quickly.

Why is screely useful? Because it helps to make your app or website look 100% more professional and consistent than if you were to 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.

How to 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 generate an image displayed in a generic-looking web browser.

There are also configurable options to play to meet your needs and 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 option is useful when you have a dark website UI and are trying to find a suitable contrasting background color.
How to turn a screenshot into a browser mockup

Example browser mockup using Screely

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

How to turn a screenshot into a browser mockup

Who is the creator behind Screely?

The creator behind 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 three benefits:

  1. You may discover other new tools that you may not otherwise have found, which will continue improving your productivity and workflow.
  2. Discovering who created the tool/app means you can get in touch and send a message of thanks.
  3. This small action can motivate a creator to improve the current offering or 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 app developer to say thanks. You’ll never know how much that can mean to creators.