Introduction

Hello!! Welcome to this new TIP. On this occasion, I will share my knowledge for creating eye-catching typography in CLIP STUDIO PAINT, which you can use for posters, covers, cards, postcards, etc. We will use a series of tools such as: Text, blending modes, layer masks, gradients, textures, etc. I hope it is useful to you, without further ado...

Let's begin!!

1. Text Tool

Let's start by learning the basic editing features of the text tool. This tool can be found in the tool palette (icon with the letter “A”) or by using the keyboard shortcut “T”.

• SIMPLE TEXT

When we start with text, we usually use it as follows: To begin writing, click on the section of the canvas where you want the text. A new text layer will be created (NOTE: You cannot draw on this layer).

To finish editing, click the checkmark icon in the floating bar. The pencil icon takes you to “Sub Tool Detail.” And the “X” button is for canceling (clicking outside the box also ends editing).

To edit again, once more select the text tool and click on the letters or characters. What is particular about this way of writing is that it does not limit the available space. Pressing the ENTER key creates a line break.

Additionally, the text box can be moved by clicking on its border, rotated using the control point at the top, and finally, using the box handles, we can change the text size. This can compress the letters, but if we have the “Maintain aspect ratio” option checked or hold down the SHIFT key, transformations will remain constant. Although these transformations are ideal for dramatic effects.

 

IMPORTANT: The cursor will change shape for each action; a curved arrow for rotating, a directional arrow for moving, and a straight arrow for resizing.

• SUB TOOL DETAIL

As a first important point to keep in mind, you can change the settings before entering text in “Sub Tool Detail”, which will be visible by clicking on the wrench icon located in the bottom right. Remember it well, because we will mention it a lot from now on!

 

Within this window are other options that do not appear in the tool properties; we can make them visible by clicking on the icon located next to them (an eye will appear to confirm its visibility).

By changing the settings, for example, the font size, any text boxes created from that moment on will have the given configuration as default. Some of the things we can do are add a background color, activate and deactivate ligatures, line spacing, character spacing, etc. I will address some of these later.

If you want to know more in depth about text tools, I recommend reading the official tutorial series where more settings good for manga and webtoon are shown. Below, I leave the first of four:

 

 

• TEXT BOX

Now, we have another way; text boxes. This method, conversely, creates a box where, unlike the previous method, it limits the available space for writing. One of the big advantages I see is that it's no longer necessary to use the Enter key for line breaks; once it reaches the limit, a break is automatically made.

 

NOTE: From version 2.0 onwards, “Wrap text in frame” will be selected by default. This option prevents text from extending beyond the frame. Instead, a new line will be created. To disable it, go to: Sub Tool Detail > Text.

Unlike the previous method, when we use the handles to transform the box, the letters are not compressed (we can notice this by seeing that the option to maintain proportions is disabled). If the box is too small, part of the text will be hidden until it is resized to a format where all text can be visible.

NOTE: Even with this option active, you can still write text in the simple way, by clicking in an empty space, without the need to draw the box. This way you can quickly switch between both methods.

If we go into sub tool details, in the text section we will find the “Align frames” option; this option allows you to change the alignment of the text relative to the frame: Top, center, bottom.

In the “Tool Property” palette, we can make the following modifications:

• Multiple text layers: If we have multiple text layers, they can be grouped into one using the “Merge with layer below” icon. This layer can contain many text boxes that can be modified independently.

NOTE: If one of the merged layers is not a text layer, the result of the merge will be a rasterized layer.

If we want to select several texts at the same time, we must activate the option: “Select text”. This function is found in the “Drag” section of the tool properties. This works for both separate and merged layers.

IMPORTANT: Disable this option once finished; re-create a text box to avoid unintentional dragging.

• Modify multiple layers at once: When we want to modify several text layers at once to save time, we must change the “Apply to” setting in the tool properties palette from: “Only new” to “Selected text”.

NOTE: Selected text is a new feature that was added in version 2.0 of the program.

Now, by selecting all the frames you want to modify, we will edit from the properties palette. The changes will be reflected in each selected frame. This form of editing is an improvement implemented in version 2.0.

• Font and size: In this section, different typefaces will appear, and we can adjust their size. For size and fonts, we can select a word, a letter, or the entire phrase; therefore, different size and font configurations can be used within the same text box.

Within the drop-down menu, besides typefaces, we find three interesting sections.

 

1. PREVIEW: In the bottom left, we find three options that allow changing the appearance of the typeface preview.

 

1. Show font name.

2. Show font in specific font.

3. Show text in specific font.

2. ADD FONTS: Here, as its name indicates, new fonts are added. To do this, click on the option, and the file search window will open where we will choose the ZIP/RAR/TTF/OTF package containing our typeface, then click OK.

A message will appear allowing you to save it to the cloud; if it seems convenient, accept it, otherwise, just click close. And that's it, we have a new font.

3. FONT LIST: It often happens that we have a couple of favorite fonts, but it's annoying to have to search for them among all of them every time. To solve this difficulty, we have the option to create one or more lists where we group only the desired fonts.

 

To generate them, click on the gear icon located in the lower right part of the “Font” drop-down menu. A window will appear; on the left side of it, we can create, edit, duplicate, and delete with the buttons at the bottom.

Well then, click on the first icon “Create” at the bottom. A text field will open where you can type the name of the list. On the right, you can search for and choose fonts; with the second icon in this section, the names of the typefaces will be displayed. Now, all that remains is to select the fonts (they will be marked with a checkmark) and click OK.

Returning to the “Font” drop-down menu, at the bottom there is another drop-down menu: “All fonts”; if we open it, the lists will appear.

• Style: Regarding styles, we have: Bold, italic, underline, and strikethrough. By selecting a word or all the text, we can apply the effect.

• Justify and text direction: As for justification, text can be aligned to the right, center, and left. For structure, we can change the direction between horizontal and vertical (vertical orientation works better for Japanese characters, for example).

• Mode: Here we find scale/rotate/skew.

Ideal for placing text in perspective.

2. Types of Typefaces

Typography is the style or appearance of text. We work with it all the time when creating documents for school, etc. Knowing about typography will allow you to make a difference between a simple project and an extraordinary one.

 

 

► Font Types

The language of typography will help convey desired messages correctly; for example, if we want to emphasize danger, we won't put up a sign in italic font with pastel colors. Instead, we'll use large, uppercase letters with solid, contrasting colors like the typical red and white that warns of danger. This is why it's important to consider what you want to convey, to thus express the message with the correct font.

Let's look at some font types, their characteristics, and mainly how they are used.

 

• Serif: Let's start with Serif typefaces. These are characterized by having small strokes attached to the initial part of the letter called serifs. Common in magazines and newspapers.

• Sans serif: On the other hand, fonts of this type do not have this stroke. It's a style that alludes to cleanliness and modernity. Commonly used in digital environments for being easy to read on screens.

• Display: This type of typography has many styles including bold, italic, or decorative. They are usually employed for small texts such as titles, subtitles due to their extravagance.

---

► Which fonts to use?

When working on a project, it is advisable to use a maximum of one to two fonts. If greater contrast is needed, the already used fonts can be repeated but with a larger size, underlined, or in bold. In the following example, the title has a serif font, while the rest are sans-serif.

When combining different font types, we must keep in mind that they should complement each other. For example, decorative with simple, or short with tall, etc.

---

► Hierarchy

It is used to guide the reader's eye, the path goes from the most striking to the least striking, showing the reader where to start and where to go; in the striking elements, we can find large and decorated letters, in bold or underlined. For the rest, a flat and continuous style, not too large, taking the background when observing the text.

---

► Line Spacing and Character Spacing

Line spacing is the space between lines of text. This space allows us to adjust the reader's comfort when reading; for example, if the space is too small or too far apart, it can tire the reader's eyes. An intermediate space is best.

On the other hand, character spacing refers to the separation between letters or characters. Letters that are too close or too far apart make reading impossible. But if used in a dialogue, they give the impression of someone speaking fast or slow.

To modify line spacing and character spacing in CLIP STUDIO PAINT, we will go to the “Tool Property” palette and click on the wrench icon located at the bottom. There, in the font section, we can change the line spacing to our liking by moving the percentage bar.

---

► Ligatures

As a final point, we will find ligatures. Ligatures are the union of letters that structurally coincide, so they look better when together. This feature was recently added in CLIP STUDIO PAINT version 2.0. It is active by default, but we can deactivate it from the “Sub Tool Detail” window.

NOTE: Not all typefaces are compatible, and they are treated as a single character if this option is active.

If you want to remove the ligature from a specific part, you just need to mask that section and deactivate the ligature icon.

3. Styling Text

In this section, I will explain how to create textures for letters in CLIP STUDIO PAINT. Different typefaces are beautiful on their own, but sometimes they don't quite fit when sharing space with an illustration. That's why they are often textured to match the theme of the illustration, or simply to make them stand out.

 

NOTE: All effects and modifications to the letters will be done with the text layer rasterized. Remember that you cannot edit or draw on text layers.

► Textures

In this section, we will learn how to apply textures with brushes and patterns.

• BRUSHES

To start adding any texture or color beyond the default one, we will convert the text layer to rasterized. To do this, right-click on the layer; in the drop-down options, you will find the “Rasterize” option.

With the layer already rasterized, click on the “Lock transparent pixels” icon; this allows you to paint without going outside the edges of the letters.

Now, we will select the text with the selection tool we like best; in my case, I will use “Lasso”.

In the color wheel, we will choose white, then click on the fill bucket icon found in the selection tool's floating menu. This will paint the letters white. To deselect the lasso, you can use CTRL + D as the default shortcut.

With the help of any textured brush, we will paint over the letters; the different textures will give the letters the same quality. You can use any color you wish. Done, we now have our first texture.

• Patterns

The process is practically the same. First, transparent pixels are locked, then we will paint the letters white as seen previously.

 

Next, we will go to the materials and drag the pattern we like best onto the canvas; patterns can be monochrome or figured. We will place the pattern layer above the text and clip it to the layer below.

---

► Color/Gradient

There are two types of coloring we can add to letters: one using brushes and the color wheel, while the other is using gradients.

 

• COLOR

If we already have the texture, we will go to the following path: Edit > Change luminosity to opacity (B). This option allows painting without losing the texture. Once this option is activated, we will paint over the letters with the color and brush we desire. Remember to have the Lock transparent pixels option active.

 

With the “Color mix” tools, we can blend colors if we use two or more.

• GRADIENT

For gradients, we will follow the previous process, but with the difference that when we apply the color, a gradient will be chosen and applied in the direction we desire. As for gradients, we have two options:

 

1. SIMPLE GRADIENTS: These are found in the toolbar. They are easy to edit, you can apply them in any direction, and they do not require a base color.

2. GRADIENT MAPS: These can be found at the following path: Layer (L) > New Correction Layer (J) > Gradient Map.

 

They are more complete; we can download more combinations from ASSETS, invert colors, etc. Their peculiarity is that they need a base of several colors; this is because gradient maps replace existing colors with those of the gradient. For this reason, we need to have the letters painted with two or more tones to appreciate their effect.

If you want to know more about how gradient maps work, I've left a tutorial I made where I discuss it in depth:

 

 

---

► Hollow

To empty the fill of the letters, we will go to the following path: Layer (L) > Convert Layer. Another method is to right-click on the layer and choose the “Convert Layer (H)” option that appears in the floating menu.

Upon clicking this option, a window will appear where you can choose to convert the layer to a vector type. Type (K): Vector layer.

When we change the layer type to vector, the adjustment option is enabled. Clicking on it will open a new window where we can make several modifications, but the most important is “Max. line width.” This setting modulates the line thickness.

Below we see an example with 5 and 10 px for the parameter value.

If you want to know more about vector layers, I've left a link to a tutorial where I talk about this type of layer:

 

 

Now, vector layers have an advanced level of editing for the lines created in them. In our case, we want the lines to have a texture; to achieve this, we will go to “Object.”. In the tool properties, we will find a section called “Brush shape”; clicking on it will reveal a drop-down menu where a textured brush will be chosen. This will give texture to the border.

Furthermore, if we are not convinced by the line thickness, we can modify it in the “Brush size” option.

Once the texture is applied, rasterize the layer as shown previously. Now you can follow the aforementioned processes to add color.

---

► Glows

• BRIGHTNESS

Creating a glow around letters or characters is simple. First, we will generate a new layer above and set its blending mode to “Color Dodge”.

With the airbrush, paint over it with a color lighter than the typography. I recommend setting the hardness and density values to minimum for better results.

To add more effects, you can use the spray airbrush to create small glints using two layers with blending modes set to: “Overlay” and “Glow Dodge”.

• TRANSPARENCY

We achieve typography transparency by changing the text layer's blending mode to “Glow Dodge” and lowering the layer's opacity.

• NEON

To make it noticeable, I will use a black background. After rasterizing the text layer, duplicate it; this layer should be below the original. In the thumbnail of this duplicated layer, press “CTRL + CLICK”; this will select the outline of the letters.

We will hide the original layer. With the duplicated layer selected, now go to the following path: Select > Outline Selection (G). A window will open where you can expand the selected area. A value between 5 and 15 is good; in my case, I used 10 px. By this point, we should already have the color we will use selected in the color wheel.

Now we duplicate the second layer (to which the color was applied). This third copy will be placed below the others, and we will apply a “Gaussian Blur” found at the following path: Filter > Blur > Gaussian Blur. Finally, once again, we will make the original layer visible.

 

TIP: For a better effect, I recommend grouping the three layers into one and then duplicating it. This will improve the appearance of the colors.

To make hollow letters with a neon style, follow the same steps to hollow out the typography as explained before, and then the neon process, but in this case, two layers will be used: one where we apply the increased border and another to apply the blur.

---

► 3D Typography

We will duplicate the text layer using the keyboard shortcuts “CTRL + C” and “CTRL + V” or by right-clicking on the layer and choosing “Duplicate Layer” from the options that appear. Then, we will move it below the original; on the duplicated layer, we will change the letter color. Next, we will move the layer slightly, offsetting it from the original.

Following this same process, you can create a shadow effect behind the letters. The additional step will be to apply a blur filter to the layer behind. I advise using “Gaussian Blur,” found at the following path: Filter > Blur > Gaussian Blur. Additionally, you can lower the opacity so that the shadow is not too deep.

 

NOTE: You need to disable the “Lock transparent pixels” option to use the blur.

To enhance the traditional effect, it is advisable to manually draw the connection between the two words.

---

► Glitch

We will create three copies of the rasterized text layer, and to each one, we will apply the following procedure:

 

Select one of the duplicated layers and go to the following path: Layer (L) > New Correction Layer (J) > Level Correction.

Within this window, we will choose the “Red” mode from the drop-down menu in the upper left. Now, we will move the arrow on the monochromatic bar in the lower left completely to the right and click OK.

We will clip it to the layer below, and then, we will merge the created level correction layer with one of the text copies. This will turn it red.

We will repeat this same process with the other two layers, only for one, the green mode will be chosen, and for the other, the blue.

 

Once we have all three layers, we will move each one a bit, offsetting them from the original (all three layers must be below the original).

This effect can be created not only with this set of colors but with any other. The sky is the limit.

 

NOTE: Modify the color using a gradient map as explained previously.

TIP: To avoid the tediousness of always having to follow this procedure, we can create an auto action; if you want to know more, I've left a link to a tutorial where I talk about this wonderful time-saving tool below.

 

 

---

► Borders

The text tool itself has an option to set a border, but I find it easier to use this other method:

 

After typing the text, we will go to the “Layer Property” palette, then click on the circle-shaped icon. A white border will appear by default. Under “Border color”, click to change the color, and by moving the “Border thickness” slider, we change the width.

Another thing we can do to the text is add decorations by drawing them directly onto it.

► Skew

Within sub tool details, in the “Transformation” section, you will find other transformation options besides those already seen at the beginning. With these, we can horizontally or vertically flip the text.

• REFLECTION: To create a reflection, we will duplicate the layer, lower its opacity, and skew it to the side we like best using the aforementioned tools. Then we will align this second layer so that the top part of its letters touches the bottom part of the letters of the first layer. Done, a reflection.

4. Transformations

IMPORTANT: All modifications to the letters will be done with the text layer rasterized.

• MESH TRANSFORMATION

Curving text or placing it in an unusual position is easy. With the layer selected, go to: Edit > Transform > Mesh Transformation.

A mesh with a series of nodes will appear; these nodes can be moved to the desired position.

• DISTORTION FILTERS

Another method to create deformations in our characters is to use distortion filters on them. Filters are found at the following path: Filter > Distort.

 

You will find a series of filters: panorama, polar, geometric, shrink, fisheye lens, waves, circular waves, swirl, curved surface, zigzag.

Choose the filter you like; a window will open where you can configure the values. I recommend reading and experimenting until you get the desired effect. Here are some examples of distortion:

• LIQUIFY

The Liquify tool allows making corrections, which means it modifies the shape of the area where we use it. It can be found in the toolbar.

In the tool properties, you will find five sections that will serve to choose: size, mode, intensity, hardness, and reference to the editing area. If you are not yet familiar with this tool, I leave below the official tutorial where its use is explained in depth:

 

 

By experimenting, we can obtain good results.

Farewell

I hope what you've seen in this tutorial is to your liking and helpful. Well, nothing more to say, thank you for making it this far! ପ(๑•̀ुᴗ•̀ु) ॣ৳৸ᵃᵑᵏ Ꮍ৹੫ᵎ ॣ

 

See you next time ( •⌄• ू )✧