Multimedia 3주.

Slides:



Advertisements
Similar presentations
Number Recognizer. Team 이성우 컴퓨터소프트웨어학과 조윤성 전자통신공학과
Advertisements

자료의 표현 1. 문자 자료의 표현 2. 멀티미디어 자료의 표현. 컴퓨터일반자료의 표현 학습 목표 ◆ 컴퓨터에서 사용하는 문자 데이터의 표현 방법을 이해할 수 있다. ◆ 컴퓨터에서 사용하는 멀티미디어 데 이터의 표현 방법을 설명할 수 있다.
1. 도형의 연결 상태 2. 꼭지점과 변으로 이루어진 도형 Ⅷ. 도형의 관찰 도형의 연결상태 연결상태가 같은 도형 단일폐곡선의 성질 연결상태가 같은 입체도형 뫼비우스의 띠.
1 멀티미디어 데이터 : 그래픽 & 이미지 Lecture #3. 2 그래픽 & 이미지 (1) n 특 징 u 많은 정보를 함축적으로 표현하고 사용자에게 직관적인 느낌을 줄 수 있어 정보 전달이 용이하다 cf) 텍스트 (Text) u 많은 저장 공간 비용이 필요하다 u 멀티미디어.
제 1 부 멀티미디어 (Multimedia) 와 웹 (Web) 제 1 장 멀티미디어 (Multimedia) 와 생활 제 2 장 웹 (Web) 과 멀티미디어 (Multimedia) 제 2 부 컴퓨터 그래픽스 (Computer Graphics) 제 3 장 컴퓨터 그래픽스.
Image Processing 이 뛰어남 존 놀과 토마스 놀 두 형제에 의해 탄생 1990 년 Adobe 사가 상업화 시킴 Web 디자인, 사진합성, 영화 특수 효과 등 컴퓨터 그래픽 전반에 걸쳐 널리 사용됨 비트맵 방식 이미지 프로세싱 Web 디자인 비중이 커지면서.
1 4 장 이미지와 그래픽 멀티미디어의 이해 이미지와 그래픽의 기본개념  픽셀의 이해  컬러모델  해상도  이미지와 래스터 / 벡터 그래픽.
문자코드 1 박 2 일 (4 조 ) 이경도 이준집 이수연 엄태규. 문자코드란 ? 문자나 기호를 컴퓨터로 다루기 위하여, 문자나 기호 하나하나에 할당 시키는 고유의 숫자를 말하는 것이다.
컴퓨터와 인터넷.
4장 이미지와 그래픽.
Chapter04 캔버스(2) HTML5 Programming.
Insert Footer or Copyright Information Here
피티라인 파워포인트 템플릿.
6부 2장 이미지 자료 만들기 그래픽 소프트웨어의 종류 등 일반적인 사항을 알아보고 이를 이용해 이미지 파일을 만들어 저장하는 방법, 이미지를 불러 와 편집하는 방법 등에 대해 알아보겠습니다.
5장 멀티미디어 그래픽스.
3장 이미지와 그래픽 3.1 이미지와 그래픽의 기본 개념 3.2 입출력장치 3.3 이미지의 처리와 압축
Entity Relationship Diagram
신호처리 실험 (Signal Processing Lab)
그래픽 컬러처리.
1. 컴퓨터 그래픽의 기본 개념 (1) 그래픽 이미지의 종류 -포토샵은 벡터 방식을 부분적으로 도입한 비트맵 방식의 프로그램
Open Graphics Library 팀 명 : Spes 송정웅 김정환
7. 프레젠테이션 제품 소개나 홍보 등을 보다 효율적으로 하기 위하여 Presentation Software를 사용하고 있다.
Number Recognizer.
Raster 애니메이션은 GIF Animator로 만들면 쉽다
SqlParameter 클래스 선문 비트 18기 발표자 : 박성한.
Error Detection and Correction
멀티미디어 서울대학교 통계학과 2009년 2학기 컴퓨터의 개념 및 실습 (
멀티미디어 시스템 (아날로그 이미지,신호를 디지털로 변환 방법) 이름 : 김대진 학번 :
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
멀티미디어.
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
색의 인식 ~ 빛(light): 전자기파(electromagnetic wave)
제 1장. 멀티미디어 시스템 개요.
3차원 객체 모델링.
Chapter 04 영상 처리.
CHAP 12. 리소스와 보안.
8장 웹 페이지의 디자인.
Opencv 이민권.
빅데이터 연구회 6주차 발표 주제 : 서포트 벡터 머신 통계학과 서태석.
자바응용.
Chapter03 캔버스(1) HTML5 Programming.
Raster Scan Display 1970년대 출현. TV기술에서 발달.
색체 인식과 영상 장치 빛의 합성과 색체 인식 백색광 ex) 햇빛, 형광등, 백열등
Clipping 이진학.
웹디자인
2강_첫번째 안드로이드 프로젝트 에뮬레이터(AVD) 만들기 처음 만들어 보는 프로젝트 전체적인 구성 살펴보기
>> Ⅲ. Web Design Tool 및 특성
WPF 3D 그래픽 발표자 : 조 현 민.
보 색 COMPLEMENTARY COLOR.
네트워크 환경 구축과 이미지 전송 호스트/타겟 통신 직렬 통신을 이용한 이미지 전송 수퍼 데몬 BOOTP 환경 구축
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
빛 의 합 성 과 학 1 학년 Ⅱ. 빛 > 2. 빛의 색( 8/8 ) [초기 화면]
4장. 데이터 표현 방식의 이해. 4장. 데이터 표현 방식의 이해 4-1 컴퓨터의 데이터 표현 진법에 대한 이해 n 진수 표현 방식 : n개의 문자를 이용해서 데이터를 표현 그림 4-1.
웹 사이트 분석과 설계 [디자인 리서치] 학번: 이름 : 홍지애.
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
파워포인트 디자인.
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
2D 게임 프로그래밍 제안서 김보명.
9 브라우저 객체 모델.
2D 게임프로그래밍 프로젝트 - Air Clear 심석용.
Chapter 7 – Curves Part - I
2장. 페인트샵을 이용한 영상처리 맛보기 신라대학교 임은경 2주차 - 페인트샵을 이용한 영상처리 맛보기.
학 습 목 표 1. 밑그림에 따라 채색할 수 있다. 2. 전체적인 색의 분위기와 조화를 생각할 수 있다.
In-house Consultant Training
영역 기반 처리.
피티라인 파워포인트 템플릿.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
그래픽 컨트롤 (Graphic Control)
생산성 증대 효율성 향상 측정 수행 능력.
Presentation transcript:

Multimedia 3주

Contents : Image 1 벡터와 비트맵 이미지 2 디자인의 시각요소 3 이미지 파일 포맷

1. 벡터이미지와 비트맵이미지의 비교 벡터 이미지 벡터 폰트  벡터 이미지 점과 점을 연결하는 수학적 함수관계에 의해 이미지를 표현함으로서 선과 면을 생성 작업시 확대/축소가 자유롭고 저장 용량 또한 현저히 감소 벡터 이미지는 '베지어'라는 곡선으로 이루어져 있어 이것이 이미지의 형태와 모양을 결정 베지어는 점과점을 연결하는 직선과 곡선으로 구성 베지어를 조절하는 점을 '앵커 포인트'라 함 앵커 포인트와 앵커포인트를 연결하는 선을 '세그먼트'라 함 벡터 폰트

1. 벡터이미지와 비트맵이미지의 비교 비트맵 이미지 (=래스터 이미지) 비트맵 폰트 (=래스터 폰트) 픽셀이라 불리는 작은 사각형의 점들로 이미지를 표현 확대해서 보면 아주 작은 사각형의 컬러입자 고해상도 : 1인치 면적 안에 픽셀의 수가 많은 것 저해상도 : 1인치 면적 안에 픽셀의 수가 적은 것 대표적인 프로그램 : 포토샵 인터넷이나 컴퓨터에 쓰여지는 사진은 모두 비트맵방식의 이미지이다. 비트맵 이미지는 서로 다른 색상들의 픽셀들이 어우러져 깊이 있는 색조와 부드러운 질감을 표현 단점 : 확대/축소 혹은 이미지변형 작업에서는 이미지의 손상 발생 비트맵 폰트 (=래스터 폰트)

1. 벡터이미지와 비트맵이미지의 비교(1/2) 특징 벡터 이미지 비트맵 이미지 이미지 손상의 유무 확대나 축소시 이미지의 변화가 전혀 없다 확대나 축소시에 계단 현상등의 이미지 손상이 일어난다 계산 방식 벡터 방식은 선과 면으로 구성되고, x, y, z의 좌표값을 이용하여 개체를 표현한다. 서로 다른 개체끼리 섞이거나 혼합되지 않아 3D 표현에 적합하다. 비트맵 방식은 픽셀을 이용하므로 사진을 합성하거나 특수효과를 내는데 적합하다 저장방식 벡터 이미지는 수학적 데이터만 저장하기 때문에 저장용량이 현저히 작다. 비트맵은 픽셀 하나하나값을 저장하기 때문에 이미지 크기가 클수록 저장용량이 무겁다. 출력했을 경우 벡터 이미지는 타이포그래픽, 로고, 심벌, 캐릭터디자인, Desk Top Puplishing 등의 작업에 사용된다. 비트맵 이미지는 이미지 프로세싱, 이미지 합성 분야에 이용된다. 경계선 처리 벡터이미지는 특성상 칼로 자른 듯한 효과가 나타나게 된다. 비트맵 이미지는 색상의 경계부분을 부드럽게 하는 효과를 줄 수 있다

1. 벡터이미지와 비트맵이미지의 비교 (2/2) 벡터이미지 비트맵이미지 벡터이미지 비트맵이미지

2. 디자인의 시각요소 RGB의 색채모델 : Red, Green, Blue CMYK의 색채모델 : Cyan, Magenta, Yellow, blacK HSV색채모델 : Hue(색상), Saturation(채도), Value(명도) HLS : Hue, Lightness, Saturation CMYK의 색채모델(색의 삼원색) RGB의 색채모델 (빛의 삼원색)

2. 디자인의 시각요소 CMYK RGB

2. 디자인의 시각요소 Hue varies around the solid. lightness varies from top to bottom. saturation is the distance from the center. HSV 또는 HLS 색채모델

2. 디자인의 시각요소                                                                                  명도 콘트라스트의 강약

2. 디자인의 시각요소                                                                                  채색 콘트라스트의 효과비교

기타 각 비트 당 이미지의 칼라 표현

3. 이미지 파일포맷 비트맵 (래스터) 방식의 파일 포맷 BMP GIF JPG PNG

비트맵 (래스터) 방식의 파일 포맷 BMP 마이크로소프트에서 지원, 비트맵 방식에서 가장 기본이 되는 포맷. 파일의 크기 및 기타 파일 관련 정보를 파일 헤더에 두고 각 픽셀의 컬러 값을 그대로 표시하는 방법. 파일의 크기가 큰 것이 단점

비트맵 (래스터) 방식의 파일 포맷 GIF 미국 통신회사인 CompuServe사에서 저속 모뎀에서 업,다운로드를 할 목적으로 개발 8bit 인덱스 칼라를 지원하는 대표적 압축 포맷 컬러수가 256색(8bit)로 제한 투명한 배경을 지원 칼라값과 연속되는 픽셀의 개수로 표현하는 RLE(Run Length Encording) 방식을 기본

RLE(Run Length Encording) 방식을 기본 수평으로 압축이 진행되므로 수평으로 유사한 이미지의 경우 압축률 증가 일러스트레이션 용 이미지 파일의 경우에 압추효과 증대

팔레트, 색상 보기표(CLUT:Color Look-up Table) 인덱스 컬러 (Indexed Color) 팔레트, 색상 보기표(CLUT:Color Look-up Table) 팔레트에 미리 정의된 색상을 사용하여 이미지를 표현한다. 화면 상의 한 점은 팔레트의 번호 (인덱스)를 갖고 있으며, 여기에는 RGB값이 기억되어 있음 사용자가 임의로 정의하여 사용할 수도 있음

사용할 수 있는 색상의 수가 제한된 시스템에서 사용 인덱스 컬러 (Indexed Color) 사용할 수 있는 색상의 수가 제한된 시스템에서 사용 8비트에서 총 256 컬러 수를 사용 사용 가능한 색상 수가 제한되어 있어 색 변화가 일어날 수 있음

제한된 색상을 사용한 노이즈 제거 또는 색 재현 방법 디더링 (Dithering) 제한된 수의 색상들을 섞어서 다양한 색상을 만들어 내는 기법 현재 팔레트에 없는 컬러를 유사한 컬러의 패턴으로 표현 픽샐당 일정한 비트 수의 이미지를 더 낮은 비트의 이미지로 변환 가능 팔레트를 지원하는 대부분의 그래픽 소프트웨어에서 기본적으로 지원

제한된 색상 표현에 의한 노이즈 제거 또는 다양한 색 재현 방법 포토샵에서의 디더링 디퓨전 (Diffusion): 점들을 임의로 흩어 놓아 자연스런 색을 표현 패턴 (Pattern): 점들을 특정 패턴에 따라 색을 섞어 만드는 방식 Gray 이미지였을 때의 디더링

비트맵 (래스터) 방식의 파일 포맷 JPEG (*.JPG, JPE) 인터넷상에서 가장 많이 쓰는 이미지 파일 포맷 중 하나 JPEG: Joint Photographic Experts Group 약어 1992년 ISO 표준으로 확정 사진 압축을 위해 고안된 파일 포맷 손실압축 (Lossy) 24비트 컬러를 사용하며 압축 특성으로 인한 색번짐이 나타날 수 있음 압축율이 높은 반면 압축을 높일 경우 질이 현저하게 떨어지는 단점

JPG 압축률 Low Mideum High 오리지날이미지

파일 포맷의 비교

비트맵 (래스터) 방식의 파일 포맷 PNG 그레이컬러, 8비트 컬러, 24비트 컬러까지 지원 GIF보다 압축률이 더 높음 (GIF보다 좋은 점) 투명을 잘 지원 (JPEG보다 좋은 점) GIF도 투명을 지원하지만, 테두리가 깔끔하지 않음 단점 : 애니메이션을 지원하지 않음(GIF보다 나쁜 점) 애니메이션은 MNG라는 형식으로 따로 지원 예전 버전의 웹 브라우저에서는 PNG 형식이 지원되지 않음 Flash에서는 GIF, JPEG 대신 PNG를 사용하는 경우가 많음

벡터그래픽의 파일 포맷 EPS (Encapsulated Postscript) WMF (Windows Meta File) 텍스트의 그래픽 구조 및 폰트, 비트맵 정보를 표시 WMF (Windows Meta File) Windows에서 사용하는 메타파일 방식 비트맵과 벡터 정보를 함께 표현하고자 할 경우 가장 적합 AI (Adobe Illustrator) Adobe Illustrator에서 사용된 파일 포맷 CDR (Corel Draw) Corel Draw에서 사용되는 파일 포맷

3차원 그래픽 파일 포맷 WRL DXF 3DS VRML을 위해 개발된 포맷 3차원 객체에 대한 구성 및 그 객체의 위치 정보 표시 DXF Aurodesk사에서 자사의 Autocad에 사용학위해 개발 CAD 소프트웨서 널리 사용 3DS 3D Studio에서 사용된 파일 포맷 대부분의 3차원 그래픽 소프트웨어에서 사용

기타 노이즈 제거 방법 앤티앨리어싱 (Antialiasing) 물체 경계면의 픽셀을 물체의 색상과 배경의 색상을 혼합해서 표현하여 경계면이 부드럽게 보이도록 하는 기법 앤티앨리어싱을 사용한 경우 훨씬 부드럽게 느껴짐