Editing a Screen's Visual Content - Skyllful Replica Maker

Article Overview

Once you convert a Screen Capture (or Screenshot) into an html file (Screen Replica), it can be edited and have interactive features layered into it.  In this article, you will learn how to edit visual components of a screen.  Editing features aren't limited to: (1) Detecting, adding, and editing text.  (2) Removing an element from the screen.  (3) Adding visual elements.  (4) Copying and/or pasting elements. (5) Anchoring content to be responsive.

1. Video Tutorial
2. Loading Screens into the Editor
3. Add Text
4. Extract Text
5. Color Fill
6. Revert a Portion of the Image Back to the Original Screenshot's Contents
7. Clip a Portion of the Screen (for copying or deleting)
8. Anchoring an Element to a Specific, Responsive Area of the Screen
9. Copy, Paste & Delete Functionality
10. UI Functions Available Along the Bottom of Replica Maker
11. Overflow Menu Options
12. Abandon Edits & Start Fresh from the Original Screen Capture
13. Best Practices & Troubleshooting

1) Video Tutorial

2) Loading Screens into the Editor

1.  From the Screen Library, [Select] the Screenshot(s) you want to edit and click [Convert].  In the event they have already been converted, you can choose the Replica(s) and click [Edit].

2. If you haven't already, toggle your settings and [Convert All].

3. Use your screen tray to move between Replicas.

3) Add Text

1. Create a text box & enter text
2. Use the selector tool to position the text
3. Use the toolbar to format
4. Rename the text element (no spaces allowed in element names)

4) Extract Text 

1. Extract existing text
2. Edit the text
3. Rename if necessary (no spaces allowed in element names)

5) Background Fill

1. Select your color
   1. Recolor using source match
   2. Recolor using the color palette
2. Select the area you want to recolor
   FYI - you are changing the pixel grid when using the Fill Tool, you are not creating an editable/moveable element.  Therefore, to undo this edit, you must use the revert tool (scroll down to #6)

6) Revert a Portion of the Image to the Original Screenshot's Pixels

1. Use the back arrow icon to select the pixel area you want to return to original
2. Create a rectangle around anything area of pixels you want to revert

Elements you have added will not be deleted.  The revert tool simply restores original pixels to the background pixel grid.

7) Clip a Portion of the Screen (for Copying or Deleting)

1. Select the area you want to clip 
2. Move, copy, or delete the clip
   1. You can copy [Ctrl+C] and paste [Ctrl+V] onto the same screen (or, click the copy page icon)
   2. You can copy [Ctrl+C] and paste [Ctrl+V] onto a different screen (or, click the copy page icon)
   3. You can delete [Ctrl+X] the clip (or, click the trash icon)

8) Anchoring an Element to a Specific Area of the Screen

1. Select the element you wish to anchor to a relative location
2. Choose your preferred anchor location both horizontally and vertically
3. Turn on [Background Tiling] in the [Overflow Menu] (see below for more information on the Overflow Menu options)
4. Preview different views using the [Frame Selector] in the bottom taskbar

Here is how you anchor elements

Notice, without tiling activated, the aspect ratio of your screen remains constant. However, after enabling background tiling, the viewing ratio is no longer locked and anchored elements will be responsive as the aspect ratio changes.

9) Copy, Paste & Delete Functionality

1. You can copy elements from the list on the left, or using the selector tool and choosing it from the screen space.  
   1. Copy using [Ctrl+C] or the duplicate icon on the left 
2. You can paste elements to the same screen, or to an alternate screen
   1. Paste using [Ctrl+V] or use the duplicate icon on the left
3. You can delete elements from the list or the screen space
   1. Delete using [Ctrl+X] or the trash icon on the left

10) Functions along the bottom of the Replica Maker Tool

1. Undo/Redo
2. Indicator Color (change element outline colors to maximize contrast)
3. Visualizer (preview content on device models)
4. Zoom Level
5. Show Original Screenshot
6. Size Scale (compare the Replica's size compared to the original Screenshot)

11) Overflow Menu

You can apply any overflow menu functions to the currently selected (displayed) screen.  These functions do not apply, in bulk, to the other screens in the tray.

• Archive: delete the active Replica
• Download Original Screenshot: Whether you have converted a Screenshot into a Replica, or not, you can download it's original format
• Enable Background Tiling: Enabling this will replicate the outsize pixel border until it reaches the outside of the learner's viewing frame.  This eliminates bars when the screen ratios don't match; but, you will want to experiment to see if you prefer the replicated border over bars.

12) Abandon Edits & Start Fresh from the Original Screen Capture

13) Best Practices & Troubleshooting

Best Practices

• Save often
• When selecting images in the Library, the order you select them will be the order they load into Replica Maker's tray.
• While editing a Replica, if you don't like how things are progression, you can start fresh by selecting all elements, deleting them, then using the revert icon to select the entire screen.

Troubleshooting

• If you cannot select a Replica from the Screen Library to put into the editor, check the bottom of the thumbnail for a lock icon.  This indicates the Replica is in a published lesson.  To edit the Replica, you have to unpublish the lesson.
• If you cannot figure out how to undo edits, you can always use the overflow menu to download the original screenshot - then reload and restart