Characters in SVG format?

Intro

The Assets panel is a nifty new feature, and I am confident that its use will be enhanced in the future. You could have read my first comments in this post. You find under Tip 2 a special feature concerning the Characters of the Illustrated category. One of the complaints often heard about downloading characters is that you have to do this one by one, which is taking a lot of time. If you like the Illustrated category, and also have access to Illustrator, you can find a tip which could save you a lot of time. It is no secret that the new features in 11.5 for SVG’s are my favorites, and they’ll play a role here as well. What would you think about characters in SVG-format, which means always crisp, never pixelated? With the possibility to edit the colors within 

Workflow

Step 1: Download Illustrated Work File

Open the Assets Library in Captivate. Go to the Discover tab, and open Characters. Choose Illustrated, and eventually the wanted category and find you favorite character. Look under the (often 25) images for the Illustrated Working File. It is sometimes at the end, sometimes at the start. The sticky characters do not it. Download the file, while choosing the format AI (Adobe Illustrator), not EPS. It will be saved automatically in the Others subfolder under eLearnng Assets.

After the download you’ll be able to open the folder immediately from the popup dialog box. I mentioned already that it is under Others in eLearning Assets (under Public documents\Adobe if you are on Windows).

Step 2 Illustrator – Preparation

Be sure I am not at all an expert in Illustrator, my expertise is more with Photoshop, Captivate, Audition and InDesign.  Three items in the Illustrator environment will be important, try to find them and get acquainted. The active workspace is not  important, I used Essentials:

  1. Selector tool (black arrow) which is the first tool in the vertical Toolbox, indicated by a red circle in the next screenshot. It has also a shortcut key V.
  2. Properties panel: it may be open, just find it or you can open it from the Windows menu. This panel will be used to identify the nature of a selection (step 3).  It is highlighted in light blue in the screenshot. For this particular selection it indicates as ‘Group’. You are familiar with grouping in Captivate and that knowledge will be useful in step 3. IYou can increase its size both horizontally and vertically.

The characters come with 4x6  poses.  Only face changed in the groups of 6: disappointed, speaking, normal and happy.

Step 3: Identify and change status of character

This sound terrifying, but it is not. Problem is that apparently the files for the characters were not created/finished all the same way (different teams). The ideal situation would be that each character instance was one group (of paths). You will have to check if that is the case, and if not, group manually.

Choose the Selector (arrow) and drag a rectangle surrounding (or cutting) the character you want to save.  You’ll see a lot of blue lines (paths) appear in the image. If the Properties panel indicates that this is a group, it is great, done with this step! Here is an example (character Sydney):

For the following example, the selected paths are indicated as "Mixed Objects". You need to group them which is possible with the same shortcut key CTRL-G as in Captivate. Alternative is the command 'Group' from the right-click menu , or from the menu Object. Here is an example of a selection which has to be grouped (character Jessica):

Step 4: Drag objects to Asset Export panel

Drag all the assets you want to export to that panel. Verify that you see the complete character. If by accident, you drag a character which is not grouped, you’ll get all assets separately as asset. That may be interesting for other situations (like the post I created about the Geographical Hotspot question, or a planned scored Color question).

In the panel assets get a generic name Asset1…. but you can double-click that name and edit to a more meaningful name.  See screenshot under Step 5.

Step 5: choose Export fomat(s) 

You can  indicate to which format you want to export, and multiple formats are possible. In the screenshot below you’ll see that not only  SVG, but also PNG’s in 3 different sizes was chosen. The last option indicated an exact height for the PNG. That way you can increase the quality to what you want exactly, since the original image is vector-based. You know the rule in Captivate: best quality for a bitmap image (PNG is bitmap) needs inserting the character in exactly the size you want. It can also be interesting to increase the size if you want to use only part of the character.

Let us compare with the normal download of characters from the Assets panel. You get only two choices , both with a fixed size (high and low).

Available formats are visible in this screenshot. For the characters, which have a transparent background you should not use JPEG because it will replace  the background by a solid color:.Now click the Export button. You will be asked to indicate the location for the images. You can put them in a subfolder of the eLearning assets or anywhere. They will not show up in the Downloads section of the Assets panel.

Conclusion

I like the Illustrator Export Asset panel a lot. Being able to use SVG format has many advantages: always high quality, and  it is so easy to edit colors in Captivate (or by roundtripping with Illustrator). This article is also meant to provide a possible workaround for having all characters available immediately without having to download them one by one. Too bad that you do not get such an overview image for the normal characters, only for the illustrated ones.

A warning: the downloaded Workfile (see step 1) nor the exported assets will appear in the Downloads section of the Assets panel. You could store them in the Others folder under eLearning Assets, but will have to import them manually to the Library of a project to use them. 

Character Editing - part 2 (Interactive Video)

In a previous article I described the workflow to edit a Character (from Media) with Photoshop, without damaging the original image. In this interactive video you’ll see the workflow: an inserted character from the Illustrated category will change colors and be flipped. This very simple workflow is suited only for regions with solid colors. The next interactive video will show the workflow to change a color in a photographic image.

Watch this video:

If you prefer watching a rescalable project on any device, use this link: CharacterEditPhotoshop

I used Photoshop CC2019 as editor, but the workflow is pretty much the same in older versions.

Character editing - part 1

Why?

Yesterday a question appeared on the forums: ‘How to save in the Library the edits to Characters’. In this use case it was meant to save the flipped version of the Character. In the Library the original version will always be kept. Result: when you drag another instance of the character on a slide, it will not be flipped. Edits to the character, made with the Edit image functionalities will never be saved to the original image in the Library.

Characters folder

As you probably know, the downloaded characters are stored (for Windows) in Public Documents, under AdobeeLearning Assets. If you have multiple versions of Captivate, you’ll find a subfolder ‘Characters xx’ for each of the versions. Because of that location you are able to edit the characters even without Administrator rights. 

For each character in the folder you’ll have a Thumbnails and an Images subfolder. The Thumbnails show all what is available for that character, the Images only the downloaded image, both in a High and a Low version.  Although you can always choose for 3 ways of inserting a character: Full, Half and CloseUp, there is only one image in Low and High version, real images for those who were downloaded, placeholders for the others. 

When you insert a character in a Captivate project, it will appear on the stage and in the Library. The file showing up in the Library can be one of the 6 possible versions: High/Low in CloseUp, Half or Full version. 

Editing Characters

On the stage

You can edit the Character  on the stage with the set of editing possibilities provided by Captivate:

  • Resizing, flipping, rotating using the Options tab in the Properties panel (inspector). 
  • Using the Edit Image button in the Properties.  It is a limited set of editing functionality but could be sufficient in some circumstances. In this image you’ll see some edited instances of the same character.

This workflow will not change the original image in the Library. However if you need to use the same edited image multiple times, you’ll have to use the copy/paste workflow. The editing is not saved in the Library.

In the Library

Eidting on the stage will keep the original image save. If you want to reuse the edited image multiple times in your course it can be a good idea to use the ‘Edit with….’ option on the image in the Library. You have to be careful not to change the original image as it is stored on your system. 

Do NOT Rename

Renaming the image in the Library is not a solution: when using Edit with… the original name will appear in the editing application. Have a look at these screenshots: renamed the image in the Library, opened it in Photoshop with ‘Edit with…’ and you’ll see the original name in PS.

If you save it that way that particular instance of the image will be changed also for future project. Bit confusing, but the other 5 instances remain untouched. In this example I edited the Low, Half version of Sarah01 (Illustrated category). As you can see in this screenshot, the other instances keep their original look, although you’ll find only one image for Low on your system.

Do Duplicate

What is the correct way to preserve the original image? You have to duplicate the image in the Library and edit the duplicate. You can see the result on this screenshot for the Sticky Woman, low resolution, Half instance:

Roundtripping in Photoshop with the duplicate image is not happening the first time as you are used to for normal images. It will get a generic name in PS, and you’ll have to export it to a PNG file, to a wanted location after the first editing. Later on roundtripping will happen in the usual way. I will show the workflow step-by-step in a future interactive video.

Multiple edited characters

If I need multiple edited characters in a course, to be reused over and over again I would prefer to create a layered Photoshop file and use the Import functionality. You did see that I created an extra folder for Characters under the Images folder in the Library in the last screenshot. With an Imported PS file that would be unnecessary.  Do not forget that it is always possible to use edited characters in the Library in any other project, by using the External Library workflow.

How?

Watch this interactive video to see how you can realize the simple edits I showed in the screenshots in this blog.   You ‘ll also get an interactive video explaining the creation and use of an imported Photoshop source file. This post was meant as an introduction.

Some Ideas for Photoshop Roundtripping with Captivate in eLearning Suite 2

I really do like the new feature in the eLearning Suite 2 that allows you to edit the source file in Photoshop from Captivate. In Captivate 4 you had already the possibility to import a layered Photoshop file, indicate which layers you wanted to use. But after import each layer was converted to a PNG-image. If you wanted to change an image, you did have roundtripping to Photoshop and it worked fine. But if you had to change multiple images, that were all imported from the same Photoshop file, you had to repeat this 'trip' for each of those images separately.

In Captivate 5 you can edit all layers at once using the 'Edit Source PSD file'. If you never used this possibility I created a small demonstration to show the workflow. In one of the Photoshop-files I created with reusable objects I have two buttons, using five layers as you can see in this screenshot. When imported in Captivate, as you'll see in the demonstration I can create each of the buttons using three images: an Text image (Nee or Ja), a background color (RoodNee or BlauwJa) and the Overlay (which I use for both buttons). Both text and background color have to be changed.

Similarly I created Photoshop files with all kind of arrows, with text balloons etc. The idea is to be able to reuse those items, and when necessary to change quickly the color by using the roundtripping feature I described in the demo.