Webtoonは、垂直スクロールコミックまたは「ウェブコミック」です。プラットフォームごとにページのアップロードディメンションが異なるため、レイアウトを計画する際の制限事項に注意してください。

 

このチュートリアルでは、Line Webtoonsを使用し、今後はWebtoonsと呼びます。

 

*このチュートリアルは、選択したWebcomicホスティングサイトにアカウントがあることを前提としています。ウェブコミックをアップロードする方法については、公式チュートリアルをご覧ください。

つまり、Webtoons、Taptasticなどです。

 

用語集の用語

 

Webtoons：Line Webtoonsのウェブサイト/ホスティングサービス

CSP：Clip Studio Paintプログラム

作業ファイル/サイズ：描画可能なファイル-編集可能なキャンバス

キャンバス/作業ファイル：ファイルの描画面（交換可能）

アップロードファイル/サイズ：サイトにアップロードするファイル-完成したファイル

ページ：縦型のウェブコミックホスティングサイトにアップロードできる各ファイル

パネル：コミックの伝統的な「パネル」

ベクターパネル：レイヤーフォルダー形式でベクターラインパネルを作成するためにCSPが使用するツール

ブック形式：伝統的なコミックレイアウト

垂直フォーマット：スクロールコミックレイアウト

どうすれば垂直コミックをレイアウトできますか？

私たちはビジュアルメディアで作業していて、美しいアートワークを見せびらかしたいので、一般的な「ブック形式」から考え方を変え、スクロールする垂直形式のパネルをインパクトのある方法でレイアウトすることを考えなければなりません。これは「ページ」という観点から考えて処理します。

 

サイズが800x1280の「ページ」にアップロードされたWebtoons。これは、1つの長い垂直更新を行うには複数の「ページ」が必要であることを意味します。

垂直に目をリード

アートをレイアウトするときは、スクロール中にアートがどのように表示されるかを覚えておいてください。最終的なアップロードは、「ページ」あたり2.67x4.27インチになります。私たちは小さな話をしています。ブック形式のようにページ全体のイラストの影響を望む場合は、アートに2つ以上の「ページ」を使用させる必要があります。読者のスクロールを長くするほど、サスペンスが増します。

 

これは、ページを移動するように彼らの目を強制するためです。この手法は「Leading the Eye」と呼ばれ、フローと読みやすさを作成する方法です。垂直フォーマットでは、少し異なる方法で目を向ける必要がありますが、概念は同じです。さらにインパクトを与えるには、リーダーを少なくとも「2ページ」だけ長くスクロールし、目を下に向けます。

 

 

ブックフォーマットの例

数字はあなたの目が自然に着地する場所であり、アートワークの周りにつながります。

縦書きの例

パネルを十分にレイアウトする

垂直フォーマットでは、ページごとにパネルをレイアウトする方法が制限されます。ページあたりの幅が3インチ（800px）未満であることに注意してください。それでも、コミックページの設定方法に制限はありません。

 

注：「ページごとのパネル」-パネルをレイアウトするときは、「ページ」ごとに1つまたは2つのパネルを維持するようにします。モバイルにサイズ変更すると、パネルが非常に小さくなる可能性があるためです。 Webtoonsでは、ファイルのサイズを320x512pxに変更できるため、非常に小さくなります。

 

代替パネル

パネルのサイズと長さを交互にすると、ページに奥行きが生まれ、パネルがアートワークの一部になり、目を引きます。

ボックスパネル

アートワークを同じサイズのパネルの内側に留めておくと、コミックを均一でくっきりとした清潔な状態に保つことができます。

イラストパネル

1つのイラストの上にアートパネルを配置すると、コミックをより没入感のあるキャンバスのように感じることができます。注：これはとてもクールで美しい方法ですが、すぐにやり過ぎてしまう可能性があることに注意してください。このタイプのパネルレイアウトを非常に重要なシーンに使用することをお勧めします。

作業ファイルはどのサイズにする必要がありますか？

用語集–

作業ファイル/サイズ-描画したファイル-編集可能なキャンバス

アップロードファイル/サイズ-サイトにアップロードするファイル-完成したファイル

キャンバス-アートワークの描画スペース

 

 

ベストプラクティス

800pxで描画している場合、作業ファイルは3インチ未満です。完成したアートを大きくする必要がある場合は、検閲されたバーのようなアートになります。可愛くない。ベストプラクティスは、ファイルをアップスケールすることです。最終的なアップロードファイルのサイズの3倍（x3）の作業ファイルが欲しいです。そうすれば、パネルを印刷物にしたい場合、いじくりまわすピクセルがたくさんあります。

 

画像の300dpiと72dpiの例：

アップロードサイズ

最終的なアップロードページは800x1280にする必要があるため、3を掛けて2400x3840の作業キャンバスを作成します。

 

ファイルサイズページをアップロード：

800x1280

 

作業ファイル（x3）サイズのページ：

2400x3840

 

アップロードサイズを縮小すると、このようになります（大きな画像は作業ファイル（2400x3840）、小さな画像はアップロードサイズ（800x1280）です）。

作業ファイルサイズ

作業ファイルの場合、長さ5ページにするのが好きです。これにより、管理しやすいファイルサイズでカラーリストに送ることができますが、キャンバスをずっと下にスクロールすることもできなくなります。私は3840の作業ファイルサイズの長さを使用し、それを5倍した19200（3840 x 5 = 19200）を使用します。作業ファイルの最終的な正確なサイズは2400x19200で、アップロード用に800x6400にサイズ変更されます。

 

これが最後の「ページ」の内訳です。

次の数字に怖がらないでください。それは加算数学です。これを手に入れました。

ページのバッチ処理

章が完了するまで、5ページのバッチで作業します。これには、すべてのロゴとソーシャルメディア、章のタイトル、エンディングクレジットが含まれます。その情報については1ページで十分ですが、常連客やアシスタントに感謝するために5ページまで使用されているのを見てきました。それはあなた次第です。キャンバスはあなたの世界であり、好きなように作成できます。

 

「ページ」の例とアートとパネルのレイアウトのスケッチ：

モバイル作業用にテキストのサイズを変更するにはどうすればよいですか？

ページは800x1280で、PCで完全に読みやすくなります。しかし、モバイルにサイズ変更すると、テキストの読みやすさに問題が発生します。これは、画像のサイズを変更すると、すべての新しい「フレームサイズ」に収まるようにピクセルが失われるためです。フレームに収まるように余分な紙を切り取らなければならないようなものだと考えてください。

 

300dpiと72dpiの例（どちらも3.21x0.82インチのキャンバスサイズにあります：

作業ファイルにテキストを適用する場合は、少なくとも35ptフォントを使用する必要があります。これは、フォントの選択によって異なる場合があります。コミックのホストサイトにアップロードしたテキストを自分でチェックして、選択したフォントを読めることを確認することをお勧めします。アップロードファイルサイズにテキストを追加する場合は、8ptから15ptのフォントを使用できます。次の例では、モバイル用にページのサイズを変更するとテキストがどのように縮小するかを確認できます。

 

テキストの大きさを正確に確認できるので、吹き出し、テキスト、サウンドエフェクトを800x1280のアップロードキャンバスサイズに追加するのがベストプラクティスであることがわかりました。

どのワークフローから始めるべきですか？

以下は、私の漫画を描くために使用する手順です。多くの試行錯誤（時間と時間）を通して、私は自分にとってうまくいく何かを見つけました。これらは、Webコミックをより快適に作成するために使用および適応するためのヒントです。

 

 

ベストプラクティス

ファイルテンプレートは便利で、時間を節約できます。基本的には、作成する新しいファイルごとにフォルダーとレイヤーを設定します。 HELPや取扱説明書（F1）で「レイヤーをテンプレート素材として登録」を検索して、独自の作成方法を学ぶことができます。

または

ビデオチュートリアルをご覧ください。深く掘り下げます。

マイファイルテンプレート

これは、コミックを描くために毎日使用するすべてのフォルダとレイヤを含む私のテンプレートです。

私のワークフロー

 

空白のキャンバス→スケッチング→線画→色→効果→キャンバスのサイズを変更してアップロードサイズ→パネル→吹き出し→テキスト→サウンドFX→スプライスページ

 

スケッチはすべて「SKETCHES」フォルダに描画します。すべてのラインアート（インク）は「LINEART」フォルダに入れられます。 LINEARTという名前のvector *レイヤーにラインアートインクを描画します。これらのページで何がうまく機能するかに応じて、新しいCOLORフォルダーを作成するか、LINEARTフォルダーですべて実行します。

 

*注意：ベクターレイヤーでラインアートを行うことは非常に重要です。それは着色とサイズ変更に役立ちます。 CSPには、ベクターレイヤーとラスターレイヤーに関する優れたチュートリアルがあります。使い方がわからない場合は、こちらをご覧ください。ここに素晴らしいチュートリアルがあります：

注：ベクターレイヤーで塗りつぶしバケットを使用することはできません。ラスターレイヤーのみがカラーリングを許可します。塗りつぶしツールの使用に関する詳細は、次の場所にあります。

作業ファイルのサイズを変更する

空白のキャンバス→スケッチング→線画→色→効果→キャンバスのサイズを変更してサイズをアップロード→パネル→吹き出し→テキスト→サウンドFX→スプライスページ

 

作業ファイル全体をアップロードサイズ800x6400にサイズ変更します。

注：画像は平坦化しません。すべてが別のレイヤー/フォルダーに残ります。

 

これを行うには、編集→画像解像度の変更→解像度を最初に300に変更→幅を800に変更→高さを6400に自動調整します。キャンバスは800x6400 300dpiにサイズ変更されます。

ビデオチュートリアルで詳しく説明します。パート２をご覧ください！

パネル

空白のキャンバス→スケッチ→ラインアート→色→効果→キャンバスのサイズを変更してアップロードサイズ→パネル→吹き出し→テキスト→サウンドFX→スプライスページ

 

CSPでのパネルの動作の簡単な内訳：

それらはフォルダー内のすべてのアートワークのマスクとして機能するフォルダーです

それらはベクトル線です

各パネルは独自のレイヤーフォルダーです

 

新しいパネルを作成するたびに、フォルダーとしても機能するレイヤーが作成され、それ以降に描画したものはすべて自動的にそのパネルに移動します。それを防ぐ方法はまだわかりませんが、この機能は好きではありません。これが、ベクターパネルを最後に描画する理由です。パネルのベクトル線はマスクとして機能することに注意してください。

 

パネルツールを使用して、必要なサイズのパネルを描画します。各パネルで新しいレイヤーを作成したくない場合は、必ず「選択したフォルダーに追加」を選択してください。

完了したら、描画レイヤーをパネルフォルダーにドロップすると、パネルラインの外側にあるアートが自動的にマスクされます。

パネルレイヤーの上にあるものは、パネルによって切り取られません。パネルボックスの外側に置きたいアートワークにこれを使用します。

カスタムスピーチバブル

空白のキャンバス→スケッチ→ラインアート→色→エフェクト→キャンバスのサイズを変更してアップロードサイズ→パネル→吹き出し→テキスト→サウンドFX→スプライスページ

 

テキストを追加します。私はキャラクターを区別するのに役立つカスタムの吹き出しを行います。吹き出しもベクトル線ですが、背景色で自動的に塗りつぶされます。これにより、前に戻ってそれぞれに記入することなく、簡単に泡を追加できます。

 

バルーンツール→線の色と塗りつぶしの色を選択→バルーンを配置→バルーンの尾を追加

操作ツール（マウスが上にある3D正方形のように見える）を使用して、バブルを選択します。

 

操作ツール→ふきだしを選択→ブラシの形状を選択→希望の線種を選択

 

こんな感じになります！レイヤープロパティを操作して、グローやその他の特別なオプションを追加できます。楽しんで！注：より自然な外観にするには、吹き出しを手で描くか、吹き出し内のベクトルポイントを調整して形状を変更します。

テキストを追加する

吹き出しにテキストを追加する方法の詳細については、このチュートリアルを確認してください。

章をページに挿入する

空白のキャンバス→スケッチング→線画→色→効果→キャンバスのサイズを変更してアップロードサイズ→パネル→音声バブル→テキスト→サウンドFX→スプライスページ

 

CSPは30,000pxを超えるファイルを処理できないため、無限キャンバスを使用できません。これが私たちがバッチで作業してきたので、私たちの生活がより簡単になるでしょう。作業ファイルを800x1280のアップロードファイルにするには、それらをスライスする必要があります。 CSPには組み込みの機能としてこれがないため、別のプログラムが必要になります。 Photoshopにもこの機能がありますが、無料のオプションなのでGIMPを使用しています。

 

GIMPを開き、[ファイル]→[レイヤーとして開く]→[アップロードファイルを検索]→[開く]を選択します。

 

次に、ページを接合するためのGUIDESを作成します。

 

画像→ガイド→新しいガイド→ボックスが表示されます→ガイドの向きを水平に変更していることを確認し、ページを切りたいピクセルを入力してください。最初のページは1280、次は2560、次に3840、最後は5120になります。

他のアップロードファイルを取り込む

すべてのガイドを配置したら、他のアップロードファイルを取り込むことができます。ファイル→レイヤーとして開く→アップロードファイルを検索→開く。

注：ファイルをスライスするときは、そのレイヤーのみを表示してレイヤーを選択する必要があります。そうしないと、レイヤーが登録されません。

 

スライスするには、フィルター→ウェブ→スライス→ボックスが開きます→設定を好みに変更→OK→ファイルが800x1280ページにスプライスします。

設定の説明：

HTMLエクスポートのパス：ページを保存するフォルダーの名前。

 

エクスポートするファイル名：この設定を使用しないため、スライスのままにします。

 

画像名の接頭辞：各ファイルに何を呼び出すか。プレフィックスを「スライス」のままにするか、「ページ」に変更して、バッチごとに番号を追加して、番号順に保存します。これは、アップロードプロセスに役立ちます。例：slice2、slice3、excreta。

 

画像フォーマット：JPEGのみ

 

別の画像フォルダ：いいえ。すべてを同じフォルダに保存します。

 

画像エクスポート用フォルダ：違いはないようです。 EP_（番号を挿入）という名前にします。つまり、EP_2

 

テーブル要素間のスペース：0（これを変更しないでください。変更すると、Webサイトにアップロードされたファイル間にスペースができます。）

 

最後の2つのオプションは必要ないため、設定を変更しないでください。

この方法を使用したくない場合は、あなたのために仕事をするオンラインサイトを使用できます。これはCroppyと呼ばれ、杏林のチュートリアルで説明されています。

ここにリンクがあります：

やった！これで、ページをWebサイトのホストにアップロードできます！

これがあなた自身のウェブトゥーンを作ることについての本質的な部分を説明したことを願っています。他に何か説明したり、説明を明確にする必要がある場合はお知らせください。チュートリアルビデオもご覧ください。リアルタイムで見ることができる場合があります。

チュートリアルをご覧になりたい場合は、下のビデオをクリックしてください。