こんにちは。デザイナーをしています、まつこです。
エンジニアブログなのですが、ちょいと記事を書くことになりました。
どうぞよろしくお願いします。
ちなみに総合テーマは、
「文系WEBデザイナーにだって生きる道はあるはず」
こちらで今後も記事を書いていく予定です。
なんでWEBを選んだんだと言われればそれまでですが、やりたいんです。WEBで生きたいんです。
文系WEBデザイナーはいつもWEBがもっと感覚的になればいいのにと思っています。
なんで英数字で書かないといけないんだと思っています。
そういう視点からWEBデザインに必要な知識を紹介していきます。
文系でWEBデザイナーになりたい方は、参考にしてください。
理系の方は、文系WEBデザイナーと話すときの参考にしてください。
第1回目は「ファイルの違い」です。
------------------------------------
一般的にWEBサイトを作るときには「gif」とか「jpg」を使うことが多いです。
なぜ。
「gif」とか「jpg」を使うことが多いのは、ちょっと前のブラウザは表示に制限があってそれ以外の画像がほとんど使えなかったからです。
最近はそういう制限があまりなくなってきたので他の画像も使えるようになってきました。
じゃあ「psd」は使えるのか。
それはムリです。
なぜ。
そういう「なぜ」を解消するために、よく使われる画像について簡単に説明をします。
■gif
最大256色まで使用可能です。アイコンや単純なイラストなどで使用します。ドット絵作ったらこれで保存します。
パラパラマンガ式のアニメーションが作成できます。アニメバナーはこれで作ります。
背景透明に出来ますが、端がジャキジャキになるのであまり使いません。
■jpg
画像を圧縮して保存します。保存を繰り返すたびに再圧縮して劣化するので繰り返さない方がいいです。一度劣化したものはもう元に戻らないですから。
写真のような複雑な表示のもので使用します。
■png
「png-8」と「png-24」の2種類あります。
「png-8」は、「gif」とよく似ています。最大256色。
しかし！「gif」より容量が軽いのです！IE6を切り捨てるのであれば、「gif」じゃなくて「png」で保存した方が軽いページになります。
「png-24」は、とてもキレイに透明を表現できます。背景透明にしたい画像はこれを使います。
ただ、その分ちょっと容量重いですけどね。
■bmp
無圧縮なので容量が重いです。
私はあんまり使いません。
■tiff
画像を劣化させることなく保存できます。photoshop等で作業中のレイヤーも保持可能。
DTPで扱う写真データはよくこれで保存されてるようです。(今まで見た中では)
とても容量が重ーーい事が多いです。
■psd
「photoshop」で普通に保存したらこれになります。
作業中の全てのデータが保持されます。
ただし、「photoshop」を持っていないと開くことは出来ません。
‥みんなが見れないならwebで使えないですよね。冒頭のギモン解決です。
（もっと簡単に言うとブラウザが「psd」に対応していないだけという答えもありますが）
ソフトについてはまた別の機会に書こうかなあと思います。
■ai
「illustrator」で普通に保存したらこれになります。
「illustrator」を持っていないと開くことは出来ません。持っていてもバージョンの違いによって開かなかったりします。
納品するときはバージョンを10くらいまで落として保存します。(2009年4月現在の最新はCS4)
■eps
「ai」で作ったデータを印刷屋に出すときに、これで保存するよう指定されたりします。
「ai」より互換性が高くて、「illustrator」を持っていなくても対応するソフトを持っていれば開きます。
■fla
「flash」で普通に保存したらこれになります。
作業中の全てのデータが保持されます。
flashを持っていないと開くことが出来ません。
■swf
「flash」で作ったデータをweb表示用に書き出したファイルです。
よくこのファイルを編集してくださいとわたされますが、基本的に出来ません。見るだけです。
普段よく登場するファイルはだいたいこんな感じです。
なんとなく違いが分かったでしょうか？
WEBデザイナーはこんなファイル達と仲良く楽しく仕事をしています。
ではまたお会いしましょう。
エンジニアブログなのですが、ちょいと記事を書くことになりました。
どうぞよろしくお願いします。
ちなみに総合テーマは、
「文系WEBデザイナーにだって生きる道はあるはず」
こちらで今後も記事を書いていく予定です。
なんでWEBを選んだんだと言われればそれまでですが、やりたいんです。WEBで生きたいんです。
文系WEBデザイナーはいつもWEBがもっと感覚的になればいいのにと思っています。
なんで英数字で書かないといけないんだと思っています。
そういう視点からWEBデザインに必要な知識を紹介していきます。
文系でWEBデザイナーになりたい方は、参考にしてください。
理系の方は、文系WEBデザイナーと話すときの参考にしてください。
第1回目は「ファイルの違い」です。
------------------------------------
一般的にWEBサイトを作るときには「gif」とか「jpg」を使うことが多いです。
なぜ。
「gif」とか「jpg」を使うことが多いのは、ちょっと前のブラウザは表示に制限があってそれ以外の画像がほとんど使えなかったからです。
最近はそういう制限があまりなくなってきたので他の画像も使えるようになってきました。
じゃあ「psd」は使えるのか。
それはムリです。
なぜ。
そういう「なぜ」を解消するために、よく使われる画像について簡単に説明をします。
■gif
最大256色まで使用可能です。アイコンや単純なイラストなどで使用します。ドット絵作ったらこれで保存します。
パラパラマンガ式のアニメーションが作成できます。アニメバナーはこれで作ります。
背景透明に出来ますが、端がジャキジャキになるのであまり使いません。
■jpg
画像を圧縮して保存します。保存を繰り返すたびに再圧縮して劣化するので繰り返さない方がいいです。一度劣化したものはもう元に戻らないですから。
写真のような複雑な表示のもので使用します。
■png
「png-8」と「png-24」の2種類あります。
「png-8」は、「gif」とよく似ています。最大256色。
しかし！「gif」より容量が軽いのです！IE6を切り捨てるのであれば、「gif」じゃなくて「png」で保存した方が軽いページになります。
「png-24」は、とてもキレイに透明を表現できます。背景透明にしたい画像はこれを使います。
ただ、その分ちょっと容量重いですけどね。
■bmp
無圧縮なので容量が重いです。
私はあんまり使いません。
■tiff
画像を劣化させることなく保存できます。photoshop等で作業中のレイヤーも保持可能。
DTPで扱う写真データはよくこれで保存されてるようです。(今まで見た中では)
とても容量が重ーーい事が多いです。
■psd
「photoshop」で普通に保存したらこれになります。
作業中の全てのデータが保持されます。
ただし、「photoshop」を持っていないと開くことは出来ません。
‥みんなが見れないならwebで使えないですよね。冒頭のギモン解決です。
（もっと簡単に言うとブラウザが「psd」に対応していないだけという答えもありますが）
ソフトについてはまた別の機会に書こうかなあと思います。
■ai
「illustrator」で普通に保存したらこれになります。
「illustrator」を持っていないと開くことは出来ません。持っていてもバージョンの違いによって開かなかったりします。
納品するときはバージョンを10くらいまで落として保存します。(2009年4月現在の最新はCS4)
■eps
「ai」で作ったデータを印刷屋に出すときに、これで保存するよう指定されたりします。
「ai」より互換性が高くて、「illustrator」を持っていなくても対応するソフトを持っていれば開きます。
■fla
「flash」で普通に保存したらこれになります。
作業中の全てのデータが保持されます。
flashを持っていないと開くことが出来ません。
■swf
「flash」で作ったデータをweb表示用に書き出したファイルです。
よくこのファイルを編集してくださいとわたされますが、基本的に出来ません。見るだけです。
普段よく登場するファイルはだいたいこんな感じです。
なんとなく違いが分かったでしょうか？
WEBデザイナーはこんなファイル達と仲良く楽しく仕事をしています。
ではまたお会いしましょう。
