ウィンクにチャレンジ

ウィンクというのは「目を開いた」状態と、「目を閉じた」状態で成り立っています。

「レインボー」で紹介した【 GIMP ですぐデキる! フォトレタッチ・スーパーテクニック 2005 】にも GIMP を利用した方法が載っています。

ここでは pictbear SE でチャレンジしてみようと思います。
そうは言えども、私自身「絵」を描くのが苦手なので自信はありません。
化粧品屋さんの美容部員になったつもりで‥‥

材料

887 、これをサンプルに使います。

拡大 1,367

拡大してみました、と言っても通常の方法ではありません。
小さい画像を Flash にして、拡大してキャプチャーしたのです。
Flash の方が拡大による劣化が少ないからに他なりません。

実際の作業も拡大した状態でなければ細部が作れません。

作業

自分でウィンクしたり、他人の瞬きを見ているとわかるのですが、瞬きは「下瞼」に動きは感じられません。 それに対し、ウィンクというのは「片目」だけですから、下瞼に動きができます。

しかし言ってみれば「寝顔」を作るわけではありません。
わずか 0.1 〜 0.2 秒のことです。 大雑把でも差し支えはないと思います。
ものの本やサイトには「瞼に質感を与える」などのの方法が解説してあったりします。 しかし、そんなに大きな目を作るのでなければ、無視していいかと思います。

1,662 1,637

小さいのでわかりにくいかも知れません。

全開 5 秒、半開 0.1 秒、閉じた状態 0.15 秒、半開 0.1 秒の4コマ構成にしてあります。

ウィンク・アニメ 11,958

肖像権保護のため、残念ながらこんなカタチに。
ホントならウィンクしたときには、眉毛も少し下がるのですが、省略しました。

軽量化のコツ

位置さえ合わせれば 1,956

● ウィンクする目の周辺だけの画像を使うのが一番です。 位置だけ合わせればよい。 切り抜く位置を覚えておくこと。

JTrim で作業するなら、このように表示されますから、覚えなくてもいいでしょう。

1,757

大窓で使うには

ウィンクでなくても、大窓と言われる画像でアニメーションさせると、「とんでもない」ほど「重く」なります。
従って、ウェブサイトで使う場合には html の基礎知識も必要になります。

blank
blank blank

このソースは
<div style="text-align: center">
<table cellspacing="0" cellpadding="0" style="background-image: url ('ファイル名'); height: 240px: width: 320px; border: none" summary="窓画像">
<colgroup style="width:53px"></colgroup>
<colgroup style="width:212px"></colgroup>
<colgroup style="width:55px"></colgroup>
<tr style="height: 75px">
<td></td><td>
<img src="ウィンク画像.gif" alt="ウィンク" style="height: 19px; width: 25px; margin-top: 40px; margin-left: 80px">
</td><td></td>
</tr>
<tr>
<td></td><td>
<iframe src="ファイル名.html" name="インライン・フレームの名前" scrolling="auto" style="width:212px;height:120px" frameborder="0" allowtransparency="true"></iframe>
</td><td></td>
</tr>
<tr style="height: 45px">
<td></td><td>
<iframe src="クリッカブルマップを表示するファイル.html" name="インライン・フレームの名前" height="45" width="212" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</td><td></td>
</tr>
</table>
</div>

画像に似合わないほど大きな目にしましたが、感覚を掴んでいただければ、それで結構です。

広告なしのサーバーではインラインフレームにして組み込むこともできます。

こんな方法も

ある人はこんな方法を用いていましたが、これも写真画像の場合には有効です。

こうすると、gif になっても他の部分の劣化を防ぐことが出来ますね。
文字入れしたとかなどはまた別の問題になります。
ただし、掲示板などでは使えませんが‥‥

そのときのソースは
<table> <tr> <td> <img src="aaa.jpg" height="xx" width="yy" alt=""><br><img src="bbb.gif" height="xx" width="yy" alt=""><br><img src="ccc.jpg" height="xx" width="yy" alt=""> </td> </tr> </table>

余談になりますが、上の画像は「GIMP」で作ったもので、これだけの画像を作るに、モーション・ブラーを4回、ガウスボカシを6回、グラデーションを6回も使っているのです。 作成した元の画像(別窓)

メニュー提供 : DHTML Menu By Milonic JavaScript