Web用のグラフィックを理解する - Museのチュートリアル

このレッスンでは Web 用のグラフィックを 更に深く理解していただく為の 内容を解説します 特に印刷物のデザインをやられた方は 拡張子の ai tiff psd pdf Illustrator 用のファイルとか tiff とか Photoshop 用ファイル又は pdf これらはお馴染みだったと思いますが 実はこれらは全て Web では使えません Web デザインで使える画像ファイルは 次の三つが殆どです JPEG PNG GIF の 三種類が Web デザインでは 主に使われます それぞれの特徴を見てみましょう まずJPEG ファイルは 写真に向いています 写真のような様々な内容が ごっちゃになっているー そのような画像に向いています 実際 例えばスマートフォンの カメラとかデジカメで 撮影すると JPEG で 撮られているものが多くあります JPEG はファイルサイズを小さくできます 圧縮率を変えることで 元の圧縮していないファイルを 何分の一という小さいファイルにできます その代わり圧縮すると圧縮率に応じて 画質が劣化します ファイル容量が大きくてもよければ かなりキレイにはなるんですが 容量を小さくすると特に Web 向けに 圧縮していくとどうしても 画質は劣化してしまいます 次は GIF です GIF が向いてるのはフラットな塗りの お店や会社のロゴのような ものに向いています 逆に GIF は 256 しか色が使えないので あまり細かいグラデーションには 向いていません GIF の大きな特徴としては アニメーションが作れます Web サイトでアイコンが 回転してるようなのを 見たことがあると思いますが GiF で作られていることが多いです アニメーションと言っても 動画のムービーファイルのようなものは作れませんが パラパラ漫画のような簡単な動きを作ることができます そして 限定的だが透明な部分が作れます ロゴですと ロゴの文字以外の部分が 透明に抜けてほしいわけですが そういう部分を透明に 設定することができます ただその透明部分との境界線を グラデーションできれいに作れないので ほんとにスパッと色が変わってるものしか 作れないという特徴があります 三つの中では一番新しい規格である PNG の特徴ですが GIF と同じように透明部分を作れますが…