HOWTO -J

更新日 1998年 6月 5日

Macビギナーのためのインターネットグラフィックテクニック

　E-mailでやりとりした、このホームページを作成するのに使用したソフトやテクニックを、ちょっとしたヒントにでもなればと考え、まとめてみました。
　私自身、まだMacビギナー、インターネットビギナーの域を出ておらず、必要に応じて勉強中です。ここに書かれたことに対し、おかしいところとかもっといい方法とかあると思います。御指導、あるいは御質問、Formにてどんどんお願いいたします。
　なお、Macユーザーだったらぜひ訪れたいホームページ、KOBAのMac Island、ここを知ったらもう、あなたはMac通です。

基礎編
Photoshop編
GifBuilder編

基礎編

インターネットwwwでの画像取込

Netscape Navigatorでネットサーフィン中に気に入った画像を見つけた時は、その画像をドラッグしてやると、画像ファイル操作メニューが開きます。
メニューに従って好きな名前で好きなフォルダに保存して下さい。
Netscape Navigatorではインターネットから受け取るファイルをMacのハードディスク上のCacheフォルダに保存します。それを利用して、ネットサーフィン終了後にCacheフォルダから画像ファイルを拾い出します。
ファインダーのメニューバーで「表示/日付」にてCacheフォルダを見ると、ブラウズした逆の順に表示されます。容量の大きいgif、jpeg、jpg等の拡張子の付いたのはまず画像ファイルなので、おおよその見当をつけてPixelCatなどの画像ソフトで開き、アイコンを付け、取捨選択整理します。

画像ファイルの整理

画像ファイルの整理にはPixelCatがとても便利です。フリーウェアで、こちらにあります。ソフト最新版のダウンロードだけでなく、様々な情報や詳しい操作方法があります。
　http://www.ceres.dti.ne.jp/~yokki/top.html
画像アイコン張付、スライドショウ、画像カタログ、スクリーンサイズへの画像縮小表示、様々なフォーマット画像ファイルのPICT・StartupScreen・JPEG・MAG等への変換などができ、とても便利です。
また、Windows95で作成した画像などそのままでは画像ファイルとして認識してくれませんが、PixelCatは大丈夫です。PixelCatで一度開いてやれば、以後全てのアプリケーションで問題なく画像ファイルとして認識してくれるようになります。いわば、画像ファイルのJeditと言えます。

インターネットwwwをハードディスクに取込

Internet Magazineの付録CD-ROMなどに入っているLib 0.83というfreewareを使うと、ネットサーフィンしたwwwをパソコンのハードディスクに再現することができます。
動作環境
　　・Macintosh Plus以降
　　・System 7.1以降で漢字が表示できるもの
　　・HyperCard J1-2.21以降
　　・Netscape 1-3
使い方
1.　Lib 0.83をダブルクリックすると、HyperCard上のLibが立ち上がります。
最初の場合はSet UpのCardを開いて必要事項を設定します。
Build UpのCardを開いて、全てか欲しいwwwを指定する（複数可）か選択して走らせます。
2.　しばらく待つと処理が終わて、指定フォルダの中にサーバー名のついたフォルダができます。
3.　指定フォルダの中を見ると、サーバーにあった時と同じ構成でフォルダやファイルができています。Cacheフォルダ内のファイルが名を戻されて再現整理された形です。
5.　ネットスケープで開きます。そのファイルをクリックすれば、Netscapeが立ち上がります。
注意
どんどんwwwをハードディスク内に取り込んでいくと、ハードディスク内のファイル数が急激に増大します。Mac OSにあまり負担をかけぬよう、1つのパーティションのファイル数は8000以下に抑えましょう。
Lib 0.83の最初の処理は、どうもキャッシュファイルの途中から開始されることがあるようです。念のため、一旦処理が完了してから、もう1度処理をかけた方が確実です。

Photoshop編

勉強方法

Photoshopの利用は、まずは、スキャナーやデジタルカメラなどからの画像取り込みと、その画像を整え、保存するところが主だったところです。
[イメージ/色調補正] や、[イメージ/画像解像度]　[イメージ/画像サイズ]　[フィルタ/シャープ] などがその主役達で、ことによったら [モード] を使ってモノクロを楽しんだり256色パレットをいじりまわすかもしれません。JPEGの画像圧縮で悩むところです。
これから一歩進めて、画像に他の絵を重ねたり、合成したり、変形したり、色調を変えたり、グラディエーションを付けたり、チャンネルに分解していじったりしはじめ、「おたく」にはまっていきます。こうなると、CGコンピュータグラフィックやっていると言ってもはずかしくないレベルに入ったかなというところです。
同じサイズの画像を2つ用意して、[イメージ/演算] の乗算、明るいほう、暗いほう、%合成などを試されてみることをお奨めします。
Photoshopのように多彩な機能を持ち際限もなく広がりのあるソフトの学習には、やはり、必要最小限を習得、それから必要に応じて少しづつマスターしていくことが近道という気がします。
勉強の順序は、まずは、画像の取り込みとPhotoshop形式File、PICT形式File、JPEG形式FILEなどへの書き出しです。
画像の取り込みは、2.0Jだと [開く]　[指定形式で開く]　[入力用プラグ] の3つに大別され、自動的に選択されず指定しなければならない場合があります。2.5では、ファイルのダブルクリックまたはアイコンのドラッグアンドドロップによる自動選択の幅がひろがっているため、ずいぶん楽だと思います。
画像の書き出しも、2.0Jでは [保存]　[別名で保存]　[出力用プラグ] から選択していかねばなりませんが、2.5では、一本化されていて、どんどん選択してゆくだけで済みます。
次に、メニューパレットの機能を理解してやればよいと思います。この際、複数の画像を開いて、メニューパレットの [選択ツール（長方形）]　[選択ツール（楕円）]　[なげなわ選択ツール]　[自動（魔法の杖）選択ツール] を使ってコピーアンドペーストしたり、deleteしたりしてみるとよいでしょう。この際、ついでにメニューバーの [イメージ/鏡像・回転・変形] や [選択範囲/選択範囲の反転・境界線上の領域を選択] その他も試みて、選択領域を操る操作を習得することがあとでとても役立ちます。
それと共に、メニューパレットの [塗りつぶしツール]　[ブレンドツール（描画色と背景色のグラディエーション）]　[消しゴムツール]　[鉛筆ツール」「エアーブラシツール]　[ブラシツール]　[指先（ぼかし）ツール]　[スタンプ（オプションキーを押しながらマウスをドラッグして選択した位置を始点とした画像を、次のマウスドラッグ地点からマウスを動かした部分にコピーしてゆく）ツール]　[ぼかしツール] などを選択部分に施してみたらいかがでしょうか。修正写真、合成写真、思いのままです。
メニューパレットの [テキストツール] を選択して画像のどこかをクリックすると文字を自由に書き込めます。年賀状やポスター用ですね。
こんな感じでいろいろやりだすと、飽きません。知り合いの人の写真をいじりまわしすと、タブーに触れている気までします。
楽しんでやってみて下さい。

画像圧縮

jpeg画像圧縮は、ぱっと見て画面にヨレが現れるかどうか位に留めたいものです。
私の場合、ホームページの画像をちょっとヨレが出る程度まで落としていますが、これは、一般のアクセス者が対象なので、重いと見てもらえないだろうとの判断からです。一応、一頁あたり容量が合計100kbiteを越えないことを目安にしています。
また、ラージファイルを付けていますのでコミュニケーションからも支障ないだろう、との判断です。
jpeg圧縮時の目盛は、通常、左から3目盛、仕上がりをみて2目盛から6目盛位まで調節します。圧縮するまえに、Photoshopでシャープをかけておくと若干画像劣化を防げます。いずれにしろ、ホームページ用画像づくりの中ではとても影響の大きい工程と思っています。
Compuserve GIFによる画像圧縮は、小さな画像や色数の少ない画像には、画像劣化が少なく、とても有効です。白黒（モノクロ2階調）画像を例えば青とクリームの2色の画像（カラー2階調）に変換しても圧縮後のGIFファイルのサイズは同じです。
Photoshopの画像処理の中にはRGBカラーやグレースケールでないとできないものもありますので、[モード] でRGBカラーやグレースケールに一旦変換し、Photoshopで画像処理後、[モード] でインデックスカラーやモノクロ2階調に変換、Compuserve GIFで保存します。
Compuserve GIFによる画像圧縮でファイルサイズを小さくするためには、使用色数の削減が不可欠です。[モード] でRGBカラーやグレースケールに一旦変換し、[モード] でインデックスカラーに変換する際、「RGBカラーをインデックスカラーへ」のウインドウで、[パレット] の「使用中の色に合わせて割り付ける」を選択したうえで「解像度（色数）」で [その他] を選択し、画像を確認しながら最小の色数を指定し、できるかぎり4・8・16・32・64・128色に押さえ込むようにします。なお、その色数には、白と黒及び使用中の色となりますので、そのへんを考慮して指定します。

カスタムカラーパレット

GifBuilder等によるGIFアニメーションのための画像の複数ファイルは、極力ファイルサイズを抑えてやるのが望まれます。このための手段としてカスタムカラーパレットの作成と使用がとても有効です。
単にそれぞれの画像に対して最適のインデックスカラーを用いると、GIFアニメーションでは、最初のコマのGIFファイルのインデックスカラーパレットで以降のGIFファイルも表示されてしまうため、色が変になってしまいます。
これを避けるには、アニメーションGIF作成の際GifBuilder等でカラーを指定する方法もありますが、カスタムカラーパレットを作成してその色を使っての画像に変換してやると、アニメーションGIFでの効率的な色設定と最終的な色数の把握が可能です。
方法
- まず、用いる複数の画像ファイルを [モード] でRGBカラーに一旦変換し、それらを合成して全ての色が含まれる画像を作成します。これには、全ての画像ファイルを [イメージ/画像解像度] を使って縮小したものをコピーアンドペーストで張り合わせてやればよいでしょう。
- 次に、その画像を [モード] でインデックスカラーに変換します。この際、前項の最後で述べた、画像を確認しながらの最小の色数、8・16・32・64・128色に押さえ込むようにします。
- そのうえで、[モード/カラーテーブル/カラーテーブルの編集] を行います。
  このウィンドウで、「保存」を選択、適切な名前を付けてインデックスカラーのカラーパレットであるカラーテーブルを保存します。これが、カスタムカラーパレットになります。
  これがすめば、作成した全ての色が含まれる画像は廃棄します。
- このうえで、GIFアニメーションのための画像ファイルをすべて、このカスタムカラーパレットを用いたGIFファイルに変換します。
  画像ファイルを開き、 [モード] でRGBカラーに一旦変換し、[モード] で再度インデックスカラーに変換する際、「RGBカラーをインデックスカラーへ」のウインドウで、[パレット] の「カスタム」を選択し、さきほど作成保存したカラーテーブルを読み込み、「OK」をクリックします。そして、GIFファイルで保存します。
  前の作業からカラーテーブルが変更されていなければ、カラーテーブルを読み込まなくてすみます。

フォント指定文字

原則的に、Internetでは、少なくともNetscapeではフォントの指定はできなません。フォントを活かそうとすると、全て、*.GIFや *.JPEG等の画像ファイルの形にして、それを張り付ける必要があります。
やりかたは、photoshopの、メニューパレットの「Ｔ］を使います。なお、日本語は日本語バージョンでないとだめです。
具体的には、下記のようにします。
フォントサイズが24point程度の場合にも、その2倍程度、すなわち、48point程度で画像を作ります。
- メニューバーの「ファイル/新規」で、一文字あたり高さ44pixels幅44pixelsとして、書く文章にあった画像を作ります。
- メニューパレットで、背景色、画像色を指定します。指定しないと、背景色は白、画像色は黒です。
- 次に、メニューパレットの「Ｔ］をクリックして選択してから、画像の左端中央をクリックします。
- 文字ウインドウが開きますので、文字のフォントにコーパス江戸勘亭流を選択、文字サイズに48pointを指定、必要であれば斜体などのスタイルや、行揃え（横書・縦書と、中央揃・左詰・右詰）も指定します。それから、下のダイアログボックスに、文章を書きます。改行も使えます。
- O.K.をクリックすると画像に輪郭が破線の状態の文章がのっかりますので、マウスで文章の文字のどこがに移動、矢印状態になったところでマウスをドラッグして好きな位置まで文章を移動します。そしてクリックすると文章の輪郭の破線が消えて画像としてできあがります。
- メニューバー「イメージ/画像解像度」を使い、縦ないし横をpixels表示にし、1/2の数を入力、O.K.をクリックします。これにより、画像が1/2に圧縮されます。
- メニューバー「フィルター/シャープ」から「シャープ」を選択して画像圧縮でぼけた画像をシャープにします。
- あとは、*.GIFや *.JPEG等の画像ファイルの形にして保存し、作業終了です。
フォントの種類によっては、もっと小さい10point程度の文字にすることも可能ですが、毛筆体だと20point程度程度が限度だと思います。
いずれのフォント、文字サイズでも、48point程度を使って文字を作り、それを画像圧縮してやらないと、輪郭にぎざぎざが目立つきたないものになってしまいます。これは、文字ウインドウで、アンチエイリアシングを選択することである程度抑えられます。

周辺ソフトの入手

info-MACに、photoshopに関するソフトがいろいろあります。ASAHI-net他のRing-server等のミラーサイトから入手できます。
http://ring.asahi-net.or.jp/archives/mac/info-mac/_Graphic_&_Sound_Tool/_Graphic/_PhotoShop/

GifBuilder編

ソフトの入手

GifBuilderはGIFソフトにはめずらしくFreewareいやMailwareで、info-MACにあります。ASAHI-net他のRing-server等のミラーサイトから入手できます。
http://ring.asahi-net.or.jp/archives/mac/info-mac/_Graphic_&_Sound_Tool/_Graphic/ にgif-builder-04.hqxがありますので、クリックしてダウンロードできます。
Internet Magazineの付録CD-ROMにも収録されてます。

透明(Transparency)GIF

GifBuilderによる透明(Transparency)GIFは簡単です。
カラーファイルは、RGBカラーとしてphotoshopで加工後、[モード] でインデックスカラーに変換し、gif形式で保存する。
白黒（モノクロ2階調）ファイルは、グレースケールとしてphotoshopで加工後、[モード] でモノクロ2階調に変換し、Compuserve GIF形式で保存する。
これをGifBuilderで開き、Window/Show FramesでFrameを表示させると、Frame1としてFrameのなかに入っている。
このFrame1をクリックにより選択して、Options/Transparent Backgroundから透明にさせる色を指定する。
あとは保存して、Netscapeなんかでファイルを表示し、透明を確認して作業終了。

アニメーションGIF

方法
- アニメーションとして表示したい複数のGIFファイルを用意します。
  なお、GifBuilderのほうで [Options/Colors] により、インデックスカラーのカラーパレットをいじることも可能です。
- GifBuilderを立ち上げ、[Window/Show Frames] でFramesのWindowを表示します。
- [File/Add Frame] で用意したGIFファイルを指定し、FramesのWindowに順次取り込みます。この時、最初に取り込むGIFファイルは、アニメーションをサポートしていないブラウザを考慮し、アニメーションにならない場合に適切なもので、表示エリアと同一サイズとした（最大表示範囲）ものとします。また、もちろん表示する順番に取り込んで行きますが、FramesのWindowでコピーアンドペーストで、同一画像を複数回使用したり、並べ替えたり、削除したりもできます。
- [Options/Default Transparency] で、透明GIFの設定をします。
- [Options/Frame Position] で、最初のFrameに対する各Frameの位置を定めます。座標は、pixels単位で、最初のFrameの左上端を（0,0）とした設定Frameの左上端の位置を（横,縦）で指示します。
- [Options/Interframe Delay] で、各Frameの表示時間を1/100秒単位で指定します。
- [Options/Disposal Method] で、各Frameの表示後の処理を指定します。
- [Options/Loop] で、アニメーションさせる回数を指定します。複数のｗｗｗページに同じアニメーションGIFを使う場合は、[Forever] を指定しないと、あとで開いたページではアニメーションが止まってしまう事になりますので、注意が必要です。
- あとは [File/Save As] で保存して、Netscapeなどでファイルを表示し、アニメーションを確認して作業終了。
以上の作業で、コマンドキーを押しながらFrameをマウスで選択すると、複数Framesを選択することができます。
html文書でのアニメーションGIFファイルの扱いは、全く普通のGIFファイルと同じです。
[Options/ Interlaced] で、Interlaced GIFファイルとすることができます。
取り込むGIFファイルの縦横pixelsサイズは、必ずしも同一の必要はありません。また、Frame同士重複していて最初のFrameから書き換えない部分は、GifBuilderにより省略してサイズを縮小させることができます。

サイバーバストホームページへ

　　written by Tsutomu Higo 肥後　勉