1 / 20

Web 製作ラボ 5 / 30, 6/13 , 201 2 hayashiLabo

Web 製作ラボ 5 / 30, 6/13 , 201 2 hayashiLabo. 1 3. 素材について. 画像 ムービー 音 について. 画像. まずは、少し画像の基礎. 画像の X と Y. スキャン. グレースケールと RGB. グレースケールと RGB. ピクセル. RGB （カラー）. グレースケール（白黒）. RGB に加えて α というのもある。 α は透明度. 画像のサイズとデプス. 画像のサイズとデプス. ■サイズ　→解像度. ピクセル. 320 x 240 640 x 480 800 x 600

donnan
Download Presentation

Web 製作ラボ 5 / 30, 6/13 , 201 2 hayashiLabo

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web製作ラボ 5/30, 6/13, 2012 hayashiLabo 13

  2. 素材について • 画像 • ムービー • 音 について

  3. 画像 まずは、少し画像の基礎

  4. 画像のXとY

  5. スキャン

  6. グレースケールとRGB グレースケールとRGB ピクセル RGB（カラー） グレースケール（白黒） RGBに加えてαというのもある。αは透明度

  7. 画像のサイズとデプス 画像のサイズとデプス ■サイズ　→解像度 ピクセル 320 x 240 640 x 480 800 x 600 1920 x 1080 ...... Yサイズ ■デプス　→色数 8ビット(256個のレベル・1677万色） デプス Xサイズ 10ビット以上のものもある

  8. アスペクト比 640 256 4 : 3 （一昔前のTV) 480 1 : 1 256 1920 16 : 9 （ハイビジョン） 1080 正方ピクセルが基本

  9. 画像の性質のまとめ ■　サイズ　（解像度） 　　360X240、640X480（4:3）、1920X1080(16:9)など ■　ビット数　（色数） 　　RGB8ビット（24ビット）が一般的　→1677万色 ■　アスペクト比 　　1:1、4:3、16:9など ■　圧縮率 　　JPEG、GIFなど圧縮フォーマットで重要

  10. Webの画像 • imgタグには、height, width, altを入れること 　　　height、widthを入れた方が表示が速い（といわれている） 　　　alt（HP読み上げなどで重要） • 自然画はJPEG、色数の少ない画像はGIF,PNG 　　　自然画→風景、人物などリアルもの 色数少ない→ロゴ、フォント、セル画 • ブラウザ上で拡大縮小しない 　　　絵が汚くなる

  11. 画像のサイズ変更について • 基本はピクセル等倍でブラウザ上に表示されるように作る • 大きすぎるとブラウザ上で縮小がかかり汚くなる。ロードに時間がかかる. • 当然だが、拡大はボケる • 縮小することが多いと思うがちゃんとした画像加工ソフトを使うこと 　　　→折り返し歪（エイリアス）が出て絵が汚くなる　　　　　ことあり • アイコンなどで画像を極端に縮小したときはボケるのでシャープをかける

  12. 画像のフォーマット フォーマットにはいくつかある　（ほんとはたくさん） JPEG 　・もっとも一般的 　・圧縮率に気を付ける。ブロック歪やモスキートノイズに注意 　・ロゴやアニメなどベタ塗りには適さない GIF 　・昔は大人気。モーションGIFもある。 　・256色しかない。ベタ塗りに適している PNG 　・GIFの後継。今ではこっちの方が一般的 　・色数制限なし。ベタ塗りも自然画もOK BMP ・ビットマップ　圧縮してない　サイズでかい　Microsoft

  13. 画像の圧縮率とサイズ JPEGでは 　・JPEGで、「画質：高」ぐらいでよい 　・1枚の絵のサイズは100kB以下（ぐらい） 　・１ページの画像総量に注意 　　1MBあると、ちょっとつらい 　・フル解像度も見せたいときは簡単には以下 <a href="FULLSIZE.jpg" target="_blank"><img src="SMALL.jpg" width="360" height="240"></a>

  14. 画像の加工ツール ”画像加工ツール”でGoogleる たとえば・・・ ■オンラインツール（インストールせずにWebで使える） 　・pixer.us (http://pixer.us/) ■PCソフト（インストールして使う） 　・PhotoScape　（Windowsのみ） 　・Seashore　（Macのみ） 　・Gimp　（Photoshopのフリー版っぽい　一応Macあり） ■Photoshop（業界ではこれ）

  15. Webで音とムービー 音声とムービーには、画像のようなimgタグが無い 既存のあれこれのプレイヤーをWebブラウザにプラグインして再生することになる (Flush player, Windows media player, Quicktime player...) （HTML5では搭載される）

  16. 音声 フォーマットにはいくつかある　 MP3 　・MPEGの音規格 　・音楽で一般的 　・圧縮率（ビットレート）に気を付ける。 WAV 　・Windows 　・基本非圧縮 　・マックではAIFF WMA 　・Windows Media Audio 意外とmidiもいい

  17. 音声をWebに載せる ■aタグで単に貼る <a href="http://niz237gt.sakura.ne.jp/samples/winter.mp3">再生</a> ブラウザなりOSなりが適当なプレイヤーで鳴らそうとしてくれる ■Flashを使う DVDVideoSoft.comがよくできてる（http://www.dvdvideosoft.com/） 「Free Audio to Flash Converter」をダウンロード・インストール 言われる通りにやるとできる（サンプルをhayashiLaboのDLページにつけました） ■その他、Windows Media PlayerやQuickTime Playerを使う方法あり。あるいは将来はHTML5 （IEにはbgsoundという凶悪タグあり）

  18. ムービー フォーマットにはいくつかある　 MPG 　・MPEG1, MPEG2, MPEG4など 　・一般的 　・ビットレートに気を付ける WMV 　・Windows Media Video 　・MOV　（Quicktime movie） F4V 　・FLASHの規格

  19. ムービーをWebに載せる ■aタグで単に貼る <a href="http://niz237gt.sakura.ne.jp/samples/BB.ｗｍｖ">再生</a> ブラウザなりOSなりが適当なプレイヤーで再生してくれる ■YouTubeにアップしてYouTubeのリンクをページに貼る ・アップしたビデオの「共有」の「埋め込みコード」をコピペ ■Flashを使う DVDVideoSoft.com（http://www.dvdvideosoft.com/） 「Free Video to Flash Converter」をダウンロード・インストール 言われる通りにやるとできる ■その他、Windows Media PlayerやQuickTime Playerを使う方法あり。あるいは将来はHTML5

  20. ムービーや音 ムービーや音はサイズが大きいので、サーバーに負担がかかる ・自前の安いレンタルサーバーなどにムービーを載せると複数同時アクセスですぐに動かなくなる可能性あり ・ストリーミングサーバーと呼ばれる専用サーバーを用意し回線速度を確保する（ライブ配信もできる） ・でなければ、Youtubeなどを利用するのが無難

More Related