THEATER CROSSROAD
Building Homepage
 シアター・クロスロード 劇団ホームページを作ろう!
Lesson 5: ページに画像を入れよう 〜ペイントツールで描いてみよう〜
プロフィールのページもできたしええ感じや。でもなんか字ばっかりやな。
そやな…とりあえずはテキスト中心できてたからな。まあもうすぐホームページ作りのソフトを入れるから、そこでいろんな素材をとってきて、絵を入れよ。
でもタイトル画ぐらいはほしいと思わへんか?
そやな…じゃあとりあえず、タイトル画を作ってページに使おか。
よっしゃよっしゃ。このぼくらの絵も管理人が描いてるんやろ?
そうなんや…まあ管理人に絵ごころゼロなのはみてわかるし、本人も重々承知はしてるんやけどな、こんなのはとりあえず自分で描く方がええような気もするんや。味も出るしな。もちろん劇団やから、仲間内に誰かは絵ごころのある人がおると思うねん。その人に描いてもらえばええねん。
そやな。管理人は孤独なやさぐれ人やから、自分で描くしかないねんな。うちの舞台美術担当の人が、めっちゃ絵うまいねん。よしゃ、頼んでみるわ。
…。
…。
…もーわかった!おまえに描かしたるから!泣くな!
わりわり、管理人も昔は舞台美術担当やったんやな。ようこの絵ごころで…まあええわ、がんばってくれい。
管理人の機嫌も考えなあかんので、すみません(敬語)。(急にテンション高く)さあ、絵を描くにあたっては注意しなければならないことがあるんだ!(標準語)
だいたい絵を描くのってなんで描くんや?管理人は一太郎についてた「花子フォトレタッチ2」でいつも描いてるんやけど。
もちろんもっと高い、高機能ツールで描いてもええねん。管理人はそんなんもってても宝の持ち腐れやからな。あ、すげー、こんなにぴったり来る表現がかつてあったろうかいやない!(反語) でもこのページの趣旨はなるべく金を使わない、っちゅうのがあるからな。ということでフリーのソフトを探してみてん。
お、オンラインソフトいうやつやろ?しっとるしっとる。でもWindowsにも「ペイント」いうお絵かきツールがあるやろ?あれじゃあかんのか?
それでもええんやけど、難点が1つ。それはビットマップ形式(*.bmp)でないと保存できへんねん。ビットマップは一番簡単な絵の形式なんやけど、ファイルサイズがめっちゃでかなるから、ホームページにはあまり使えへんねん。たまーに1メガぐらいあるビットマップのトップ絵を載せてるページがあるけど、目を覚ませ!って感じや。ということで選ぶポイントは2つ。
  1. ふつうのお絵かき(ペイント)ができるか
  2. 圧縮画像形式で保存できるか
で、もちろんフリーソフトやな。
そこでたくさんダウンロードして(管理人が)調べてみました。 これなんかはいかがでしょうか。スクリーンショットはこんな感じ。…ってどこがええんかようわからんのやけど。
このソフトは上の2点をクリアしてるだけやのうて、レイヤーやマスクやフィルターや、プラグイン機能まで、とにかくめっちゃ高機能やねん。ようこれがフリーであったなっちゅう感じや。もしお使いの方で、気に入った方は、作者さんに寄付でもしてあげはってください。あとアイコンもおしゃれやな。フリーソフトで性能はいいのに、「このアイコンをデスクトップに置けと?」っていうアイコンのがあるけど、これはかわいいし。
なんだかしらんが、とにかくよし!(覚悟) ポイントの「圧縮画像形式」ってなんや?画像を圧縮してるんか?
…そのままやけど、その通りなんや。画像にはいろいろ形式があるんやけど、今ホームページで使われてる代表的なのは、JPEG形式(*.jpg)とGIF形式(*.gif)なんや。JPEG形式は写真とかに向いてて、GIF形式は素材とかに向いてる。今回の絵でもほんとはGIF形式をおすすめしたいねん。でもGIF形式は最近、作った人が著作権を主張したらしくって、ソフトとかでサポートするにはライセンスがいんねんな。だからフリーソフトではまずサポートできへんねん。
おのれGIFめ!だれかわからへんけど>作者。じゃああかへんやんけ。
でな、最近PNG形式(*.png)っちゅうのんが新しく出てきてんねん。ほとんどGIFと同じくらいの性能(?)があって、ライセンスフリーやから、フリーソフトでもサポートできる。PictBearももちろんサポートしてるで。昔はブラウザの方がサポートしてへんかったんやけど、今はふつうに読み込んでくれるからな。とりあえずこのコンテンツの絵はGIFなんやけど、君の劇団のページで使う絵については、PNGでいけば問題はなさそうやで。
よしゃ!じゃあこれで描いて、PNGっちゅうのんで保存すれば、タイトル画完成やな!管理人、頼むで!
きみのためを思うてまかせるんやから、ええの描いてや>管理人。…よしゃ。描けたか。どや。
なめとんのんかワレ!
うーわ、ほんとにまじめにやっとんのんかコラ!
なに、「ゴルゴ13風のパンダと、横溝正史の映画風の題字にこだわりました」?わかりにくっ!
「本物のパンダの画像を探してきて、色もチェックしました」?まあ確かにあれわかりにくいけど…どうする?
…もう苦渋の選択やな。まあ評判悪かったらすぐ劇団の人のタイトル画と替えてまお。
あくまで講座用の暫定という位置づけで。しょうがないから使おう。
トップページに入れるのはタグを使えばすぐなんやけど、それやと経過がわからんなるから、もう1回最初から作ろう。「ファイルマネージャー」っていうので"index.html"をいったん削除して(これやらんとページが作れへんのやけど、注意してやってな)、もう1回Lesson3でやった要領でつくる。タグがわかる人はIMGタグを適当なところに入れればええで。
それで、「画像を使う」のところで、まずファイルをアップロード(サーバに送る)せなあかんみたいやな。



「参照」のボタンを押すと、パソの中身が見られるから、作ったファイルを指定すると、アップロードできるんや。
そしたら、あとは送ったファイルを画像に指定したらええねんな。で「保存」で「終了」と。



ブラウザで確認すると…うわ、なんかでかいなー!この画像。
なんかTripodのツールバーよりでかいし…定着しないうちにほかの画像を用意したいとこやね。管理人はともかくとして、絵ごころのある人は自分で素材を作って、自分の味を出してるみたいやから、ぜひチャレンジしてはどないでっしゃろ。
大丈夫!このうつけ管理人のページがまかり通ってるんやから、誰でもできるで。
なるほど。さすが人生反面教師のだめ人間やな。
…。
…。
…泣くなっちゅうねん。
落ち込んでる管理人は気にせんといて。それじゃまた次回に、チャオ!
←第4回に戻る 第6回に進む→

Performed by Grazie and Chao
彼らへのファンレターはこちらへ。

「劇団ホームページを作ろう!」トップページへ