|
| |
※「セキュリティ保護のため...」というメッセージが出る方・日本語が入力できない方へ
(5)画像の貼り付け
今日は前回作った表紙のページにタイトル画像を貼り付けることにします。 画像データの作り方はだいたい下記の流れです。 (1)適当なお絵かきソフト／文字修飾ソフト／３Ｄソフト／地図作成 ソフト／書道ソフト／などなどで画像を作る、 または手描きのイラストをスキャナで取り込む。 またはデジカメで写真を撮る。 (2)それを必要ならトリミング・色の調整などをして、更に必要なら減色 し、最後に PNGまたは JPEGで保存する。 もうひとつ、画像を作るのではなく、フリーの素材集から調達する手もあり ます。素材集は書店やパソコンショップでも売っていますし、ホームページ で公開している人もあります。ホームページでフリー素材を公開している人 の中には、依頼があれば希望のものを作りますよ、と書いてあるところもあ ります。 なお、画像を作るソフトとしては、次のようなものがあります。 ・MacPaint なんともシンプルなソフトだが、簡単な絵はこれで十分。 ・KidPix 子供向けではありますが...意外と使えます(^^) 私は初期 のころ、これに随分助けられました。 ・Photoshop 超強力なソフトですが、どちらかというとこのソフトは 画像の調整用と考えた方が良さそう。 ・Illustrator 複雑なイラストをパソコン上で描くにはこれ以上強力な ものはないですが、....ＷＷＷデザインでは Illustrator のお世話にならないといけないほどの画像は少ないかも。 ・Director 超お勧め。このソフトのピクチャー作成能力はものすごい。 とてもおまけの機能とは思えない。操作性も抜群。 起動するのにかかる30秒ほどの時間さえ我慢すれば、簡単 な絵でもMacPaintより、Directorで描いた方が絶対速い。 また画像を減色したり、PNGやJPEGに変換するソフトも多数ありますが... 基本的には Photoshopでやるのが、楽だと思います。とにかくこのソフト は、使い勝手がよく考えられています。 今回は、いきなりPhotoshopでいこうと思いますが、ゼロから作るのではな く、フリーの素材集を使います。今回はインプレスのホット＆プライベート から BAN_134 を使います。 これを Photoshopで開き、「現代的人体装飾図鑑」という文字を明朝体で 埋め込みます。今回は32ポイントの文字を指定し、アンチエリアシングは 掛けませんでした。 さて、この画像を64色以下まで減色し、いったん GIF89a 形式の透明GIFで 保存します。 ※ フリーの素材集をＣＤから使う場合、属性が書き込み禁止になっています。 それをそのままファインダーでコピーしてきた時は、書き込み禁止を解除 してやらないとあとでフォルダの整理などをするときに苦労することが あります。 ※ フリーの素材集の多くは『そのまま使うこと』だけを許可しています。 ただし、そういう場合も、上記のような文字を埋め込む程度の加工は たいてい許可されています。 インプレスのこのシリーズの素材集は、どんな加工をしても構いません と書いてあるので、たいへん重宝しています。値段も他社のものに比べ て異常というほど安いので、何冊か手元に置いておかれると便利かと 思います。大きな書店にはたいていあると思います。 ※ 写真を使う場合、建物の著作権や、人の肖像権に注意してください。 ■組み込み さて、この画像を前回のホームページのトップに埋め込みます。 PageMillは機能的には、他のソフトに比べて見劣りしますが、唯一誇れるの が、強力なドラッグ＆ドロップ機能です。この場合も、ファインダー上に 表示されている title.gif を、PageMill上の該当個所へドラッグ＆ドロップ するだけで、ここに画像が埋め込まれます。 あとは、まず文字で書いていた「現代的人体装飾図鑑」を削除し、この画像 を選択した上で、属性パレットの代替レベルの所に「現代的人体装飾図鑑」 と入力します。この文字は、実際にブラウザでこのページを見たとき、画像 が転送されてくるまでの間、代わりに表示されます。 ■メールアドレスの埋め込み 今回、画像とは関係ないのですが、著作権表示のところに、メールアドレス を埋め込んでおくことにします。操作は次のようになります。 (1)著作権表示の「楠木奈々」を選択する (2)その状態で、画面下部の「リンク先」のところをクリック (3)そこに メールアドレスを入力する。 ■カウンターを設置する。 やはりホームページを作ったら「あなたは何人目のお客様です」とか出して みたいものです。カウンターを設置しましょう。 まず、ページ先頭の「ここは人体に....」の前に「いらっしゃいませ。あな たは人目のお客様です」と入力し、その「人」の字の前にカーソルを置いて 表示メニュー／ソースモードで、直接ＨＴＭＬコードを編集するモードに 入ります。そしてそこに次の文字列を指定します。 <img src=@geocounter> 打ち間違いがないかどうか確認の上、ソースモードを解除します。 ※PageMillのソースモードはあまり使いやすいとは思えません。この程度 ならまだなんとかなりますが、長時間ソースモードで作業するのでした ら SimpleTextでもいいですから、テキストエディタでやった方が楽です。 ■アップロード ここで一度アップロードしてみましょう。今度は title.gif という画像も 必要ですから、アップするときは、これを忘れないようにしてください。 むろん一回ｕｐすればそれでＯＫです。 こちらで試験的に作ったものは下記にｕｐしました。 http://www.geocities.co.jp/Stylist/3206 ※実際には上記のサイトには GIF ではなく PNG でアップしています。 ※カウンタを入れた時にはGeocitiesツールで初期設定が必要です。 ■減色／圧縮について ホームページにおいては、いかにページを軽くするかというのが課題です。 そのためには、ページのデータ量の大半を占める画像データを如何にして 小さくするかということが問題になります。その手法は主として次のよう なものです。 ・色数の少ないイラストなどはPNG、写真などはJPEGの方が軽い。但し グラデーションの掛かっているイラストは JPEGの方が小さくなるこ ともある。 ・イラストの縦横のサイズは出来るかぎり小さくする。周りに白い空間 などがあったらカットする。写真などで一部しか必要なければトリミ ングする。そして場合によっては縮小を考える。 縮小するつもりがある場合、文字は縮小後入れて下さい。でないと つぶれてしまいます。 ・PNGの場合大雑把に言えば 6ビット(64色)のデータは 8ビット(256色) のデータの 3/4 になるから、減色ができないか検討する。（ただし ヘッダーの部分や繰り返し指定の部分のサイズは変わらない）実際に 何段階かに減色して、データサイズと画質とのバランスを見て、一番 適切な所を選択する。 鉛筆で描いた単色の線画などは思い切って２色まで減色する。 ・JPEGの場合も、サイズと画質とを見て、一番適切な圧縮率を見つける。 一般には、かなり小さめに減色・圧縮するのを普通の設定にしておき、 それでまずかったら、減色・圧縮する前のデータ（これを保存しておくの を忘れると、たいへんなことになる ^^;）に戻って、やり直すのがよいで しょう。 ■画像フォーマットについて ホームページで使う画像は、主として JPEG,GIF,PNGの３種類です。 GIFはCompuServeが開発した通信用画像形式です。元々が通信用なのでコンパ クトにまとめられるのが特徴。ただし256色までしか色が使えないので写真な どや、グラデーションのある画像は減色が必要。減色は普通誤差拡散方式が きれいですが、イラストの場合はむしろ、ディザを掛けない方式の方が美しく なることがあります。 CompuServeはその後会社が分割して売却されてしまいました。現在この権利 をどこが管理しているのかは知りません。いろんな人に聞いてみたのですが みんな知らないと言いました。 GIFはとても優秀な画像形式なのですが、実はUnisysの特許に触れています。 このため現在もはや無料では使用できなくなっており、多くのサイトで現在 GIFから新形式であるPNGへと切り替えが進んでいます。PNGは作成者グループ が完全にフリーに使用して良いことを宣言しています。 GIFがどちらかというとイラスト向きであったのに対して、JPEGは写真向き です。またGIFに色数があるのに対してJPEGには色数はありません。JPEGは フルカラーの画像を扱います。 しかし代わりにJPEGには圧縮率があります。圧縮は非可逆圧縮ですので、 圧縮率をあげるほど、画像はきたなくなります。しかし圧縮するほどバイト 数は小さくなりますのでバランスが必要です。 PNGの場合はGIFと同様の2/4/16/256色の画像のほかに、8bit,16bit,24bit, 48bitといったフルカラー画像も取り扱うことができます。
