PR

透明PNGの実践テクニック!

2008年12月25日(木)
たにぐち まこと

文字を載せて仕上げる

 最後に、多角形に文字を載せて仕上げていきましょう。ここでは「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サイト作りにつながります。

Think IT会員限定特典
  • 「透明PNGの実践テクニック!」サンプルプログラム(1)

  • 「透明PNGの実践テクニック!」サンプルプログラム(2)

株式会社エイチツーオー・スペース
東京代々木でWeb制作業を営む、デザインユニット。「ちゃんとWeb」というコーポレートテーマで、なんとなくキレイ、なんとなく動いているサイトではない「ちゃんとした」サイト作りを心がける。現在は、「ちゃんとWeb.net」や「aquanotes Shop.」などのサイト運営を通じて、Webの運営担当者に啓蒙中。http://h2o-space.jp

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています