悠久のライブラリー - ROスキン書庫 -

ラグナロクオンライン(RO)のスキン書庫

ROスキンの作り方6(画像を作りましょう!)

こんにちは。

今回からはそれぞれの画像を作っていく回です。

全ての画像を作るときに共通する作業に関して

全てのスキン画像を作るときの共通のお話として、「この用語が出たら、この作業内容のことを指す」というのを決めていきますね。

共通して行う作業が多いので、毎回全部解説を書いていると、長さも労力も、読むのも大変なことになります。

なので、毎回その作業内容が来るところでは、一言で終わらせることにします。

 

A.「○○*○○の大きさで画像を切り抜いて」

この言葉が出たら言葉の通りなんですけど、作業に入る前に目的のスキン画像の大きさに合わせて画像を切り抜いてください。

一枚絵の大きな画像の一部をスキンに使いたい場合、例えば「280*120で切り抜いて」という指示があったら、それはこういうことになります。

↓ ↓ ↓

元の大きな画像を・・・・

こんなふうに280*120に切り抜いて

「○○*○○で切り抜いて」の一言で「ここまでをやってください」、という意味になります。

ちなみに、指定した部分だけ画像を切り抜くやり方は、ROスキンの作り方4の下のほうで説明していますので、わからない場合はこちらを見てみてくださいー!

nokoriga123.hatenablog.com

 

B.「透過で塗る」「透過させる」

この言葉が出てきたら、指定の範囲を透過色で塗ってください。

透過色は赤255 緑0 青255 #FF00FFの色です。

Windowsのペイントでの透過色の指定のやり方

ファイアアルパカでの色指定

透過色についての説明は、ROスキンの作り方5にありますので、わからないときは見てみてください。

nokoriga123.hatenablog.com

 

C.「保存して」

「保存して」の意味は2つあります。

 

1つめは「bmp形式で保存して」ください。

ROのスキンはbmp(ビットマップ)形式じゃないと読み込んでくれません。

スキン画像が読み込んでくれないよ????

っていうときは、だいたい保存形式がjpegとかpngとかになっているから確認してみてください。

間違えてたらペイントで開いて改めてbmpで保存し直してください。

ファイアアルパカでの画像の書き出し方

ファイアアルパカでのBMPの書き出し方

ファイアアルパカのようなクリエイティブ系アプリだと、「保存」と「書き出し」はちょっと違った意味で使われています。

だいたい初めて扱う人なら、画像を保存するなら「保存」だよね!と思うでしょう?

わたしもそうでした。

でもこういったアプリの場合、「保存」の役割は「プロジェクト全体の保存」という意味で使われている言葉です。画像を単体で保存する意味の項目じゃないんです。

なので、「どうやって画像を作り出せばいいの!」ってなりがちです。

画像を作り出す項目は、「保存」ではなく「書き出し」となります。

ペイントでは「名前を付けて保存」=ファイアアルパカでは「書き出し」みたいな感じで覚えていただくといいと思います。

 

2つめは「スキンのウィンドウそれぞれの正しい名前をつけて保存して」、という意味です。

 

basewin_bg(メインウィンドウ)

メインウィンドウはbasewin_bgが正しい名前なので、この通りの名前をつけて保存してください。名前が合っていて、bmp形式ならちゃんと読み込んでくれます。

名前が1文字でも間違っていると読み込んでくれないから注意してください(スペース空いている、とかアンダーラインが間違えやすいところです)。

 

D.「テンプレートを重ねて」

「ROスキンの作り方4で配布したテンプレートを画像に重ねてください」という意味です。

イチから書くとかなりしんどい枠や線が、テンプレートを使うと一瞬で終わるのでぜひ使ってくださいね?

テンプレートの重ね方はROスキンの作り方4で説明しています。

 

E.「色合いを変更して」(けっこう使うから重要です)

作ったパーツを使いまわして、色を変更して違うパーツに作り変えるラクラクなやりかたです

 

色相は赤・緑・青などの基本の色を変更します。

彩度は右に行くほど色が鮮やかに濃くなり、左に行くほど色を失ってモノクロに近くなります。

明度は右に行くほど明るくまぶしく、白っぽくなります。左に行くと光を失っていき、暗く黒くなっていきます。

これを応用してみると・・・? こんな↓画像が作れたりします。

色違いのスキンはこうやって作っていきます。なので、シリーズ化するときは最初の1個ができれば(その1個を作るのが難しいんだケド)後はけっこう使いまわしができます(ネタばらし)。

 

 

ここからはスキンのウィンドウたちを、作りながら説明していきます

今回はサンプルスキンを作っていきます。だいたいわたしがいつも作っている流れの順に作っていきます。

最初の方に大きなメイン画像→最後に向かうにしたがって小さなアイコン系、の流れで作ることが多いです。

作るときに使うアプリは、基本的にはペイントでも十分です。でも機能が限られているので、必要なときはファイアアルパカなどを使ってください。作るスキン画像によってはファイアアルパカなどを使わないと作れない、と指定があります。

 

ペイントで細かい作業をするときは右下にズームできるボタンがあるので、拡大するとやりやすいです。ドット作業はズームしないとたぶんむり笑

 

 

今回サンプルスキンに使う元の画像はこれ↓

イラストACさまで公開されているレインボーのイラストを使わせていただきます。

www.ac-illust.com

メッセージボックス(win_msgbox)

入れるのはメインフォルダ。

このスキン画像を1番最初に作るのが、実はオススメです。

なんでかというと、何も書き込んだりしないので、他のを作るときにも使いまわしがきくからです。使いまわしのベースにする用の画像としてすごく役に立ちます。

これはペイントで作れます。

 

作り方

1.280*120で画像の好きな部分を切り抜いてください

2.保存してください

メッセージボックスの作り方はこれだけです。何も書き込まなくてだいじょうぶ。

お好みで4つのスミッコを透過色で塗って丸くしてもいいと思います。

↓↓↓こんな風になったのが完成形です

win_msgbox

 

tips:グラデーションのかけ方

Starry Heavensシリーズのようなグラデーションのオリジナルスキンにしたいときは、こんな風に作ります。

(使っているのはファイアアルパカ。ペイントにはグラデーション機能がないです)

 

 

メインウィンドウ(basewin_bg)

入れるのはbasic_interfaceフォルダ。

win_msgboxの使いまわしで作れます。

先にメッセージボックスを作った方がいいのはこのためだと思います。

サイズはwin_msgboxと同じ280*120です。

画像をこのサイズで切り抜いたら、同じ名前のテンプレートを重ねてください。

(目盛りがいらない場合はテンプレートを使わないでください)

するとこのように完成しますので、保存してください。

これもペイントで作れます。

経験値の目盛り入りbasewin_bg

経験値の目盛り無しbasewin_bg(win_msgboxと名前が違うだけで全く同じ画像)

ROのクライアントだとこんな風に表示されます
ボタンとかゲージとかもオリジナルに置き換わっていくと
だんだん雰囲気が変わってきます

小さなメインウィンドウ(basewin_mini)

1.280*34で画像を切り抜いてください

2.上段と下段で表示する内容が違うので、真ん中で一本の線を入れるのもアリです

線なし

線あり

ROのクライアントだとこんな風に表示されます

 

自分の装備・衣装・他人の装備閲覧ウィンドウ

装備欄(equipwin_bg2)280*150

衣装欄(equipwin_costume_robe)280*150 サイズが装備欄と同じ

他人の装備閲覧(equipwin_bg)280*130 サイズが上2つとちがうのに注意

3つとも名前が違う独立した画像なので、全く違う画像を用意することもできます。

基本は同じ画像でいいと思います。最初に作るのは、この3つの中で一番画像サイズの大きい、装備欄(equipwin_bg2)です。

 

1.280*150で画像を切り抜いてください

2.枠線を付けたいときはテンプレートを重ねてください

装備箇所の名前が欲しいときは、名前入りを。オリジナルの文字を入れたいときは名前が入っていない、枠線だけのものを使ってください。

3.保存してください

4.作った画像を元にして衣装欄と他人の装備閲覧も作ってください

 

テンプレートを使って枠線あり、名前あり

テンプレートを使って枠線あり、名前なし

ROのクライアントだとこんな風に表示されます

他人の装備閲覧ウィンドウは280*130なのでサイズが少し小さいです。

これは、最初に作ったequipwin_bg2をベースにして、下の「□装備公開」と書かれている280*20の辺りを切り捨てて作ります。

 

ちゃんと280*130になりました。これをequipwin_bgにして保存してください。すると、他人の装備閲覧ウィンドウになります。

 

tips1:文字入れ作業の説明

ここで初めて文字入れ作業が入ってくるので説明です。

 

テンプレートから枠線や文字の色だけを変更するには?

黒線は見やすいですけど、オシャレな色に変更したいときもありますよね。好きな色の線に変えるにはスポイトツールを使うといいです。

 

好きな色に枠線と文字を塗ってみましょう!

 

今回はこの青色に枠線と文字を変えます

枠線を青に塗りつぶし

 

枠線の色がぜんぶ青に変わりました

 

この調子で枠線と文字をぜんぶ青に変えました

ROでも青色の線にちゃんと変わっています


イチから文字を入れたい!っていうとき

フォントを自分で指定して文字入れ。

スキンの画像は小さいので、ただフツーに文字入れをするだけだと、文字サイズを小さくするには限界があるので、画像サイズに文字が合わせられなかったり、最悪は文字がつぶれちゃったりします。

文字入れをしても、だいたいはすごく違和感のある文字になります。

少しでも違和感を減らすにはフォントを吟味したり、アンチエイリアスを切ったりする必要があります。

ペイントの機能でフツーに文字入れをしているところ

 

文字サイズは10
アンチエイリアス機能がはたらいて、滲んだ感じの文字になりました

ファイアアルパカで文字入れすると、アンチエイリアスをなしにできます
気に入ったフォントを探してみてください!(↑の画像の文字はメイリオです)

アンチエイリアス機能は、周りの色と違和感を無くすために、中間色を自動で作り出す機能(詳しくは調べて・・・)です。これが働くと、色が浮いてしまうことが少なくなるんですけど、全体的にボヤけて、水分を含んだような滲んだ感じの文字になります。
イラスト作成ならいい機能なんですけど、スキン作成の文字入れ時には厄介になりやすい機能です。

 

 

tips2:オリジナルの文字を自分で作るやりかた(ドット打ち

実は、ドット打ちで文字を入れると、一番キレイにオリジナル文字を表示できます。けれどこの方法はすごくハードで、作業量が多いのでかなり大変です。

なのでオススメはできません。でもやり方だけは書き残しておきます。

(ちなみにStarry HeavensシリーズとWhite Flowerで使っている文字は、ぜんぶこのドット打ちのオリジナル文字です)

 

 

これをペイントで開きます

 

妙な灰色の枠線がついてますね?

この枠線に沿って文字を入れるとキレイに入れられるんです

そのためにこのテンプレートを用意しました。

 

やり方は、このテンプレートをコピーして、ここに文字を先にドット打ちします。

文字が打ち込み終わったら、灰色の線を消して、できた新しいテンプレートをイラストの上に重ねます。

そうすると、文字も枠線と一緒にイラストの上に乗っかる形になります。

 

ドット打ちは地味~な作業なので、がんばってくださいー!

拡大してペンツールで、1ドットずつ打っていきます。

 

 

ぜんぶの装備箇所に文字を打ち込み終わったら?

 

最初から文字を全部打ってあるテンプレートを例に使います。

これがドット打ちが終わった段階です。

ここからイラストに重ねるわけなんですけど、今度はガイドラインとなっていた灰色の線が邪魔です。このままイラストと重ねたら灰色の線まで乗っちゃいます。

なので、灰色の線をぜんぶ白で消して、背景に同化させてしまいます。

白色を選んで灰色線をペンキで塗りつぶしするといいです。

 

そうすると・・・?

 

みごとに灰色の線がぜんぶ消えました!

これを新しいあなたのオリジナルテンプレートとして、別の名前を付けて保存しておいてください。

改めてイラストを開き、この作ったオリジナル文字入りテンプレートを重ねてください。

はい完成!これを保存してください

 

 

 

tips3:ドットでアルファベット文字を打つコツ

今回はStarry Heavensのシリーズで使っている、オーソドックスなドット打ち文字の作り方を説明します。

日本語をドット打ちするのは非常にむずかしいので、最初はやめた方が良さそう。

アルファベットは大文字も小文字も、実はドット打ちで表現するのがかんたんです。

なので、今回は初心者向けということで、アルファベットの作り方のみの説明になります。

 

アルファベットは奇数のドットだと上手く打てます

たとえば「A」というアルファベットをドットにするには?

5*5のドットで打つとよくわかります。

 

ファイアアルパカ5*5キャンバス

ファイアアルパカで5*5の新しいキャンバスを作りました。

これで「A」をドット打ちするとこうなります。

 

ファイアアルパカ5*5のA

Aは左右対称のバランスのいい字なので、5*5だとすっぽり収まります。

Aくらい作りやすい字だと偶数の4*4でもいけます。

 

ファイアアルパカ4*4のA

 

今度は6*6で打ってみました。どうでしょうか?

 

ファイアアルパカ6*6のA

う~ん? 悪くはないけれど、わたし的には伸びすぎな気がします。

空白が目立ってる感じ。やっぱり5*5が一番しっくりくるみたいです

 

 

他の文字はどうでしょう? アルファベットにはバランスの悪い文字もあります。

今度は「B」を打ってみます。

 

まずは4*4から。

 

4*4のB???

なんでしょうこれは? 下のマスが一行足りずに、下段の線が打てません。

Bにすらなっていません。。。

つまり、4*4だとBを打つにはマスが足りないということがわかりますね?

 

こんどは6*6です。

 

6*6のB

マスは足りているのでBにはなりましたけれど。

真ん中の線が太くなっちゃって、あまりBに見えません・・・。

 

 

じゃあ最後に5*5で。

5*5のB

全ての線が一本ずつ打てました。これならキレイにBに見えるんじゃないです?

これは拡大しているから見にくいけれど、拡大率を下げてみるとよくわかります。

 

拡大率を下げたB

わたしにはBに見えます。

7*7だと・・・?

7*7のB

今度は打てるマスが中途半端に多くて、キレイなBに見えづらくなりました。

色々試してみたけれど、ROスキンに使う文字なら、5*5が一番キレイに文字として見えるみたいです。

 

おまけ

 

9*9のB

5*5の次にキレイに見えたのは9*9でした。でも9*9だとROスキンで使うには大きすぎるので、あまり使えないと思います。やっぱり5*5がいいかも?

 

ちなみに小文字はドット打つのむずかしいです。

 

h(これはかんたん)

n(hとの違いは上の1ドットがあるかないかだけ)

m(一番左を上まで伸ばすか悩みます)

a(5*5で表現するのはかなりむずかしいと思います)

e(ギリギリ目いっぱいまでマスを使っています)

s(5*5だと高さがギリギリなので、大文字との区別がつけられません
ドット絵ならではの工夫で、横幅を縮めることで小文字っぽく見せようとしています)

 

S(大文字のSのつもり。高さで小文字と差を付けられません)

こういう風にドットで文字を打って、STRとかAGIとかの言葉にしていきます

あと、一度作ったドット文字は、白背景とかにして取っておくと使いまわしができます

後の方に書くボタン類を作るときに役に立ちます

 

ステータスウィンドウ(statwin0_bg)280*103

入れるのはbasic_interfaceフォルダ。

 

1.280*103に画像を切り抜いてください

2.statwin0_bgのテンプレートを重ねてください

3.オリジナルの文字を入れる場合は文字を入れてください

4.保存してください

 

縦のサイズが少し小さいので、win_msgboxを作ったときの画像を使いまわしても作れます。画像の上か下を切り落として280*103にしてください。

もうここまで書いたやりかたで作れるスキン画像です。

オリジナル文字を入れる場合は、文字ナシのテンプレートを使って、STRとかAGIとかVITとかの文字を用意してください。

 

ROのクライアントだとこんな風に表示されます

テンプレートを使わないで作ると、自分でこの枠線を引くことになるのでめっっっちゃ大変だと思います!

 

 

チャットルーム作成ウィンドウ(chatwin0_bg)280*103

入れるのはbasic_interfaceフォルダ。

作り方はさっきのステータスウィンドウとほぼ同じです。

 

1.280*103に画像を切り抜いてください

2.chatwin0_bgのテンプレートを重ねてください

3.オリジナルの文字を入れる場合は文字を入れてください

4.保存してください

 

ROのクライアントだとこんな風に表示されます

テンプレートを重ねただけだと色が気に入らないかもしれないので、色は自由にいじってくださいね?

 

アイテムウィンドウ(collection_bg)280*450

入れるのはbasic_interfaceフォルダ。

ちょっと大きめのスキン画像です。

 

1.280*450に画像を切り抜いてください

2.collection_bgのテンプレートを重ねてください

3.色などを好みに調節してください

4.保存してください

 

ROのクライアントだとこんな風に表示されます

 

ROのクライアントだとこんな風に表示されます2

 

アイテム取引ウィンドウ(exchange_bg2)560*360

basic_interfaceフォルダに入れます。

元の画像から560*360で切り抜いてください。ROスキン画像の中で一番大きいです。

win_msgboxとはまた別の背景模様にするのもおもしろいとおもいます!

それ以外の作り方は他のウィンドウと同じです。

 

1.560*360に画像を切り抜いてください

2.exchange_bg2のテンプレートを重ねてください

3.色などを好みに調節してください

4.文字ナシのテンプレートを使った場合は、send、zeny、get、zenyの4か所にオリジナルの文字を入れてください

5.保存してください

 

文字ナシテンプレートのときは4か所の文字を入れてください

こんなかんじで出来上がりました

 

ホムンクルスウィンドウ(homuninfo_bg)280*180

basic_interfaceフォルダに入れます。

アルケミスト系の人なら使うウィンドウ。それ以外の職業の人には無縁です。

でも配布するなら、配布した相手は使うかもだからちゃんと作ってあげてください。

メインウィンドウと同じように、経験値目盛りを自分で引くのはすごく大変なので、テンプレートをつかうのがオススメです!

 

自分で目盛りを引くやり方は、どこに目盛りを引けばいいかドット数を計算して、左から何ピクセル目、上から何ピクセル目とか・・・位置を計算して調べて突き止めないといけないので、ヒジョーにむずかしい超超上級者向けです!

なのでオススメできません。

 

目盛り以外の作り方は、サイズの違いだけなので、あとはテンプレートを使えば完成します。作り方は他のウィンドウとあまり大差ありません。

 

未実装の部分について

ROスキンの作り方2でも書いたことなんですけれど、ASPDの下に不自然な空白があるのが特徴です。このウィンドウは設定がバグっていて、この空白部分だけが中途半端に未実装となっています。なので、目いっぱい表示しようとしても未実装部分は空白になってしまい、表示されません。

途中で背景デザインが切れてしまうかもしれないので、デザイン的に注意してください。

 

1.280*180に画像を切り抜いてください

2.homuninfo_bgのテンプレートを重ねてください

3.色などを好みに調節してください

4.文字ナシのテンプレートを使った場合は、ATK、MATKなどのステータスにオリジナルの文字を入れてください

5.保存してください

 

こんなかんじで出来上がりました

 

最後に&次のROスキンの作り方7について

大きなメインのウィンドウ系はこれでほぼ作り終えました。あとは小さな細かいパーツ類になっていくので、次回の記事はもう少し細かいパーツづくりになっていきます。

 

オプションメニュー

 

ボタン

オプションの画像やボタン類を作るやり方などを書いていきます。

今回も最後まで読んでいただいて、ありがとうございましたー!


ROスキン制作のバックナンバー記事へ飛ぶにはこちら

nokoriga123.hatenablog.com

nokoriga123.hatenablog.com

nokoriga123.hatenablog.com

nokoriga123.hatenablog.com

nokoriga123.hatenablog.com

nokoriga123.hatenablog.com

nokoriga123.hatenablog.com