1/39 8 장 그래픽과 이미지의 개념 8.1. 색의 기본 용어 8.2. 색 모델 8.3. 픽셀과 해상도 8.4. 그래픽 방식 8.5. 그래픽과 이미지의 구분 8.6. 이미지 압축 8.7. 투명 GIF 8.8. 편집 소프트웨어 8.9. 그래픽 파일의 형식.

Presentation on theme: "1/39 8 장 그래픽과 이미지의 개념 8.1. 색의 기본 용어 8.2. 색 모델 8.3. 픽셀과 해상도 8.4. 그래픽 방식 8.5. 그래픽과 이미지의 구분 8.6. 이미지 압축 8.7. 투명 GIF 8.8. 편집 소프트웨어 8.9. 그래픽 파일의 형식."— Presentation transcript:

1 1/39 8 장 그래픽과 이미지의 개념 8.1. 색의 기본 용어 8.2. 색 모델 8.3. 픽셀과 해상도 8.4. 그래픽 방식 8.5. 그래픽과 이미지의 구분 8.6. 이미지 압축 8.7. 투명 GIF 8.8. 편집 소프트웨어 8.9. 그래픽 파일의 형식

2 2/39 개 요개 요  텍스트로만 표현할 경우에 수백 자 분량이 되는 정보 를 그래픽이나 이미지를 이용하면 더 쉽고 정확하게 그 의미를 전달할 수 있는 경우들이 많다.  이러한 상황은 대부분 시각적인 상태를 묘사해야 하 는 것들로 사람들에게 바로 직관적인 정보를 제공해 줄 수 있다.  멀티미디어가 활성화 되면서 과거에는 텍스트로만 표현되었던 정보들이 가급적 그래픽과 이미지로 보 완하거나 아예 대체되는 상황으로 변하고 있다.  사진이나 그래픽 등을 디지털 형태로 컴퓨터에 저장 하기 위해서는 텍스트에 비해 매우 큰 저장 공간을 필요로 하나 자료의 시각적 효과가 이러한 단점을 충 분히 상쇄시킬 수 있을 때 많이 활용되고 있다.

3 3/39 색의 기본 용어

4 4/39 색의 3 요소

5 5/39 색상, 채도, 명도  색상은 빨강, 파랑, 노랑, 녹색 등 색의 종류를 말하 는 것이다. 이러한 각각의 색상을 섞어서 다른 색상 을 만들어 낸다.  채도는 색의 탁하고 선명한 정도를 말한다. 채도가 낮으면 ' 탁하다 ' 라고 표현하고, 높으면 ' 선명하다 ' 라 고 표현한다. 채도가 높을수록 색깔은 강해지고, 채 도가 낮을수록 색깔이 약해진다. 그래서 채도를 계속 낮추면 결국에는 흰색, 회색, 검정과 같은 무채색이 되고 만다.  명도란 색의 밝은 정도를 말한다. 같은 빨강이라도 명도에 따라 밝은 빨강, 어두운 빨강이라고 표현한다. 명도는 흰색에 가까울수록 높다고 하고 검정에 가까 울수록 낮다고 한다.

6 6/39 주의 : 색 (Color) 과 색상 (Hue)  많은 서적과 인터넷 사이트에서 ‘ 색 ’ 이라는 표 현을 써야 할 상황에 ‘ 색상 ’ 이란 표현을 쓰고 있다. ‘ 색상 ’ 이란 표현이 ‘ 색 ’ 이란 단어의 고상 한 표현이 아니다.  ‘ 색 ’ 의 3 요소 중 하나인 ‘ 색상 ’ 과 ‘ 색 ’ 을 명확히 구분해 표현해야 한다. Color 를 색상이라고 번역하는 것은 맞지 않다

7 7/39 채색과 톤

8 8/39 무채색, 유채색, 순색, 톤  무채색은 흰색부터 회색을 거쳐 검정색에 이르기까 지 채색이 없는 색을 말한다. 그래서 무채색은 색상 과 채도가 없이 명도만으로 구별된다.  무채색이 아닌 색을 유채색이라고 하며 유채색은 색 의 3 속성을 다 가지고 있다.  순색은 원색 중 2 색을 혼합하여 만들어지는 색을 말 한다. 순색에 흰색을 섞으면 명도는 높아지지만 채도 는 낮아진다.  이런 변화를 이해하기 쉽게 표현하기 위해 명도와 채 도를 합쳐 톤 (tone) 이라 부른다. 밝은 톤, 탁한 톤, 어 두운 톤, 즉 톤이란 색의 상태를 말하는 것이다.

9 9/39 색 모델

10 10/39 가산 색상 (RGB)

11 11/39 감산 색상 (CMYK)

12 12/39 HSB 모델 A. 채도 B. 색조 C. 명도 D. 모든 색조

13 13/39 색모델 선택 및 색환  웹 사이트와 같이 화면 출력만을 염두에 둘 때는 RGB 모델을 사용하고, 잉크젯 프린터 등에서 인쇄해야 할 경우는 CMYK 모델을 사용하는 것이 좋다.  색 모델간의 표현법은 상호 변환이 가능하다.

14 14/39 브라운관의 RGB 주사

15 15/39 픽셀 (pixel: PICture + Element)  픽셀은 모니터의 화면에 나타나는 각각의 점 을 일컫는 말로 이미지의 최소 단위가 된다

16 16/39 해상도  일반적으로 해상도 (resolution) 는 단위 길이 당 표시할 수 있는 픽셀 수를 말하는데 주로 인치 (inch) 를 단위로 사용한다.  이 경우 해상도의 단위는 dpi(dot per inch) 가 되며 레이저 프린터는 300 dpi 이상, 모니터 는 72 ~ 75 dpi 이상이면 만족할 만한 성능을 기대할 수 있다.

17 17/39 픽셀 해상도  각 픽셀이 가질 수 있는 색상의 종류는 픽셀 당 할당되어 있는 비트 수에 달려있다. 픽셀 해상도는 한 픽셀이 몇 비트의 색 즉 몇 종류의 색을 표현할 수 있느냐를 말한다.

18 18/39 이미지 해상도  동일한 크기의 이미지일지라도 가로, 세로가 몇 개의 픽셀로 구성 되어 있는지에 따라 이미지의 품질이 달라진다.

19 19/39 모니터 해상도 (monitor resolution)  모니터의 화면을 가로 x 세로로 몇 등분하였는지를 나타내는 것으로, 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024 등의 해상도가 사용되고 있다.  동일한 모니터에서 해상도를 높게 설정할수록 이미지의 크기 는 줄어드는 반면 이미지의 선명도는 증가하고, 모니터 화면 안에 더 많은 내용을 표시할 수 있다

20 20/39 래스터 그래픽과 벡터 그래픽의 비교

21 21/39 주의 : Painting 과 Drawing  많은 서적과 IT 사전에서 Painting 을 칠하기, Drawing 을 그리기로 번역하고 있으나 ‘ 칠하 기 ’ 와 ‘ 그리기 ’ 가 구분되는 용어가 아니다.  우리가 “ 그림을 그린다.” 라고 표현할 때 대부 분 ‘ 붓이나 크레용으로 그리는 경우 ’ 를 상정하 고 있으며 이는 래스터 그래픽이다.

22 22/39 래스터 그래픽의 개념과 표현

23 23/39 서로 다른 수준으로 확대한 비트맵 이미지의 예

24 24/39 래스터 그래픽의 전형적인 예

25 25/39 벡터 그래픽의 개념과 표현

26 26/39 서로 다른 수준으로 확대한 벡터 그래픽의 예

27 27/39 벡터 그래픽의 전형적인 예

28 28/39 그래픽과 이미지의 비교

29 29/39 이미지 압축  사람은 색상보다 명암에 더 민감하게 반응하기 때문에 이미지를 압축할 때 시각적인 영향이 적은 색상 정보를 줄이는 것이 효율 적일 것이다. JPG 가 이 원리에 따른 압축 기법이다.  GIF 는 인접한 픽셀들이 같은 값을 가질 때 이들을 압축하는 방식 을 사용한다.  그러므로 홈페이지를 제작할 때 미묘한 색의 변화가 많은 사진 이미지를 담고자 한다면 JPG 로 저장하고, 버튼, 메뉴 등과 같이 색상이 많이 포함되지 않은 이미지일 경우는 GIF 로 저장하는 것 이 좋다.  이를 쉽게 말하면 사진과 유사한 이미지는 JPG, 만화와 유사한 이미지는 GIF 로 저장하면 된다.  실습 p.172 포토샵에서의 압축

30 30/39 BMP, GIF, JPG 파일 크기의 비교

31 31/39 투명 GIF

32 32/39 투명 GIF 이미지와 다른 이미지의 합성

33 33/39 편집 소프트웨어  페인팅 도구 (painting tool) 는 붓으로 칠한다는 개념으로 래스 터 그래픽을 생성한다.  드로잉 도구 (drawing tool) 는 자나 컴퍼스 (compass) 등의 도구 를 이용하여 제도를 한다는 개념으로 벡터 그래픽을 생성한다

34 34/39 Photoshop  Photoshop 은 어도비 (Adobe) 사에서 개발한 것으로 비트맵 이미지를 다루며 이미지 프로세싱 (processing) 기능이 막강하다.  그래서 웹 디자이너, 그래픽 디자이너, 사진 작가들이 효율적으로 고 품질의 이미지를 제작할 수 있도록 도와준다

35 35/39 Illustrator  Illustrator 의 사전적인 의미는 ‘ 삽화가 ’ 이다. Illustrator 는 출판이나 광 고 등에 쓰여질 삽화나 그림을 제작하기에 적합한 도구이다.  현재 Illustrator 는 PDF 파일을 완벽하게 지원하여 Illustrator 에서 수 정된 페이지는 Acrobat Reader 에서 올바르게 읽어 들일 수 있다.

36 36/39 3D Studio MAX  AutoDesk 사의 계열사인 Kinetix 사에서 개발한 것으로 3 차원 그래픽에 대한 뛰어난 모델링과 렌더링 (rendering), 애니메이 션 기능을 제공한다. 이를 통해 게임 제작, 영화의 시각 효과, 빌딩 등의 시뮬레이션 등을 할 수 있다.

37 37/39 래스터 그래픽의 형식

38 38/39 벡터 그래픽의 형식

39 39/39 맺는말  본 장에서는 그래픽과 이미지에 대해 꼭 알아 두어야 할 개념적인 내용에 대해 살펴 보았다. 이 중에서 연구자에게나 필요로 하는 구체적 인 알고리즘이나 원리에 대한 언급은 의도적 으로 피했다.  그러한 내용들이 멀티미디어 제작과 같은 실 무에서는 알고 있어야 할 효용 가치가 별로 없기 때문이다. 이러한 내용에 대해 관심이 있는 사람은 대학원 과정에서 다루는 멀티미 디어 서적을 참고하기 바란다.