1 / 59

7. Multimedia

7. Multimedia. 이미지 동영상 사운드. 7.1 이미지. GIF 포맷과 JPEG 포맷을 주로 사용 운영체제에 따라서 이미지를 다루는 프로그램. 7.1 이미지. 이미지 파일 포맷 GIF 표준 ( 두가지 ) gif 87a 형식 gif 89a 형식 칼라의 수를 256 가지만 허용 가장 최근의 GIF 포맷 버전은 GIF89a 로 89 년에 발표. 7.1 이미지.

ivor-dejesus
Download Presentation

7. Multimedia

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. 7. Multimedia 이미지 동영상 사운드

  2. 7.1 이미지 • GIF 포맷과 JPEG 포맷을 주로 사용 • 운영체제에 따라서 이미지를 다루는 프로그램

  3. 7.1 이미지 • 이미지 파일 포맷 • GIF • 표준(두가지) • gif 87a 형식 • gif 89a 형식 • 칼라의 수를 256가지만 허용 • 가장 최근의 GIF 포맷 버전은 GIF89a로 89년에 발표

  4. 7.1 이미지 • JPEG (Joint Photographic Experts Group File Interchange Format : JFIF) • 가장 최근의 이미지 포맷 • GIF와 함께 정보 공유를 위한 통신환경에서 주로 사용 • 장점은 80% ~ 90%에 이르는 압축률 • 압축할 때 원본 이미지에서 불필요하게 복잡한 부분을 생략 • 높은 압축률과 빠른 이미지 복원능력을 사용 • 224칼라까지 한 이미지에서 표현 • JPEG은 이미지 포맷이 아니고 압축 알고리즘의 이름 • 파일의 확장자로 JFF, JIF, JFIF, JPE, JPEG, JPG, 그리고 JTF등이 사용

  5. 7.1 이미지 • PNG (Portable Network Graphics) • Internet Explorer 4.0, Netscape 4.0 등에서 지원되는 포맷 • GIF 포맷과 유사 • GIF보다 뛰어난 압축률을 제공 • 색상의 투명성을 254색에 대하여 설정할 수 있고, True color를 지원 • 여러 장의 이미지를 하나의 파일에 저장할 수 없음 • TIFF • 높은 압축률을 가진 대단위 문서 관리 시스템에서 주로 사용 • 장점은 하나의 파일 안에 여러 페이지의 이미지를 저장 • 각 문서가 파일 단위로 저장되므로 문서관리가 용이 • 파일의 확장자로 TIF나 TIFF를 사용

  6. 7.1 이미지 • Raw • 어떤 포맷도 갖지 않는 이미지 • 미리 정해진 순서대로 이미지 정보만을 저장 • 아날로그 입력 영상을 디지털 영상으로 변환할 필요가 있을 때 사용 • 파일의 확장자는 RAW를 사용하거나, 혹은 정보제공자가 임의로 결정 • PostScript • 출력장치에 출력될 페이지를 기술하는 언어 • 출력할 형상의 위치 및 크기 등의 정보를 보냄으로써 출력 • 장점으로는 이미지에 비해 동일한 영상을 만들기 위한 데이터의 양이 매우 적음 • 파일의 확장자로 PS를 사용

  7. 7.1 이미지 • 이미지 제작 • 이미지 편집기, 스캐너, 디지털 카메라, 캠코더 사용 • 이미지 편집기 • 윈도우즈에서 기본적으로 제공하는 "그림판“과 일반적으로 Adobe Photoshop, Paint Shop Pro(PSP) 등

  8. 7.1 이미지 • 이미지 편집을 쉽게 하는 방법은 층(layer)을 사용 • 층을 사용함으로써 하나의 이미지를 필요한 방법으로 나눔 • 예) 건물 주위로 비행기가 날아가는 두 그림을 합성(PSP사용) • PSP포맷으로 저장하여야만 다시 편집할 때 층 정보를 사용 • 브라우저에서 사용하려면 "File"메뉴의 "Save As"를 선택하여 GIF나 JPG 포맷으로 저장 + = 비행기 : 이미지로부터 복사하 여 새로운 층에 추가됨.(^L) 백그라운드 : 비행기를 그릴 원본 이미지 헬리콥터 : 이미지로부터 복사 하여 새로운 층에 추가됨.(^L) Layer 1 선택 후 삭제를 선택하 여 비행기를 지운 후 헬리콥터를 이동시킨 이미지

  9. 7.1 이미지 • 스캐너 • 입력장치 • 스캐너의 기본적인 사용방법 • 입력할 대상(사진이나 그림) 등을 스캐너의 오른쪽 위로 밀착되게 정렬 • 스캐너를 지원하는 응용프로그램(Adobe Photoshop, PSP등)을 실행 • "File"메뉴의 "Import"를 선택하여 그림의 내용을 컴퓨터로 읽어 들인 후에 필요한 포맷으로 저장

  10. 7.1 이미지 • 캠코더 • 컴퓨터에 이미지 캡쳐 보드를 설치 • 보드의 비디오 입력 단자에 캠코더의 출력을 연결 • 보드를 구입할 때 포함되어 있는 응용프로그램을 사용 • 캠코더의 출력을 컴퓨터의 모니터를 통해 확인 • 특정 부분의 이미지 혹은 동영상을 원하는 포맷으로 디스크에 저장 • 도로의 과속차량 단속이나 보안 시스템 등에서 사용

  11. 7.1 이미지 • 디지털 카메라 • 영상을 내장된 메모리에 파일의 형태로 저장 • 사용 방법 • 디지털 카메라를 구입할 때 지원되는 응용프로그램을 이용 • 컴퓨터로 복사, 응용프로그램(Adobe Photoshop, PSP등)을 실행 • "File"메뉴의 "Import"를 선택하여 원하는 영상을 컴퓨터로 읽어 들인 후에 필요한 포맷으로 저장

  12. 7.1 이미지 • 인터레이스 이미지(interlaced image) 만들기 • 인터레이스란 이미지를 표시하는데 처음에는 이미지의 윤곽이 그려지고 시간이 경과함에 따라 뚜렷한 이미지를 볼 수 있는 효과 • 이미지를 GIF 포맷으로 저장하면서 인터레이스 옵션을 설정

  13. 7.1 이미지 • 투명한 배경의 이미지(transparent image) 만들기 • 이미지 출력시에 특정 색상을 배경색과 일치 • 브라우저에서 배경 위에 이미지가 떠 있는 듯한 효과 • "Colors"메뉴"의 "Set Palette Transparency" 항목을 선택하여 나타나는 대화 창에서 투명하게 사용할 색상을 선택하고 "확인"

  14. 7.1 이미지 • 움직이는 효과(animation effect) 넣기 • 한 파일 내에 여러 개의 이미지를 포함 • 움직이는 효과란 여러 개의 이미지가 시차를 두고 연속적으로 출력 • 프로그램에는 GifCon, Animagic GIF, PSP 5.0의 Animation Shop 등

  15. 실습 자료 이미지맵 작성

  16. 이미지맵 작성 준비사항 • 그림 형식 • 확장자 : .JPG, .JPEG, .GIF, .BMP, .PCX, .TIF, .TIFF, .PNG, .TGA ... • 그림상의 여러 군데에 링크(link) 제작 가능 • 사용 프로그램 • MapThis.exe : 이미지맵 제작용 • 그림 다듬기 용 S/W (Paint Shop Pro, Photoshop) • 기타 web browser ( Explorer, Netscape ) • 이미지맵과 기존 그림을 이용한 하이퍼 링크의 차이점은?

  17. 이미지맵 1 • Imagemap의 정의 • HTML 문서에 삽입된 특수한 형태의 그림 • 사용자가 Imagemap의 특정 부분을 Click 하면, • Click한 지점의 좌표값(X,Y)을 읽어들인 후에, • 좌표값이 포함된 영역에 할당되어 있는 URL로 이동한다. • Imagemap 생성절차 1. Image File을 준비한다. 2. (Conceptual) Map을 만든다.(영역설정 및 URL 정의단계) 3. Imagemap의 종류(Client-Side, Server Side 등)에 따라 HTML 문서에 반영한다. (요즘 Web에서는 필요 없는 개념임) 4. Server-Side Imagemap의 경우, Map File을 저장한다.

  18. x 다음중 물속에 사는 동물은? 이미지맵 2 • 이미지 맵에 사용되는 도형들 • POINT : 점 (X,Y) • CIRCLE : 원 (원의 중심좌표, 원주상의 점좌표) • RECT : 네모 (좌상좌표, 우하좌표) • POLY : 다각형 (모서리의 좌표들) • DEFALUT : 미정의된 나머지 영역 (좌표필요 없음) • 이미지 맵 예제 1 • 토끼 : Rectangle (0,0,90,90) • 상어 : Circle (193,48,255,45) • 사자 : Rectangle (6,126,125,210) • 코끼리 : Rectangle (155,100,256,213)

  19. 여기를 누르면, ‘http://www.snu.ac.kr/’로 이동 여기를 누르면, ‘http://www.yahoo.co.kr/’로 이동 여기를 누르면, ‘http://www.altavista.co.kr/’로 이동 black.jpg 다음과 같은 이미지맵을 작성하려면? • 그림 준비

  20. MapThis 사용법 1 • MapThis 프로그램 실행

  21. MapThis 사용법 2 • ‘File’ ‘New’ 실행 (새로 만들기)

  22. MapThis 사용법 3 • 원하는 그림(이미지맵을 삽입할 그림) 불러오기

  23. http://www.snu.ac.kr MapThis 사용법 4 • 원하는 영역에 대한 링크(link) 작성 1

  24. MapThis 사용법 5 • 원하는 영역에 대한 링크(link) 작성 2

  25. MapThis 사용법 6 • 원하는 영역에 대한 링크(link) 작성 3

  26. MapThis 사용법 7 • 기본적(default) 링크(link) 작성 : 작성 안 해도 됨

  27. MapThis 사용법 8 • 이미지맵 저장 ( *.map )

  28. MapThis 사용법 9 • HTML 문서형식으로 저장 (*.html)

  29. <MAP NAME=sung.map> ….. </MAP> <IMG SRC=black.jpg USEMAP=sung.map> MapThis 사용법 10 • HTML 문서 수정

  30. 여기를 누르면 과연 어떤 일이 일어날까? MapThis 사용법 11 • 이미지맵 완성 : web browser에서 실행

  31. 실습 자료 움직이는 그림파일 작성

  32. 움직이는 GIF 그림 만들기 준비 사항 • 그림 형식 • 확장자 : .JPG, .JPEG, .GIF, .BMP, .PCX, .TIF, .TIFF, .PNG, .TGA ... • GIF 형식으로 움직이는 그림을 제작할 수 있다. • 사용 프로그램 • Gifcon32.exe : 움직이는 GIF 그림 제작용 • 그림 다듬기 용 S/W(Paint Shop Pro, Photoshop) • 기타 web browser ( Explorer, Netscape ) • 일반 그림 파일과 움직이는 그림고의 차이점은? • 움직이는 그림 파일과 동영상 파일(mpeg)과의 차이점은?

  33. 움직이는 그림 만들기 1 • 그림 준비 ( 단, 원래그림도 ‘gif’ 형식일 것! ) han1.gif han2.gif

  34. 움직이는 그림 만들기 2 • GIFCON 실행

  35. 움직이는 그림 만들기 3 • ‘File’ ‘New’ 실행 (새로 만들기)

  36. 움직이는 그림 만들기 4 • ‘Insert’ 실행

  37. 움직이는 그림 만들기 5 • 삽입할 그림 선택

  38. 움직이는 그림 만들기 6

  39. 움직이는 그림 만들기 7 • 그림 삽입 완료

  40. 움직이는 그림 만들기 8 • 특수 효과 주기 ( 움직임 계속 반복 : Loop )

  41. 움직이는 그림 만들기 9 • 저장 ( 이 경우, 움직이는 그림의 확장자도 ‘gif’이므로 주의할 것 )

  42. 움직이는 그림 만들기 11 • web browser에서 열어 보면, 그림이 움직이는 것을 볼 수 있다.

  43. 7.1 이미지 • 이미지를 위한 태그 사용법 • 문서의 배경으로 사용 • <BODY> 태그의 BACKGROUND 옵션을 사용 • <BODY BACKGROUND=gildong.jpg> • 문서의 일부로 사용 • <IMG> 태그의 SRC옵션을 사용 • <IMGSRC=gildong.jpg> • 문서의 링크를 선택했을 때 단독으로 사용 • <A> 태그의 HREF옵션에서 이미지를 지정 • <A HREF=gildong.jpg>홍길동</A>

  44. 7.2 동영상 • 동영상 파일 포맷 • MPEG Video • 강력한 손실허용 압축 알고리즘을 이용한 포맷 • 인터넷에서 표준으로 채택 • 맥킨토시에서는 Sparkle을 사용하여 재생하거나, 혹은 QuickTime 포맷으로 변환 • 파일의 확장자로 MPG, MPEG 등을 사용 • 플랫폼 별 대표적인 재생기의 종류

  45. 7.2 동영상 • AVI/Video for Windows • 윈도우즈에서 표준으로 사용하는 동영상 포맷 • 영상과 음성을 같이 저장 • 재생 시에 영상과 음성의 일치 • 파일의 확장자는 AVI를 사용 • 플랫폼 별 재생기의 종류

  46. 7.2 동영상 • QuickTime • 애플사에서 만든 것으로 다양한 플랫폼을 지원 • 영상과 음성은 1초 혹은 수초 단위의 여러 블록으로 분리되어 저장 • 압축률이 좋기 때문에 인터넷에서 사용하기 용이한 포맷 • 동영상의 재생속도는 재생하는 컴퓨터의 프로세서 속도와 압축방법에 종속적 • 파일의 확장자로는 MOV, MOVIE를 사용 • 플랫폼 별 대표적인 재생기의 종류

  47. 7.2 동영상 • QuickTime Virtual Reality (QTVR) • QTVR은 QuickTime버전 2.0 이상에서 제공하는 포맷 • 파노라마 영상을 생성 • 파일의 확장자는 QT • 대부분의 QuickTime뷰어 프로그램을 사용

  48. 7.2 동영상 • 동영상 제작 • 동영상 제작을 위해 필요한 사양 • 비디오 캡쳐 보드 • 하드디스크의 여유공간 ( 30 MB 이상 ) • 비디오 입력 장비(캠코더, VCR 또는 LDP) • 비디오 캡쳐/편집용 소프트웨어 • 비디오 캡쳐/편집 프로그램 • Video for Windows, QuickTime for Windows, Adobe Premiere, Ulead Video Studio 등

  49. 7.2 동영상 • 동영상의 압축 • 파일의 용량을 작게 만드는 압축기법이 필수 • 동영상 압축의 기본 개념 • 연속되는 장면의 경우 대부분의 정보가 변하지 않기 때문에 알고리즘은 각각의 장면으로부터 변화된 부분만을 추출하여 저장 • 마이크로소프트의 Video for Windows나 Apple사의 QuickTime • 인텔의 동영상 압축/복원 소프트웨어 기술인 Indeo video를 사용해 50MB의 동영상을 약 9MB로 압축

  50. 7.2 동영상 • 컴퓨터의 처리속도 및 하드디스크의 속도에 민감 • 압축은 보통 동영상 1분 분량에 대하여 10분에서 한 시간 정도 소요 • 압축 프로그램이 컴퓨터의 자원을 거의 소비 • 새로운 압축기술들은 하드웨어와 소프트웨어를 함께 사용 • 매우 빠른 속도 • 예)인텔의 Smart Video Recorder • Indeo기술과 자사의 i750 비디오 처리기를 결합 • 캡쳐, 압축 및 저장을 실시간에 수행 • 하드웨어적으로 처리 • 1초에 30장면 정도의 양질의 동영상

More Related