This month's theme is "magazine or poster-style text layout."
Now, let's try making an illustration in the style of a Japanese manga title page!
Please note that since the original text of this article was written in Traditional Chinese, some techniques may only be applicable to languages that support both vertical and horizontal text, such as Chinese or Japanese.
Let's Begin!
✧Creating the Canvas
Japanese manga typically use B5 (for magazines) and B6 (for tankōbon, collected volumes).
Limited editions or bunkoban (pocket-sized editions) may use A-series sizes (A5/A6).
Therefore, generally, using a B or A series canvas size can give it a "manga" feel.
Yellow box position: Set sizes like B5/B6/A5.
Green box position: Switch between landscape/portrait canvas.
Blue box position: Set dpi. If only for online publication, 72 dpi is fine. If for printing, color manuscripts are usually 300 or 350 dpi; black and white manga manuscripts are 600 dpi.
[💡POINT]
If you need to change the dpi value, you will need to re-enter the "B5" size after changing it for the pixel units to update correctly.
Please note that since the purpose here is to create an illustration, bleed areas are not considered.
If you are aiming to print manga or doujinshi, please refer to the following tutorial:
✧Drawing
Please draw in black.
You can set the canvas to display only in "grayscale" or "black and white" when creating it. However, since I plan to add colors in post-production, I will keep the base layer displayed in "color" for now.
➡︎Regarding gradient handling:
As mentioned in section (6) of the linked article above, when using screentones, be careful about moiré patterns.
If for online publication, using gray fills is easier to manage.
If you want to use screentones, some ready-made brushes tend to look "better."
Please note that these brushes may not be suitable for printing.
You can find many brushes by searching for "halftone" in Clip Studio Assets.
✧Preparation
After completing the drawing, first analyze "which areas are the highlights of the illustration."
In other words, these are "places where text should not obstruct."
An easy-to-understand point is that the character's face should not be blocked.
Small parts of the hair being covered are fine, as long as the character can still be recognized.
Additionally, some small details, such as parts that convey the character's actions: holding a water gun, pulling a strap; and finally, small accessories that add interest to the scene. Try to arrange the text so it doesn't obstruct these areas.
✧Font Selection
Although generally it's not ideal to use too many fonts in a single design —
for manga title pages in magazines, using three to four different fonts including the title is common.
Different fonts can convey different information.
When using fonts, the required font license may vary depending on the publication's purpose.
I recommend looking for suitable fonts on the "Google Fonts" website provided by Google; the fonts there are free and open-source, and can be freely used for personal and commercial works.
Aside from the title, always use easy-to-read fonts for other informational text.
✧Text Placement
Typically, there are two styles for title pages —
one expresses a relaxed, joyful, lively feeling;
the other expresses a serious, solemn, quiet atmosphere.
➡︎In terms of fonts:
The former often uses sans-serif, bolder fonts;
The latter often uses serif fonts.
You can use this as a guide to find suitable fonts.
➡︎In terms of placement:
Angled placement can create a lively feel;
Serious placements will be perfectly vertical or horizontal. Occasionally, italic fonts are used to convey this.
Please see the example below.
Although the text content is unrelated to the illustration, the difference in its placement creates different feelings.
Of course, this doesn't mean that the former should only use sans-serif fonts; rather, it applies to the "main" phrases.
As mentioned above, different fonts can be used to convey different information during design and production.
Practical Application
■Title - [Graphic Text Container]
The manga title is, of course, indispensable for a manga title page!
Generally, the title should be the largest text.
For special purposes, other larger text, such as "New Series," might be used to highlight important information.
Also, manga titles usually use somewhat special fonts, or incorporate graphics to contain the text, to enhance the design.
For title design, feel free to refer to my thought process shared in this article:
Adding text is very simple.
Just click on the canvas with the text tool or draw a text box.
Although the following article will also explain the steps.
Interested readers can also refer to the official detailed tutorial on text tools:
Here, I used a diamond shape as a text container and simply designed it to look like a label.
🔧Drawing a diamond:
Use the "Rectangle" shape tool, hold down the [Shift] key to draw a perfect square.
Use [Edit] → [Transform] → [Scale/Rotate] (shortcut: Ctrl+T), hold down the [Shift] key to rotate it by 45 degrees to get a diamond shape.
🔧Edge Effect:
This is a frequently used feature. It can be used to separate text from background images.
Click the icon below in the [Layer Property panel] to enable it.
[💡POINT]
Although simple shapes can be used as text containers, it is not recommended to use simple rectangles or ellipses with thin borders.
This can be confused with speech bubbles in manga stories.
Since manga title pages sometimes also convey story content, this aspect requires extra attention.
■Chapter Number
Besides the title, the second piece of information is the chapter number.
Compared to the title, the chapter number is usually smaller in size on the canvas.
It is also placed near the edges of the canvas.
Here, a similar approach to the title was used to unify the design.
■Support Text (1) - [Text Tool's Edge Effect]
In fact, besides using the layer property's edge effect, this effect can also be achieved within the text tool.
🔧Text Tool's Edge Effect:
Click the wrench icon in the bottom right of the Text Tool panel → [Text] → Check [Edge] → Set size and color.
This edge effect looks the same as the layer property's edge effect, but when both are enabled simultaneously, you can easily get a double edge!
■Support Text (2) - [Vertical Text]
🔧Vertical Text:
Setting vertical text is very simple.
Just click [Vertical Text] on the Text Tool panel.
(💡If you can't find the option, click the wrench icon in the bottom right of the tool panel).
🔧Rotating Text:
Drag the corner of the text box to easily rotate text.
You can also precisely set the angle in the Text Tool's detailed settings under [Set Transformation] → [Corner].
■Author - [Text Background Color]
In addition to the edge effect, you can also use the "Background Color" feature in the text tool.
🔧Text Tool's Background Color Effect:
Click the wrench icon in the bottom right of the Text Tool panel to open the properties panel → [Text] → Check [Background Color] → Set color and opacity.
The background color will tightly follow the text.
If you want space before and after the text, consider manually adding blank characters.
■Support Text (3) - [Special Characters]
The "!!" symbol, commonly seen in comics or posters, can be created in two ways in CSP:
🔧Adding special characters:
Click the wrench icon in the bottom right of the Text Tool panel to open the properties panel → [Character List] → Select a font, and various supported symbols will appear.
[📝NOTE]
Double exclamation marks can be found under "Common Punctuation"
"©", "®", etc., can be found under "Latin Supplement"
Others like "★", "☆" can be found under "Geometric Shapes"
[💡POINT]
If there are too many symbols, you can directly enlarge the panel window to speed up searching.
The number of symbols supported varies by font; not every font will have double exclamation marks.
🔧Setting Horizontal Text within Vertical Text:
Type "!!" in half-width characters → Text Property panel → [Text] → [Horizontal within vertical text] → Set character count.
■Support Text (3) Cont. - [Ruby Text Function]
Ruby text (注音) is used to add small characters to supplement the reading or explanation of any text.
Here, I utilized this function to emphasize text.
🔧Setting Ruby Text:
Select the desired text →
Click the wrench icon in the bottom right of the Text Tool panel to open the properties panel →
[Ruby Text] → Ruby Text Settings → Enter the ruby text (here, four periods were entered).
In the same location, you can input font, ruby text size, and other settings.
In the example, "center alignment" and "even 3" were used.
Finished!
BONUS
◇Auto Actions
For text processing, I really like using the Auto Actions shared by many users in the CSP Asset Library.
In the Asset Library, type "text" and set the search to "Auto Actions" to choose your desired asset.
After downloading the asset, please refer to the official help guide for instructions on installing Auto Actions:
It is recommended to use this for title design.
For other supportive text, using the edge effect is sufficient to avoid distracting from the title and making the canvas too cluttered.
◇Magazine Paper Effect Post-Processing
When I first created the canvas, I kept the display set to "Color" hoping to further demonstrate how to achieve a magazine paper effect through post-processing.
The method is very simple!
First, here's the gradient used:
After downloading, please refer to the following official help guide for instructions on installing gradients:
Then, in the top-left corner of the Layer panel, click [☰] → [New Correction Layer] → [Gradient Map] →
Select a desired gradient to quickly achieve the feel of manga magazine paper!
Additionally, you can also composite paper textures!
Here's the texture material used:
Simply drag the image material directly onto the canvas, then set its layer blending mode to "Overlay."
Although many manga are now published online, so readers see clear black-and-white images. But deliberately creating a physical magazine paper effect like this also offers a unique nostalgic charm!
Conclusion
Thank you for reading this far!
It's a bit regrettable that I haven't seen how Western language translations handle manga magazine title page translations, so I couldn't provide more detailed supplementary information related to that. However, I believe this article can be applied to languages that support both vertical and horizontal writing, such as Chinese, Japanese, and even Korean. I hope it will be helpful to everyone!
What do you think of this sharing?
If you enjoyed this article, feel free to like or leave a comment to let me know! See you next time ✨
Users who liked this post
Comment