Introduction

Screenshout is a browser based image editor for Confluence. The main use-case is for editing and annotating screenshots but it works with any jpg or png image.

First step, insert the Screenshout Macro

Screenshout adds a self-titled macro to the Confluence editor. The easiest way to insert a new Screenshout image is to start typing {Screenshout in the Confluence editor. This should present you with an autocomplete dropdown with the Screenshout macro as a choice. Select this choice to get started.

Screenshout in Macro Autocomplete Dropdown

Alternatively, you can insert a new Screenshout macro by opening the macro browser and searching for Screenshout or navigating to it under the Visuals and Images category.

Screenshout in Macro Browser

Screenshout Dialog

Once you click on Screenshout in the Macro Autocomplete or the Macro browser, the Screenshout dialog will appear.

Screenshout Dialog

There are 3 ways to insert an image into the dialog.

  1. Click on the drop zone to launch a file select dialog then select a file from your hard drive.
  2. Drag and drop an image file onto the drop zone
  3. Paste an image from your clipboard. (Note that Safari doesn't support this).

After getting an image into the dialog. Click the Next button and the Screenshout editor will launch.

Screenshout Editor

Screenshout Editor

  • Tools - Use these to edit the image
  • Editor Operations - General edit operations like Open, Save, Undo, Redo, etc.
  • Active Object - When you click on an object, it becomes active. You can move and resize it and edit its properties.
  • Active Object Properties - When an object is selected, its properties will appear in the right sidebar. Edit object properties here.

Resizing the image

After launching, the screenshout editor should have your image loaded in the center. Depending on the size and resolution of the image, it will probably be shrunk to fit into a proportion of the workspace. You can easily resize the image by selecting it and using the corner handles to change it's dimensions.

Tools

Callout

This allows you to label or "call out" a part of an image using a pointer with a text box attached to it. To add a callout click the callout button in the tools menu then click any part of the image.

There are several pointer and line styles for callouts.

Magnify

This adds a circle that magnifies a piece of the underlying image. The max magnification is the original image size. The idea being that you can shrink the main image and emphasize interesting areas using this tool.

To add a magnify circle, click on the magnify tool, then click on the image.

Text

Use the text tool to add a textbox to your image. You can then edit the text and style it. Screenshout uses Google Fonts exclusively for typefaces.

To add a textbox, click on the text tool, then click anywhere in the workspace.

Box

This adds a box to the image.

To add a box, click on the box tool, then click on the image.

Crop

This allows you to crop the image. When you click on this tool the editor enters into Crop mode. Use the handles on the image to select the area you want to keep. You can use the arrow keys on the keyboard to fine tune the movement of a selected handle.

Border

Use the Border tool to add simple border effects to the image. Currently supported effects are Drop Shadow, Fade to Background, and a Rounded Border.