透明PNGの実践テクニック！［3ページ目］

文字を載せて仕上げる

　最後に、多角形に文字を載せて仕上げていきましょう。ここでは「new!」という文字を載せてみます。

　ツールバーで「テキストツール」を選び、適当な場所で「new!」と入力します。文字の大きさや色などを調整して、多角形の上辺りに移動しましょう。

　続いて、レイヤーパレット上のレイヤーをダブルクリックして「レイヤースタイル」ダイアログを表示します。ここでは、へこんだ感じを出してバッジに掘ってあるような演出をするため、左側のメニューから「ドロップシャドウ」を選んで、角度をマイナスにすることでへこんだ感じを出していきます（図3-1）。

　そしたら、ツールバーから「移動ツール」を選んで画面上部で「バウンディングボックスを表示」のチェックをつけます（図3-2）。すると、大きさなどを調整するハンドルが画像の周りに表示されるので、これをつかんで大きさを自由に変更したり、回転させたりして、よりよく見えるように配置しましょう（図3-3）。

　これで完成です。後は、先の手順と同様に背景などを非表示にした状態で、スライスを作成し、メニューの「ファイル → Webまたはデバイス用に保存」から、PNG-24形式で書き出します。

　そのまま貼（は）り付けて利用することはもちろん、CSSで「display」プロパティを「absolute」とするなどして、座標値で調整できるようにすれば、サイト内の好きな場所で使うことができます。もちろん、背景に影響されることがないため、非常に使いやすいパーツと言えるでしょう。

　完成ファイルをダウンロードできますので、参照ください（562KB）。

これからの「画像形式」使い分け術

　PNG画像は軽く、美しく、扱いやすい画像を作ることができます。そのため、もはやJPEGやGIF形式は必要ないと言っても良いかも知れません。実際、PNG画像の魅力に引かれ、PNGだけでWebサイトを作る人も少なくありません。

　しかし、せっかく3種類の画像形式があるため、やはりそれぞれの特長を見極めてしっかり使い分けることが重要と言えるでしょう。第1回（http://thinkit.jp/article/708/1/）で「イラストはGIF、写真はJPEG」という使い分けを紹介しました。ここに、PNG画像も加えると、「イラストはPNG、写真はJPEG、アニメーションはGIF」と言えるでしょう。

　まず、イラストについてはこれまで紹介した通り、250色以上の色数が扱え、半透明の処理などができることからPNGが優れていることは言うまでもありません。

　しかし、前回（http://thinkit.jp/article/728/2/）の解説の通り、「可逆圧縮」を利用しているPNG画像は、JPEG画像に比べると圧縮率が低く、サイズが多少大きくなってしまいます。そのため、写真についてはこれまで通りJPEG形式を使うのが良いと言えます。

　そして、アニメーションについては、PNGのアニメーション機能である「MNG」形式は一般的ではなく、今後の発展も期待できないため、アニメーションGIFを使うのが良いでしょう。

　さらに、画像形式以外にも目を向ければ、複雑なアニメーションは「アニメーションGIF」よりも「Flash」の方が優れていると言えますし、印刷を想定している場合は「PDF」などのファイル形式を使うことも必要です。

　各画像形式、ファイル形式の違いや特長をしっかり理解し、適材適所でより良いものを選んでいくことが、より美しく、軽く、見やすいWebサイト作りにつながります。