- 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'.
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?
Register users get more features:
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
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.
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!
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.