〜マンガの為のHTML入門〜
Step8.0:イメージファイルをそろえよう！
“イメージファイル”とは
簡単に言うと絵や写真といった
静止画を扱うファイルの総称です。
総称ですから、
その中にはさらに細かい種類がある訳です。
代表的なものは
ウインドズのビットマップ{BMP}や、
アドビのイメージフォーマット{PSD}
……等でしょうか。
左図は代表的な(…かどうかは解りませんが)
イメージファイルのアイコンです。
画面上ではアイコンの違いで
ファイルの種類がわかります。
また文字などのデータの場合には、
ファイル名の拡張子
(ファイル名の最後の『.(ドット)』の後の末尾の文字)
でどの種類のファイルか
わかる様になっています。
ちなみに静止画を扱うイメージファイルに対して
文字を扱うファイルをテキストファイルと呼びます。
ここまでやってきたHTMLは、このテキストファイル形式の
代表でしょう。(これも他に多々あります。左図参)
文字のみのHPの場合は、
HPのデータ本体であるHTMLファイルだけで
HPを作る事ができます。
しかし、マンガの場合は
そこにイメージファイルで絵を
貼り付けないといけません。
絵を貼り付けるには「貼り付ける！」
という命令(タグ) と
「貼り付けるべき絵のデータ
(つまりイメージファイル)」が必要です。
ここまでのStepでやってきたのは、いわば
「命令を書き込む」作業でした。
ここからは
「貼り付けるべきデータの方を用意する」
作業になります。
さて、先にイメージファイルには
「幾つか種類がある」と記しましたが、
HPで使うのは主に
“.jpg［ジェイペグ］”か“.gif［ジフ］”
のどちらかです。
白黒のマンガを素材にする場合には
どちらを使っても良いのですが、
カラー作品やカラーイラストの掲載まで考えると
“.jpg”の方が少し有利だと思います。
ところで今更なんですが、
マンガをイメージファイルにするには
最低限、次の３つはの物が必要です。
まずは
“パソコン”です。
まぁ、これは今この画面を見ている段階で
ほとんどの人はクリアしてる条件でしょう。
(ネットカフェなんかで見てる人は
頑張って買ってください)
次に必要なのが
“スキャナー”です。
もっとも、中には『マンガを直接PC内で描く！』
というツワ者もいるでしょう。
そういう方には、これは必要がない道具です。
また、『デジカメで代用してる』と言う人も
中にはいるかもしれませんね。
本人が画質的にそれで納得をしてるなら、
まぁ、それはそれでOKとする事にします。
最後に
画像を加工するためのグラフィック系、
またはフォト系のソフトです。
ただし『マンガを描く』というのではないので、
次の機能が最低限あれば、
安物ソフトや古いソフト、
あるいは無料ダウンロードで
手に入るものでも構わないでしょう。
その必要な機能とは
１：解像度を変換する機能
２：最低B4サイズのグレースケールモードで
300dpiの２つの絵(原稿を)を
合成する事ができる機能。
(これは半分はPCのメモリーの大きさも影響する)
３：他の形式のイメージファイルを
“.JPG”もしくは“.GIF”変換する機能。
…の３つです。
では、これらの道具が揃ってる方は、
早速作業を開始しましょう。
まず、お手持ちの画像処理ソフトを起動させ
スキャナーで原稿を読み取って下さい。
ここで注意すべきなのは取り込む際の
“画像モードの選択”と“解像度の設定”です。
ブラウザの画面表示は個々が持つモニターの大きさや
画面設定に左右されるのである。
モニターの画面の性能を示す単位に
“ピクセル”と言うのがあります。
例えば最近のノートパソコンの画面は
横が1024ピクセルで
縦が768ピクセル程度が普通です。
この場合、ブラウザの画面を最大にしても
ブラウザの外枠分をひくと、
横950ピクセル縦650ピクセル程度以上の
解像度の絵(イメージファイル)は
画面からはみ出してしまう訳です。
これを計算に入れるとHP用の画像は
せいぜい解像度で90dpiもあれば
計算上は事足りるサイズの
ファイルとなるはずです。
その為スキャナーの取り込みの設定を
グレースケールモード/90dpiにする人がいます。
…が、
しかしここでは、それは止めておく事をお勧めします。
取り込みの設定は『線画モード』
(ソフトによっては『2階調モード』とか
『モノクロ』『8ビットモノクロ』
とか言う表現の場合もあります)
解像度は『300dpi』以上(600dpi推奨)で取り込んで下さい。
取り込んだ後に『グレースケールモード』に変換し、
それから解像度を必要な分だけ下げてください。
では、何故最初からグレースケールモードの
低い解像度で読み込みをしてはいけないのか？
答えは下の図を見て下さい。
図の左上が600dpi線画モード(2階調・モノクロ)で入力した画面。
その下が150dpiの白黒写真モード(グレースケールモード)で入力した画面です。
下の方が全体にくすんでいるのが解るでしょうか？
実は、これは“紙の色”なのです！
肉眼では白く見える紙ですが、
機械にとってはあれは薄い灰色に読めるらしく
結果、本来真っ白であるべき部分がくすんでしまうらしいのです。
また、右の拡大図を見て下さい。
下の方は、少女の前髪と後ろ髪の色合いが
違っているのが解ると思います。
これは線の細さを替えるために違うペンを使って描いている部分に
若干の濃さの差が現れてしまっているのを
機械が『違う色』として読み込んだためにおこった現象です。
グレースケールにおいては同じ黒でも少しの濃さの差が
この様にはっきりした形であらわれてしまう場合があるのです。
「カラー原稿の下絵」とすれば
少し雰囲気があるかもしれませんが
これを白黒印刷するととんでもない事がおこってしまいます。
その例が右中段の拡大図です。
これは２つの絵にあるフィルターをかけて
擬似的に粗い印刷状態にした物の拡大図です。
グレースケールの方の少女は、
まるで日焼けしてしまっている様に
トーンがかかってしまっているのが解ると思います。
B4サイズを取り込める
スキャナーを所有している人は
600dpiの線画モードで取り込んだ絵は、
合成する必要がないので
急な停電など、万一の事を考えて
早めに［保存］しておきましょう。
A4サイズでしか取り込めない
スキャナー所有者は
上下に分けて取り込んだ画面を
横210〜240mm、縦330mm以上の
新規画像(グレースケール/600dpi)を立ち上げて
それを台紙として使って、分割取り込みのものを
1枚の原稿に合成し、
それをオリジナルとして[保存]して下さい。
この[保存]の際に、
ファイル名をつけてしまいましょう。
[保存]できたら、
それをグレースケールの
60dpi〜120dpi程度まで
解像度ダウンします。
*この時グレースケールにする事を
忘れないように…
モノクロ2階調モードのまま
解像度を落とすと
下図のようになってしまいます。
解像度の変換の違いが
HP上の絵のサイズの差になるので注意して下さい。
ポイントは解像度の数字よりは、
絵全体の縦横のピクセル数です。
ちなみに
“S-1”の1ページのピクセル比は
およそ
横400：縦560。
(以下単位はピクセル)
“S-2”の場合は、横800：縦560。
“M-1”は横490：縦700。
“M-2”は横980：縦700。
“L-1”は横600：縦835。
“S-3”および“M-3”はそれぞれの１＆２の解像度変換のサイズの組み合わせです。
また『マンガ浪人スタイル(7-Q)』を選択された方は
ここでオリジナル原稿とは別に作業用複製をコピーし
それを適当なコマで綺麗にカットして
横長サイズのページを再編成してください。
『マンガ浪人スタイル(7-Q)』の場合、
縦が最大560ピクセル、横幅は790ピクセルと考えて
縦横のピクセル数をそれ以下に加工してさい。
*各サイズの画像はあくまでサンプルですので、正解には記述サイズとは少し違います。
*参考図(下)：解像度の変換の前後の具体的な比較。
(左が変換前/600dpi 右が変換後/72dpi)
解像度変換が終わったら、
［複製を保存する］から
ファイル形式“.jpg”もしくは“.gif”を選択。
ファイルの収納場所をHP用のフォルダーの中にして、
最後にファイル名を
HTMLファイルに書き込んだ名前にして
［保存］します。
うまくいっていれば、これまであった
マークの場所に
今収めた画像が張り付いているはずです。
HTMLファイルのアイコンを開いて確認してみてください。
Step9.0へ
*イメージファイルの作成に関して、もう少しだけ詳しく知りたい方は
ここをクリックして
下さい。
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。
Step0.1(INDEX)に戻る
|
|
“イメージファイル”とは 簡単に言うと絵や写真といった 静止画を扱うファイルの総称です。 総称ですから、 その中にはさらに細かい種類がある訳です。 代表的なものは ウインドズのビットマップ{BMP}や、 アドビのイメージフォーマット{PSD} ……等でしょうか。 左図は代表的な(…かどうかは解りませんが) イメージファイルのアイコンです。 画面上ではアイコンの違いで ファイルの種類がわかります。 また文字などのデータの場合には、 ファイル名の拡張子 (ファイル名の最後の『.(ドット)』の後の末尾の文字) でどの種類のファイルか わかる様になっています。 ちなみに静止画を扱うイメージファイルに対して 文字を扱うファイルをテキストファイルと呼びます。 ここまでやってきたHTMLは、このテキストファイル形式の 代表でしょう。(これも他に多々あります。左図参) 文字のみのHPの場合は、 HPのデータ本体であるHTMLファイルだけで HPを作る事ができます。 しかし、マンガの場合は そこにイメージファイルで絵を 貼り付けないといけません。 絵を貼り付けるには「貼り付ける！」 という命令(タグ) と 「貼り付けるべき絵のデータ (つまりイメージファイル)」が必要です。 ここまでのStepでやってきたのは、いわば 「命令を書き込む」作業でした。 ここからは 「貼り付けるべきデータの方を用意する」 作業になります。 さて、先にイメージファイルには 「幾つか種類がある」と記しましたが、 HPで使うのは主に “.jpg［ジェイペグ］”か“.gif［ジフ］” のどちらかです。 白黒のマンガを素材にする場合には どちらを使っても良いのですが、 カラー作品やカラーイラストの掲載まで考えると “.jpg”の方が少し有利だと思います。 |
|---|
|
|
ところで今更なんですが、 マンガをイメージファイルにするには 最低限、次の３つはの物が必要です。 まずは “パソコン”です。 まぁ、これは今この画面を見ている段階で ほとんどの人はクリアしてる条件でしょう。 (ネットカフェなんかで見てる人は 頑張って買ってください) 次に必要なのが “スキャナー”です。 もっとも、中には『マンガを直接PC内で描く！』 というツワ者もいるでしょう。 そういう方には、これは必要がない道具です。 また、『デジカメで代用してる』と言う人も 中にはいるかもしれませんね。 本人が画質的にそれで納得をしてるなら、 まぁ、それはそれでOKとする事にします。 最後に 画像を加工するためのグラフィック系、 またはフォト系のソフトです。 ただし『マンガを描く』というのではないので、 次の機能が最低限あれば、 安物ソフトや古いソフト、 あるいは無料ダウンロードで 手に入るものでも構わないでしょう。 その必要な機能とは １：解像度を変換する機能 ２：最低B4サイズのグレースケールモードで 300dpiの２つの絵(原稿を)を 合成する事ができる機能。 (これは半分はPCのメモリーの大きさも影響する) ３：他の形式のイメージファイルを “.JPG”もしくは“.GIF”変換する機能。 …の３つです。 では、これらの道具が揃ってる方は、 早速作業を開始しましょう。 まず、お手持ちの画像処理ソフトを起動させ スキャナーで原稿を読み取って下さい。 ここで注意すべきなのは取り込む際の “画像モードの選択”と“解像度の設定”です。 ブラウザの画面表示は個々が持つモニターの大きさや 画面設定に左右されるのである。 モニターの画面の性能を示す単位に “ピクセル”と言うのがあります。 例えば最近のノートパソコンの画面は 横が1024ピクセルで 縦が768ピクセル程度が普通です。 この場合、ブラウザの画面を最大にしても ブラウザの外枠分をひくと、 横950ピクセル縦650ピクセル程度以上の 解像度の絵(イメージファイル)は 画面からはみ出してしまう訳です。 これを計算に入れるとHP用の画像は せいぜい解像度で90dpiもあれば 計算上は事足りるサイズの ファイルとなるはずです。 その為スキャナーの取り込みの設定を グレースケールモード/90dpiにする人がいます。 …が、 しかしここでは、それは止めておく事をお勧めします。 取り込みの設定は『線画モード』 (ソフトによっては『2階調モード』とか 『モノクロ』『8ビットモノクロ』 とか言う表現の場合もあります) 解像度は『300dpi』以上(600dpi推奨)で取り込んで下さい。 取り込んだ後に『グレースケールモード』に変換し、 それから解像度を必要な分だけ下げてください。 では、何故最初からグレースケールモードの 低い解像度で読み込みをしてはいけないのか？ 答えは下の図を見て下さい。 |
|---|
図の左上が600dpi線画モード(2階調・モノクロ)で入力した画面。
その下が150dpiの白黒写真モード(グレースケールモード)で入力した画面です。
下の方が全体にくすんでいるのが解るでしょうか？
実は、これは“紙の色”なのです！
肉眼では白く見える紙ですが、
機械にとってはあれは薄い灰色に読めるらしく
結果、本来真っ白であるべき部分がくすんでしまうらしいのです。
また、右の拡大図を見て下さい。
下の方は、少女の前髪と後ろ髪の色合いが
違っているのが解ると思います。
これは線の細さを替えるために違うペンを使って描いている部分に
若干の濃さの差が現れてしまっているのを
機械が『違う色』として読み込んだためにおこった現象です。
グレースケールにおいては同じ黒でも少しの濃さの差が
この様にはっきりした形であらわれてしまう場合があるのです。
「カラー原稿の下絵」とすれば
少し雰囲気があるかもしれませんが
これを白黒印刷するととんでもない事がおこってしまいます。
その例が右中段の拡大図です。
これは２つの絵にあるフィルターをかけて
擬似的に粗い印刷状態にした物の拡大図です。
グレースケールの方の少女は、
まるで日焼けしてしまっている様に
トーンがかかってしまっているのが解ると思います。
|
B4サイズを取り込める スキャナーを所有している人は 600dpiの線画モードで取り込んだ絵は、 合成する必要がないので 急な停電など、万一の事を考えて 早めに［保存］しておきましょう。 A4サイズでしか取り込めない スキャナー所有者は 上下に分けて取り込んだ画面を 横210〜240mm、縦330mm以上の 新規画像(グレースケール/600dpi)を立ち上げて それを台紙として使って、分割取り込みのものを 1枚の原稿に合成し、 それをオリジナルとして[保存]して下さい。 この[保存]の際に、 ファイル名をつけてしまいましょう。 [保存]できたら、 それをグレースケールの 60dpi〜120dpi程度まで 解像度ダウンします。 *この時グレースケールにする事を 忘れないように… モノクロ2階調モードのまま 解像度を落とすと 下図のようになってしまいます。
|
|
|---|
解像度の変換の違いが
HP上の絵のサイズの差になるので注意して下さい。
ポイントは解像度の数字よりは、
絵全体の縦横のピクセル数です。
ちなみに “S-1”の1ページのピクセル比は
およそ 横400：縦560。
(以下単位はピクセル)
“S-2”の場合は、横800：縦560。
“M-1”は横490：縦700。
“M-2”は横980：縦700。
“L-1”は横600：縦835。
“S-3”および“M-3”はそれぞれの１＆２の解像度変換のサイズの組み合わせです。
また『マンガ浪人スタイル(7-Q)』を選択された方は
ここでオリジナル原稿とは別に作業用複製をコピーし
それを適当なコマで綺麗にカットして
横長サイズのページを再編成してください。
『マンガ浪人スタイル(7-Q)』の場合、
縦が最大560ピクセル、横幅は790ピクセルと考えて
縦横のピクセル数をそれ以下に加工してさい。
*各サイズの画像はあくまでサンプルですので、正解には記述サイズとは少し違います。
*参考図(下)：解像度の変換の前後の具体的な比較。
(左が変換前/600dpi 右が変換後/72dpi)
解像度変換が終わったら、
［複製を保存する］から
ファイル形式“.jpg”もしくは“.gif”を選択。
ファイルの収納場所をHP用のフォルダーの中にして、
最後にファイル名を
HTMLファイルに書き込んだ名前にして
［保存］します。
うまくいっていれば、これまであった
マークの場所に今収めた画像が張り付いているはずです。
HTMLファイルのアイコンを開いて確認してみてください。
Step9.0へ
*イメージファイルの作成に関して、もう少しだけ詳しく知りたい方は ここをクリックして 下さい。
なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。
*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。