PhotoshopでWebデザイン

ウェブ用のファイル形式

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
WEBデザインに使用する画像ファイルフォーマットの使い分けをみていきます。
講師:
03:00

字幕

Web デザイン用の画像のファイル形式を見ていきたいと思います。基本的に、3種類しかありません。GIF、「ギフ」とか言われたりするこの GIF と JPEG と PNG です。この3種類ぐらいしかありません。基本は JPEG を使うのは皆さんご存知かと思います。どういう時に PNG を使うのかこの画像の場合右下にドロップシャドウがありますよね。半透明の素材です。こんな感じに、半透明とか透明のピクセルが必要な時は PNG を使います。JPEG には透明がありません。GIF は透明が一応あるということにはなってるんですが透明ではなくて、背景の一色に対して馴染ませるという特殊なことをやっています。なので実際の透明ではないんですね。なので、できれば透明物を扱う時は、PNG です。次に JPEGどういう時にこのJPEGを使うかこの JPEG フォーマットは写真に強いです。写真の様な画像を小さく圧縮するのに一番長けています。なので、透過処理が必要でない場合透明の必要がない場合は JPEG です。この GIF は何に使うのか実はこの JPEG にも弱い点があります。写真を扱うのが得意なんですが一色塗り、こういうベタ塗りは下手です。 拡大していきましょう。この辺で見えるかと思うんですがこの背景、青い一色のはずですよね。でもこの辺ロボットの頭の近くを見てあげるとなんかぼわぼわしてるかと思います。圧縮ノイズであったり、人間の目を誤魔化してファイルサイズを小っちゃくしているので一色じゃない何かがこう入ってるんですね。この辺も見えますよね。逆に、GIF というのはインデックスという種類の画像の種類で扱える色の数が非常に少ないです。なのでベタ塗りの絵には非常に向いています。きれいですよね。ロボットの色は全部同じこの色。黄色いところ、オレンジのところ、青いところきれいに分かれてるかと思います。比べましょう。JPEG、ジャムジャムしてます。GIF、GIF がきれいですね。なので、こういうロゴとかあとは一色の背景塗りとかそういう時に使うのは GIF です。JPEG は写真透明物は PNG。この PNG が一番ファイルサイズ的には重たくなってしまいます。もちろん、この透明を扱う分データの量は多いです。なので、透明がなければ JPEG、GIF写真なら JPEG、ロゴなら GIFこんな感じの使い分けになってるかと思います。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。