補講.2 レイヤー・改 2002/06/04(土) 講師:アイコン業者
レイヤを使ったアニメーション作製を簡単に解説します。(業者はレイヤ使いませんが……)

1.元の絵を描く
2.「表示>編集中のレイヤのみを表示」にチェックする
3.「ウィンドウ>レイヤ管理」にチェックする
4.「レイヤ>選択部分を新規レイヤに」を選択し元絵を複製
5.レイヤを選択しアニメーションを描く
(アニメーション枚数分4、5を繰り返す)
6.「ウィンドウ>ぱたぱたアニメ」でアニメーションを確認
7.「ファイル>全レイヤ書き出し」「連番を付加」しファイル名をつけてビットマップを出力
8.出来たアニメーションの連番BMPをフォトショップやHPビルダーでアニメーションGIFに変換して完成!

わからなければ、質問して下さい。
あと「選択領域をアニメーション領域にする」というのは、画像の一部分のみのアニメーション(ゲームに使う画像で目パチ口パクなど)を作りたいときに使う機能なので、アイコンでは使う必要はありません。

特別講義.2 記念プレートの作り方・改 2002/06/04(火)講師:店長
○元絵を作ろう。

前回の「アイコン作成を始めよう。」を参考に、DPixed.exeで基本ハボのアイコンを開いてください。拡大率は描きやすいように適時変更して問題ありません。
「編集」->「編集サイズの変更」を選択すると編集サイズ変更ウィンドウが出てきます。この中の「アスペクト比固定」のチェックボックスの設定をクリックして外して下さい。次に作成したいプレートのサイズの幅と高さを入力してOKを押します。
今回は幅160×高さ128にしてみましょう。(ちょっと大きいかな?)基本ハボの絵が左上にいって黒い未描画領域が出てきます。
そうしたらハボの廻りをプレートの背景に使いたい色で長方形になるように塗っておきます。(透明色はお勧めしません。なるべくメッセージに使う色との相性を考えてからした方が後悔しなくて済みます)
ツールウィンドウの最上段右から2番目の範囲指定を選択して、ハボの絵を囲むように範囲を決めて、「編集」->「切り取り」でハボの絵を切り取ります。画面からは見えなくなりますが、大丈夫です。
ツールウィンドウの上から2段め左端の筆を選択して、その4つ下の四角塗りを選択してパレットウィンドウからハボの廻りに塗ったのと同じ色を選択します。
これだとダブルクリックしたままドラッグして離すまでを対角線とした矩形範囲を塗りつぶせるので、画面の左上角から右下角までを一気に指定して同じ色で塗ります。
「編集」->「張り付け」で先ほど画面から消えたハボの絵が出てきます。自分の好きな位置に移動して貼り付けて下さい。これで元絵は完成です。あとはアイコン同様、ぷちぷちと打って加工します。

○背景を描こう。

別に背景が一色でも問題無いのですが、それだと少し寂しいので縁取りするとか、チェックにするとか、工夫してみてください。このときに注意するのは、メッセージをいれるときに使う色の邪魔にならないようにした方が良いでしょう。
レイヤーを使って別な絵の上にハボを書く方法も有るらしいのですが、そこまで詳しくないので今回は勘弁してください。

……というだけでは芸が無いので小技を一つ。上の項目の背景色の塗り方で、ハボを切り取った後、全面を透明色で塗っておき、筆を四角から丸に変更して不透明色で背景を丸く塗ってからハボを張りつければ、円形プレートのできあがり。(円に見えるだけで実際の領域は矩形です。)真円にしたければ「編集サイズの変更」で領域を大きめに作って、真円を描いてからできたものを範囲指定で切りとって、移動して張り直してから編集領域を調整すれば上手くいきます。

○メッセージを入れよう。

ツールアイコンの上から3段目、左端の「あ」と書いてあるアイコンを選択します。「文字の描画」ウィンドウが開くので、使うフォント、サイズ、等などを好みに合わせて変えながら、組み合わせを試してみましょう。一文字ずつフォントや色やサイズを変えてみたりしてもいいかもしれません。パレットウィンドウで文字の色を変更できます。
縦書きには対応していないので、どうしても縦書きにしたい人は、文字を書いた後で元絵を作ったときのように範囲指定で一文字ずつ移動すればできます。フォントを大きくすると文字のドットの段差が見えてしまったり、のっぺりとした感じになりがちなので、縁取りや影付けなどすると見栄えがする事も有ります。そのまま使うのも味ですが。
影付けの簡単なテクニックとしては、一度濃い色で書いたメッセージの上から、少しずらして同じ系統の明るい別な色で同じ文字を重ね書きする方法があります。

……完成しました? 応用すればバナーもできますね。

○作成したプレートを保存しよう。

保存方法は前回と同じ。

特別講義.1 D-Pixedの使い方改 2002/06/01(土) 講師:店長
○お絵描きツールを用意しよう。

最初にここで使うアイコン業者さんお勧めのD-Pixedというツールを用意します。

http://doichan.netbank.co.jp/software/dpixed/

からダウンロードできます。
ここでは解凍用ソフトのことを気にしないで良いようにダウンロードのページから自己解凍版を選びます。
(余談ですが、こういうフリーウェアを作ってくれた人のHPにスポンサーのページへのリンクが有る場合、お礼によって見るのが礼儀です)どこのフォルダにダウンロードしたかは覚えておきましょう。ダウンロードが終了したらそのHPは閉じておきます。

ダウンロードしたフォルダの中にあるdpix2171.exeのアイコンをダブルクリックして圧縮されたサイズから解凍して元の動くサイズにします。解凍先のフォルダは任意に指定できますが、わからなければそのままOKを押してもかまいません。

解凍が終わると指定したフォルダ、または指定してなければCドライブにD-Pixedというフォルダが作られて、中にDPixed.exeというファイルができているはずです。これがお絵描きツールの本体になります。後のファイルはあまり気にしなくてもOK。このショートカットを自分の使いやすいところに作っておくと便利です。

○基本ハボの絵を手に入れよう。

この掲示板の「基本ハボ」と呼ばれるハボの絵にカーソルを合わせて右クリック。「名前をつけて画像を保存」を選択して任意のフォルダを指定して保存します。このときにファイルの種類はPNG(*.png)のまま保存します。ビットマップ(*.bmp)で保存しないようにして下さい。(でもさー、スレがすぐ流れるからダウンロード用のページ作って欲しいよね。アイコン業者さんからの利用上の注意と一緒にして)

○アイコン作成を始めよう。

DPixed.exeを起動します。
「ファイル」->「絵を開く」で保存しておいた基本ハボのファイルを開きます。「表示」->「倍率」->「800%」で拡大すると見易くなります。つづいて「ウィンドウ」->「パレット」でアイコンに使っている色のパレットウィンドウを表示します。7色ぐらいしか色がついて出てきませんが、残りは空きエリアなので必要な色を作るときに使います。あとはツールウィンドウの右上に有るロットリングアイコンを選択すれば、メイン画面左下に「常に細い線を描画」という表示になってとりあえずの書き換えの準備は完了です。
あとはひたすらドットをぷちぷちと打って好きなアイコンを作ってください。ときどき表示倍率を100%に戻してバランスを見ながらやると良いです。

もっと便利な機能とかもあるようですが、俺も使いなれてないので今回は最低限の説明しかできません。各自で試してみましょう。面白い方法があったら、ここで発表してくれると嬉しいです。

○パレットに色を追加しよう。

色を追加するときにはパレットウィンドウの空いているエリアをダブルクリックすると、色指定用のウィンドウが開きます。R(赤)、G(緑)、B(青)の値を指定して好きな色を作ってください。
ただし、ブラウザによっては表示イメージが変わってしまうので、なるべく共通色(どのブラウザでも同じ色に見える色です)を使う方が良いでしょう。共通色の一覧は

http://www.lynda.com/hexh.html

を参考にして下さい。ここにかかれている使いたい色のそれぞれのR(赤)、G(緑)、B(青)の値を色指定用のウィンドウに設定すればその色が使えるようになります。別な色を追加する場合は色指定用のウィンドウの左上にあるパレット番号を変える
か、空いてるパレットウィンドウの空いているエリアをダブルクリックすればOK。

○背景を透明色にしよう。

アイコンの背景を透明にすることで、せっかく作ったアイコンの廻りに余計なゴミが見えないようになります。
今回の例では基本ハボのファイルをDPixed.exeで開いた時に、ハボの廻りに見えてなかった緑色の塗りつぶしがされてるのがわかりましたね。
これは透明色がどこに塗られているかを見易くするために、余り使われていない緑色を使って表示しているだけで、実際には緑色が塗られてもそこが透明になる訳では有りません。
パレットウィンドウのパレット番号0が透明色のパレットとして使われているので色指定用のウィンドウを開いて確認して見てください。他の色と違い、透明色のチェックボックスに設定があります。このため、緑色に見えても透明色として使うことができるのです。

緑色を使いたい場合は色の追加をするときに、透明色のチェックボックスを設定せずに緑色を作れば使えるようになります。ただし、その前に透明色表示用に使っているパレット番号0の色指定を先に、使っていない別な色にしておいた方が混乱しなくて済みます。

○作成したアイコンを保存しよう。

「ファイル」->「絵を保存」(または「名前を付けて保存」)を選択して保存します。
また、作っている途中でもこまめに保存しておけばフリーズしたときに助かります。

○作成したアイコンを発表しよう。

できたらここで見せてください。

おしまい。あとは部長とアイコン業者さんにお任せします。

補講.1 輪郭線の強調・改 2002/05/19(金) 講師:アイコン業者
1ドットの線だと細く見えるが、かといって2ドットにすると太すぎるそんな時は

1.斜めの線を補強する。(強調されすぎる場合、2と組み合わせて使用)
 ●○○   ●●○
 ○●○   ○●●
 ○○●   ○○●
2.隣接するドットに色をかぶせる。
 黒い輪郭線を強調したいとき、隣り合う色が白だった場合、灰色で隣のラインを塗ることにより、線を強調できます。

講義第1回 2002/02/22(金) 講師:アイコン業者
え〜、唐突ですがこれから講義を始めます。(笑) 第1回のお題はGIF特許問題についてです。 現在、アイコンの画像フォーマットと云うと、大抵、圧縮・透過・アニメーションの機能を持つGIFが使われます。 しかし、GIFには大きな問題があって、それが特許問題です。 GIFは 圧縮のアルゴリズムにLZWと云うアルゴリズムを採用しています。 このアルゴリズムの特許を、米Unisys社がもっているため、HPなどでGIF画像を使う場合、WEBライセンスと呼ばれるライセンス料を米Unisys社に支払わなければなりません。(自分で作った画像でなくても、GIFを使用する場合にはWEBライセンスが必要です) その額、なんと5,000ドル! 日本円で約50万円です!! 驚きました?……が、これはライセンスを取得していないツールを使った場合です。 PhotoShopなど有料のツールを使った場合、すでにメーカーがライセンス料を払っていますので、使用者が払う義務はありません。 しかし、安心してはいけません。 GIF素材やGIFバナーなどの、ネット経由の配布には、WEBライセンスとは別に、米Unisys社とライセンス料を交渉して、個別の契約を結ばなくてはならないのです。 WEBライセンス以下の額という事はないでしょうから、こんな契約を個人でしている方はいないでしょうね。 つまり、GIFを使った素材屋さんはおろかGIFバナーを使っているHPのほとんどは、違法HPということになるのです。 おそろしいですね。 ご清聴ありがとうございました。 GIF特許問題について簡単に解説させていただきました。 これからここではGIF特許問題を避けるため(というよりもGIFを扱える合法なフリーソフトがないため)、フリーソフトを使った、PNGフォーマットによる、アイコン製作を解説していきたいと思います。