素材メイキング

素材メイキング

カードワースを今すぐ始めたい、自分の描いたキャラクターで冒険に出たい……。そんな時に意外と面倒くさいのがPC用顔グラ素材の作成(用意)です。

  • サイズ小さすぎでは…?
  • 描くの面倒くさい…時間掛かる…(切実)
  • 縮小すると潰れたりぼやける…。
  • 透過処理をしたはずなのに謎のオーラが消えない…。

等々、自分も悩んだことのある箇所を、備忘録ついでにまとめてみました。何かしらのお役に立てれば幸いです。他にも沢山の方が素材の作り方を公開してくださっているので、皆様がそれぞれやりやすい方法を見つけてくださると嬉しいです。

※ある程度お絵かきソフトの使い方が分かる方向けのまとめです。

※2018年4月作成

※18/07/29『CWの仕様…?』訂正

※19/03/19【5】ちょっとひと手間に『PNG形式にする』を追加

目 次

目的に応じて

メイキング

小ネタ

目的に応じて

CWの仕様…?

画像の種類は…

CWで使える画像の種類は、BMP, JPG, PNG, GIFです。(jpgは主にシナリオ背景画像などに使われます)

一部古いバージョンのCWでは、pngやgifに対応していませんので注意が必要です。

bmp(と、gif)

CWで元々使われていたのがbmpファイルです。今はgifも読み込みます。

左上1pxの位置にある色を透過色として扱います。半透明を表現できません。

png

透過pngの場合、透明部分をそのまま透過します。半透明の表現が出来ます。

プレイオンリーでは特に問題ないハズですが、
シナリオ作成時に(Py以外で)PNGをカードに『格納』するとエラーが起きたり(『参照』ならOK?)、PNGはCW内部でBMPに変換されて表示しているため結果的に容量が大きくなったりとか…するらしいです?

シナリオをXEditorで制作する場合、『1.50/NEXTではPNG形式の画像を格納したカードを取得できない(異常発生と表示される)。』

PNG→BMPの件は『WirthBuilderは格納時に自動でBMP変換する仕様なので、透過PNGは透過BMPに置き換えられます。』

CWPy&XEditor攻略Wikiより引用)無茶苦茶適当なこと言ってました、大変申し訳ありません。(18/07/29訂正)

いいから今すぐプレイだ!!!!

透過? 縁取り? …ええいどうでもいい! とにかくさっさと始めたいんだ! という方向け。

  • 顔グラに使用したい画像を用意し、74×94pxに合うようトリミング&縮小します。
  • 左上1pxの位置に、画像に使われていない色でドットを打ちます。
  • bmpまたはgifで保存して完成!

左上1pxだけが透過され、背景のある顔グラになります。かんたん。

透過画像なら作れるんだけど…

縁取りとか透過処理とか面倒くさい…。背景なし画像ならあるんだけど? という人向け。

  • 顔グラに使用したい背景透過済みの画像を用意し、74×94pxに合うようトリミング&縮小します。
  • 透過png形式で保存します。
  • 完成!

色々しなくても綺麗に透過されます。めっちゃかんたん。

メイキング

竜想月で配布されているCW素材はこのように作られています。

【01】絵を描く

使用ツール

  • 絵・縮小・透過処理等:CLIP STUDIO PAINT
  • 減色:Padie
  • 蛇足:EDGE

※各ツールの使い方は割愛

仕上がりサイズ(74×94px)と同じ比率のキャンバスに絵を描く

私は308×392pxで描いています。

計算が面倒くさいので描きやすいので74×94px(72dpi)を300dpiに拡大したものを使っています。(この画像の大きさ)

顔の大きさをある程度統一するためのガイド線を引いてあります。『名前枠』と書いてある部分は、アイテムorスキルカード等に使用した場合カード名にかかってしまう部分の目安です(PC用顔グラのときはきにしない)

線は太めに

パーツのアウトラインや影になる部分は太めの線で、内側や明るい部分・細かい線などは細めの線で描きます。縮小されるので雑でも大丈夫。

(線画は乗算にし、暗い茶色にしておいたり、色塗りした後に弄ったり(色トレス)します)

別窓で小さく表示し、完成時にどう見えるかを確認しながら描いています。(因みにクリスタは、ウィンドウ>キャンバス>新規ウィンドウ 便利です)

がさがさ塗ります

パーツごとに塗り分けて、ごりごり塗っていきます。

線画のときと同じく、別窓で確認しながら塗ります。ざっくりで大丈夫。どうせ潰れます。

トーンカーブで明暗を弄ったり、オーバーレイをかけてみたり、色々してイラスト完成。

あまり細かい装飾になると潰れてしまうので、この時に塗りで表現、または縮小後にドットで手直しします。

【02】縮小する

アンシャープマスク(シャープ)をかける

74×94px(72dpi)に縮小した後、アンシャープマスクをかけます。

すごい分かりづらいですが、この後の透過処理のために、気持ちパキっとするまでシャープにします。

ドットで調整

この時ついでに、縮小して印象が変わってしまった部分や潰れてしまった部分をドットで加筆することがあります。瞳のハイライトがぼやけたときとか、小物が潰れた時の修正とか。

【03】透過処理

ドットで縁取り

別レイヤーを作り、拡大表示して1pxのドット(2値ペン)でプチプチと縁取りをしていきます。

元イラストの線画の太さを気にしすぎず、むしろドットで新しく線を引くくらいの気持ちでやるとすっきりします。(※2)

縁取りを黒に変え、透過したい部分をイラストに使っていない色で塗りつぶします。(※3)
左上1pxの色が透過色となります。原色系がおすすめ。あとでやり直したいこともあるかもしれないので、一応別レイヤーで。

【04】減色

Padieで256色以下に減色

完成したbmp画像をPadieで読み込み、減色します。設定は好みの感じに調整。

縮小しただけのフルカラー画像は約20kb、256色に減色すると約8kb程です。素材として配布する時はもちろん、沢山作りたい時にも減色は必要かと思います。

顔グラは大体256色で作りますが、アイテムやスキルエフェクトは16色くらいに減色することが多いです。16色はざらっとした感じがすき。(↓16色のときのいつもの設定)

完成!

お疲れさまでした。こんどこそ完成です。

減色まで済ませれば素材としても配布出来ると思います。ただ、素材をずらっと並べた時、今のまま透過色が原色だと眼に痛いので、ちょっとひと手間かけます。

【05】ちょっとひと手間

2種類の仕上げを紹介。

【その1】EDGEで透過色を変える

完成したbmp画像をEDGEで読み込み、透過色を選択して、好きな色に調整します。眩しい赤色から、灰色になりました。髪色も灰色ですが、うまくやれば髪が透けたりはしません。

ただし、絶対に絵に使われていない色で。細かい話は『小ネタ:透過ミス・謎のオーラについて』にて。

【その2】PNG形式にする

今までの流れで制作したけど最後はPNGで出力したい! という場合のbmp→png変換方法。

【4】で作成した256色以下に減色したbmpファイルをEdgeで読み込み、『ファイル→エクスポート→PNG形式で保存』。

透過色設定の部分を忘れず『編集レイヤ(0,0)の色を透過させる』にチェックを入れて保存します。

背景透過されたpng画像が完成!

バナー・素材以外の画像の無断転載・無断利用禁止.

DO NOT use any images of my site (except for the banners and materials).

inserted by FC2 system