How to use CopyPasteDesign?

  1. Save a screenshot to your clipboard
    I'm on MacOS so I use the shortcut Command+Control+Shift+4 and select the part I want to copy. More instructions here
  2. Go to CopyPasteDesign.com and paste it onto the canvas
    You can paste as many images as you like.
  3. Add annotations
    This is the fun part. Add text, some arrows, draw something. Or maybe an icon or emoji that says it all.
  4. Copy back to your clipboard
    Right click the overview image in the bottom left corner and select copy image, or make a partial screenshot again.
  5. Paste it elsewhere
    You can paste the image on your clipboard in an email, trello, slack, discourse, google docs, twitter, facebook, whatsapp web, telegram desktop

There is also an option to download the full canvas image if you want. Click the 'Download Canvas Image' button in the bottom right corner, or right click the canvas and select 'Download full image'.

Examples of use

Here are some ways I've used CopyPasteDesign the past few months.
If you are using the tool in an interesting way, tweet me.

Pointing out an interface element on an existing website:

Comparing two applications side by side:

Pointing out an area on a map:

Pointing out a bug in an online application:

Celebrating a fixed typo:

Giving instructions to a website editor:

Draw things on a picture of your dog:

Making a silly emoji drawing because we can:

Keyboard shortcuts for CopyPasteDesign

To speed up the workflow even more, you can use certain keyboard shortcuts:

Why should I register?

Register users get more features:

Who is it for?

Who made CopyPasteDesign?

Bram did. He is a a pragmatic UX designer and web developer who likes to build useful and useless web things. Check out some other things he has built. 😂 Haha, nothing like talking in the third person about yourself.

But why...?

I work on a daily basis with clients and team members in project organisation tools like Trello – discussing features, designs, interfaces and bugs. Clarifing things in a visual way avoids confusion and keeps communication clear. You can paste images from your clipboard onto a Trello card, and in many other tools.

I used to take a screenshot, open Preview on my Mac, paste it in there, switch to annotation tools, do my annotation and take another screenshot. Do this 10+ times a day and feel your spirit breaking. I'm working in a browser all day, why not solve this there too!

How can I support CopyPasteDesign?

If you like using CopyPasteDesign, send a tweet to show your appreciation! Or if you want to get serious with your support, you can send me a few dollars to support with development and maintenance.

How can I contact CopyPasteDesign?

Send a tweet or email me at bram@dearcomputer.nl.