Using The STORY EDITOR in CLIP STUDIO PAINT EX
Contact Graphixly @
Hello there! Welcome back to the CLIP STUDIO GUIDE.
This entry into the Guide will cover the Story Editor, a function exclusive to CLIP STUDIO PAINT EX users.
The usual method of adding text to a page or story is to use the Text Tool: click on the canvas, enter the text, and repeat. What the Story Editor provides is a different method: enter text into a specialized text editor within the program. This can be done either one line at a time, or in bulk by copying and pasting an entire page from a script!
So, let us dive in and talk about how the Story Editor works in the program.
Editing the Story Editor Preferences
Before working with the Story Editor, I feel that it is important to make sure that it works according to one’s personal preferences. In order to do this, we will need to open CLIP STUDIO PAINT’s Preferences window: from the Main Menu, select CLIP STUDIO PAINT > Preferences on macOS/iOS, or File > Preferences on Windows.
Then, select the Edit Text Tab.
New Text
The New Text section will set how text will be displayed on the page, once it has been added to the Story Editor.
By default, text entered into the Story Editor will be single added to a single Text Layer on the page. To change this so that each line of text is added to its own separate Text Layer, select Always Create New Layer from the How to Insert New Text drop down list.
Next, we need to set how the text will be formatted when on the page. The default settings (shown in the Selected Text Tool Property dropdown list) are Copy From Current Text. This means that each line of text created will use the text formatting options set by the previous line in the Story Editor. When no text has been entered, the system default settings will be used (Lucia Grande font, vertical alignment)
To change this so that the Text Layer formatting matches the properties that are set in the Text Tool, select Selected Text Tool Property from the New Text Property drop down list.
Line Breaks/Spacing
The Line Breaks/Spacing section sets how line and paragraph breaks behave in the Story Editor.
First, to set how line breaks are shown, select from the How to Show Line Break drop down list. Line breaks can either be displayed normally, or as a single line with a ↵ symbol noting each line break.
Next, to set how new text fields will be created in the Story Editor, select an option from the Paragraph Breaks drop down list. New text boxes can be created with either one, two (default), or three carriage returns. Or, they can be set with no Paragraph Breaks at all; all text entered will be in a single text box.
View
The View section sets up how text is viewed in the Story Editor. These settings only affect text displayed in the Text Editor; they will not change the Text Layer settings on the page itself.
To set how the text is aligned (horizontal or vertical), select the corresponding Direction Radio Button.
To set the Story Editor’s font & size, select the font from the Main Text Font drop down list, and enter a value in the font size text box.
Reading Text refers to furigana, or a reading aid used with Japanese text. These are kana (simplified Japanese symbols) placed above kanji, to help a person read or pronounce words or symbols that they might not know.
To set the Reading Text’s font & size, select the font from the Reading Font drop down list, and enter a value in the font size text box.
Once all of the Preferences have been Set, press OK. To Close without saving changes, press Cancel.
Opening the Story Editor
Now that the Story Editor’s preferences have been set, it is time to start using it! To open the Story Editor, select Story > Edit Text > Open Story Editor from the Main Menu. This will open the Story Editor on a new tab.
Each large numbered box corresponds to a page in the story, while each text field within the page box corresponds to one Text Layer on the page.
NOTE: The Story Editor can be used with Story Files and single pages. When used on a single page, the page box number will be replaced with an asterisk (*).
Adding Text to the Story Editor
Typing In Text
There are a few methods to add text to the Story Editor. The most direct method is to simply begin typing in the text field!
To add a new text field to the page box, enter the number of carriage returns (as specified in the Preferences) to the text field. In my case, two carriage returns will create a new text field.
The other method is to right-click anywhere within the page box, and select “Add Text” from the pop-up menu. This will create a new text field below the currently active one.
Pasting Text
If a script has already been created outside of CLIP STUDIO PAINT, it is easy to add it to the Story Editor. As an example, I recreated a script page from my old webcomic, Chibi Cheerleaders From Outer Space:
----------------------------------------------------
Panel 1:
MS of Baker and Jenkins in the Quad. Baker waves at Brady, motioning her to come over.
BAKER: Brady! Over here!
Panel 2:
MS of Brady looks at Baker quizzically.
Panel 3:
Baker and Brady chat while Jenkins is in the background shouting to the workers.
JENKINS (shouting): TONY! HEY, TONY!
(cont) MAKE SURE YOU GET THAT MEASUREMENT PERFECT!
BAKER: So? Whaddya think?
BRADY: What do I think about what?
BAKER: The landing platform for the Chibi Cheerleaders!
(cont) The plan is finally starting to take off!
Panel 4:
Jenkins looks over his shoulder at BAKER and BRADY.
JENKINS: You know, we should really be thanking you for all of this.
(cont) After all….if it wasn’t for you, none of this would be happening!
Panel 5:
CU of Brady, shocked at what she just heard!
BRADY: …What??
----------------------------------------------------
To add text from this script to the Story Editor, first select and copy a line of text.
In the Story Editor, select an empty text field, right-click, and select Paste from the pop-up menu, or press ⌘+V (macOS,iOS), or Ctrl+V (Windows) on the keyboard.
It is also possible to paste sample script all at once! First, select and copy the sample script text.
In the Story Editor, ⌘/Ctrl-click anywhere within the page box to select it. The page box should now be highlighted.
Right-click anywhere within the page box, and select Paste from the pop-up window, or press ⌘+V (macOS,iOS), or Ctrl+V (Windows) on the keyboard. This will replace all text currently in the page box.
If all went well, the text from the sample script should now be added into the Page Box. Each paragraph break should also convert into new text fields. So, there should be no need to go in and manually add line breaks.
NOTE: It is advised to paste only one page of text at a time. Pasting too much text at once may overburden the program, and could cause it to shut down.
Editing the Story Editor Text
A drawback to copying and pasting the entire script page is that several unnecessary lines and bits of text have now been added to the Story Editor, including panel descriptions, character names, and so on.
Fortunately, CLIP STUDIO PAINT makes it relatively easy to remove these lines and other bits of text from the Editor.
Deleting Text
To remove a text field, ⌘/Ctrl-click on a text field, right-click, and select Delete Text from the pop-up menu, or press the Delete key. To remove several fields at once, hold down the Shift key while ⌘/Ctrl-clicking on each text field.
Finding and Replacing Text
The simplest method to remove text would be to click on a text field, and press the Backspace key to delete it. In the case of removing multiple instances of text (such as a character’s name), right click within the Page Box, and select Find and Replace from the pop-up window. This will bring up the Find and Replace dialog box.
As an example, let us remove all instances of BRADY: from the text fields. To do this, enter “BRADY: “ in the Search String text box. Be sure to include a trailing space, to mame sure that the space between BRADY: and the dialogue is also removed.
To make sure that the text will being replaced with a blank space, keep the Replacement String text field blank.
To ensure that the editor will only look for instances of “BRADY: “ in all-caps, uncheck the Do not differentiate case checkbox. For instances where case doesn’t matter, make sure that the checkbox is checked.
Next, select the radio button of the Direction (before or after the currently selected text field) that the function will find and replace the text. Because the entire story editor will be searched, this is optional.
To remove all instances of the Search String at once, click on the Replace All button. To be more meticulous, click the Find button to find the next instance of the Search String, and the Replace button to replace the text.
And that’s it! All instances of “BRADY: “ have been removed from the page’s text. Once done, click the Close button to close the dialog box.
Re-Arranging Text
Here is something cool to keep in mind: the order of the text fields is not locked in place. It is possible to rearrange the text within the page, or even move text to a different page altogether! This can be useful when accidentally removing text from the page (as I sometimes do) — simply re-type the text, and then place it in its proper position in the script!
To do this, first ⌘/Ctrl-click the text field that will be moved. Hold down the shift key while ⌘/Ctrl-clicking to select multiple text fields.
Then, Click and drag to move the text field. A red line will appear to note the destination. To move a new page, click and drag to the desired page box.
Finally, release the mouse button/stylus. The selected text should now be in its new position on the page.
Formatting the Text
The intention with the story editor is to just add the text to the page. As such, it is important to note that no formatting of any kind has been done to the text on the page itself. So, let us switch back to the Page, and do some formatting!
NOTE: For time’s sake, I will assume that you have some knowledge on how the Text Tool works in CLIP Studio Paint. If you don’t, I will be sure to go over that in greater detail in a future entry to the Guide.
Looking at the page, we can see that the text is there…but it is not quite formatted for the comic. Specifically, the Text Layers are all bunched up along the top of the page, with no line breaks. Let us see what we can do to adjust the text for the page.
The first thing to do is to make sure that the text is formatted as intended (font, font size, etc). If it is not, make adjustments to the Text Tools using the Tool Properties palette.
Switching to the Story Editor, ⌘/Ctrl-click the page box, right-click, and select Apply Tool Property To Text from the pop-up window. Returning to the page, the text should now be re-formatted to the updated settings.
Switching back to the page, select the Move Layer Tool. Then, select a text Layer from the Layers Palette, and use the Move Layer Tool to reposition the Text Layer. Repeat this for each text Layer until they are all spaced out on the page.
Next, line breaks need to be added to the Text Layers, so that they can fit better within a word balloon. There are two ways that this can be done.
Method 1: From the Page
First, select a Text Layer from the Layers Palette. Then select the Text Tool.
Add line breaks to the text by pressing the return key, until satisfied with how the block of text looks.
To add emphasis to a specific word, select the word in the Text Layer using the Text Tool. Using the Tool Properties Palette, alter the formatting, by adjusting the font size or type, adding bold or italics, and so on.
Repeat this process for each piece of text on the page.
Method 2: From the Story Editor
First, click within a text field within the Page Box. Position the cursor in the text field to where the line break will be added, then press the Enter Key. Repeat until satisfied with how the block of text looks. Then repeat for the next text field.
This method will add line breaks, but will not provide any additional formatting to the text. Switch back to the Page, and use the Text Tool to make additional formatting changes.
Adding Word Balloons
Once the text is set, it is time to add word balloons!
First, select a Text Layer from the Layers Palette. Then select to the Word Balloon Tool, and choose a Word Balloon type from the Sub Tools Palette.
Set the Balloon Tool’s properties (line width, fit and line color, etc) from the Tool Properties Palette. Then, click and drag the balloon along the text. If all goes as planned, the word balloon should now be part of the text layer. If it is not, first make sure that the Word Balloon Layer is above the Text Layer. Then select Layer Merge with layer below from the Main Menu.
Repeat this process until the Text Layers all have corresponding word balloons.
To combine text layers so that the word balloons will connect when in proximity to each other, head to the Layers Palette, and make sure that the two (or more) Text Layers are consecutive (ie: next to each other)
Next, select the uppermost text layer, and select Layer Merge with layer below from the Main Menu. Looking at the canvas, the two text blocks should now be enclosed in a larger box. Now, their corresponding word Balloons boxes should merge together when they overlap
The final step is to add tails to the word balloons. So, With the Balloon Tool active, select the Balloon Tail sub tool from the Sub Tools Palette. Then, select a text layer, and add a tail to the Balloon. Repeat this for each Text Layer that will have a Word Balloon Tail.
Why is This Useful?
So, we have talked about what the Story Editor is, and how it can be used. Now comes an important question: why use it?
Personally, I have found it useful to add dialogue from a script to the page I am working on, as it helps me make sure that I leave room on the page for the dialogue and sound effects.
I have a tendency to focus on how a page looks, so that the reader is engaged in the story. On more than one occasion however, I would forget to leave space on the page for the word balloons! This resulted in having to either resize artwork, or cover what I created with the word balloons!
What I like about the Story Editor is that I can quickly transfer and format the script I’m using to the page. This gives me the ability to see and set up how the art and dialogue will look in tandem.
As an example, panel 3 of my sample script has a lot of dialogue. If I only focused on the artwork, I might not have left enough room to add the word balloons. By incorporating the text in the layout stage, I made sure that there was enough space, while still keeping the art intact. This in turn has saved me a lot of time and headaches.
Conclusion
It takes a little bit of practice to get used to how the Story Editor works (speaking from personal experience). But, once you get the hang of it, I feel that you will find this function of CLIP STUDIO PAINT useful, especially when making sure that enough space is provided for both the art and dialogue on your pages!
And with that, I will wrap up this entry to the CLIP STUDIO GUIDE. Thank you very much for reading, and I hope you will find this useful for your work!
2 comments
I’m not sure who wrote this, but thank you for saving my butt! Learning how to master the story editor with this tutorial is great if you’re required to use CSP to letter a story from a script.
In the case where you want to remove speaker text from the script, I would recommend using Sublime Text and use GREP search like [A-z]: or [\w]: to find speaker text.
Thank you. Elemental question…what does ‘reading’ mean? I know this sounds stupid but I’m going through some basic tutorials about text balloons and it talks about ‘adding a reading to text’, and there are tool settings associated with it. I don’t understand the use of the word here. There is a whole text subtool section for reading but I don’t know what they’re talking about…translation? subtext? something that comes up when translating? Seems very important. Please explain it to me if you know. Thank you in advance. I’m a native english(american) speaker.