How to use CopyPasteDesign?

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
Go to CopyPasteDesign.com and paste it onto the canvas
You can paste as many images as you like.
Add annotations
This is the fun part. Add text, some arrows, draw something. Or maybe an icon or emoji that says it all.
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.
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:

Press d to enter free drawing mode
Press r to enter rectangle drawing mode
Press t to add text
Press a to add an arrow
Press i to pick an icon
Press e to pick an emoji

Press Delete or Backspace to remove selected object
Press Escape to deselect all objects
Press [ to move selected object backward
Press ] to move selected object forward
Press shift + [ to move selected object to back
Press shift + ] to move selected object to front
Press c to remove selected object or clear canvas when no object is selected
Hold Option or Alt while dragging an object to duplicate it

Press Command + z or Ctrl + z to undo your last action
Press Command + Shift + z or Ctrl + Shift + z to redo your last action

Why should I register?

Your canvas is stored
So you can pick up where you left off when you return later
Skip the loading screen

Who is it for?

Web developers
It's a great way to take screenshots of issues and add annotation to clarify issues quickly and avoiding confusion
Web designers, interaction designers & visual designers
Use it as a quick scribble pad, to quickly try out ideas visually
Software testers & quality control
Perfect for adding extra info to a screenshot of an issue

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.