1/39 8 장 그래픽과 이미지의 개념 8.1. 색의 기본 용어 8.2. 색 모델 8.3. 픽셀과 해상도 8.4. 그래픽 방식 8.5. 그래픽과 이미지의 구분 8.6. 이미지 압축 8.7. 투명 GIF 8.8. 편집 소프트웨어 8.9. 그래픽 파일의 형식
2/39 개 요개 요 텍스트로만 표현할 경우에 수백 자 분량이 되는 정보 를 그래픽이나 이미지를 이용하면 더 쉽고 정확하게 그 의미를 전달할 수 있는 경우들이 많다. 이러한 상황은 대부분 시각적인 상태를 묘사해야 하 는 것들로 사람들에게 바로 직관적인 정보를 제공해 줄 수 있다. 멀티미디어가 활성화 되면서 과거에는 텍스트로만 표현되었던 정보들이 가급적 그래픽과 이미지로 보 완하거나 아예 대체되는 상황으로 변하고 있다. 사진이나 그래픽 등을 디지털 형태로 컴퓨터에 저장 하기 위해서는 텍스트에 비해 매우 큰 저장 공간을 필요로 하나 자료의 시각적 효과가 이러한 단점을 충 분히 상쇄시킬 수 있을 때 많이 활용되고 있다.
3/39 색의 기본 용어
4/39 색의 3 요소
5/39 색상, 채도, 명도 색상은 빨강, 파랑, 노랑, 녹색 등 색의 종류를 말하 는 것이다. 이러한 각각의 색상을 섞어서 다른 색상 을 만들어 낸다. 채도는 색의 탁하고 선명한 정도를 말한다. 채도가 낮으면 ' 탁하다 ' 라고 표현하고, 높으면 ' 선명하다 ' 라 고 표현한다. 채도가 높을수록 색깔은 강해지고, 채 도가 낮을수록 색깔이 약해진다. 그래서 채도를 계속 낮추면 결국에는 흰색, 회색, 검정과 같은 무채색이 되고 만다. 명도란 색의 밝은 정도를 말한다. 같은 빨강이라도 명도에 따라 밝은 빨강, 어두운 빨강이라고 표현한다. 명도는 흰색에 가까울수록 높다고 하고 검정에 가까 울수록 낮다고 한다.
6/39 주의 : 색 (Color) 과 색상 (Hue) 많은 서적과 인터넷 사이트에서 ‘ 색 ’ 이라는 표 현을 써야 할 상황에 ‘ 색상 ’ 이란 표현을 쓰고 있다. ‘ 색상 ’ 이란 표현이 ‘ 색 ’ 이란 단어의 고상 한 표현이 아니다. ‘ 색 ’ 의 3 요소 중 하나인 ‘ 색상 ’ 과 ‘ 색 ’ 을 명확히 구분해 표현해야 한다. Color 를 색상이라고 번역하는 것은 맞지 않다
7/39 채색과 톤
8/39 무채색, 유채색, 순색, 톤 무채색은 흰색부터 회색을 거쳐 검정색에 이르기까 지 채색이 없는 색을 말한다. 그래서 무채색은 색상 과 채도가 없이 명도만으로 구별된다. 무채색이 아닌 색을 유채색이라고 하며 유채색은 색 의 3 속성을 다 가지고 있다. 순색은 원색 중 2 색을 혼합하여 만들어지는 색을 말 한다. 순색에 흰색을 섞으면 명도는 높아지지만 채도 는 낮아진다. 이런 변화를 이해하기 쉽게 표현하기 위해 명도와 채 도를 합쳐 톤 (tone) 이라 부른다. 밝은 톤, 탁한 톤, 어 두운 톤, 즉 톤이란 색의 상태를 말하는 것이다.
9/39 색 모델
10/39 가산 색상 (RGB)
11/39 감산 색상 (CMYK)
12/39 HSB 모델 A. 채도 B. 색조 C. 명도 D. 모든 색조
13/39 색모델 선택 및 색환 웹 사이트와 같이 화면 출력만을 염두에 둘 때는 RGB 모델을 사용하고, 잉크젯 프린터 등에서 인쇄해야 할 경우는 CMYK 모델을 사용하는 것이 좋다. 색 모델간의 표현법은 상호 변환이 가능하다.
14/39 브라운관의 RGB 주사
15/39 픽셀 (pixel: PICture + Element) 픽셀은 모니터의 화면에 나타나는 각각의 점 을 일컫는 말로 이미지의 최소 단위가 된다
16/39 해상도 일반적으로 해상도 (resolution) 는 단위 길이 당 표시할 수 있는 픽셀 수를 말하는데 주로 인치 (inch) 를 단위로 사용한다. 이 경우 해상도의 단위는 dpi(dot per inch) 가 되며 레이저 프린터는 300 dpi 이상, 모니터 는 72 ~ 75 dpi 이상이면 만족할 만한 성능을 기대할 수 있다.
17/39 픽셀 해상도 각 픽셀이 가질 수 있는 색상의 종류는 픽셀 당 할당되어 있는 비트 수에 달려있다. 픽셀 해상도는 한 픽셀이 몇 비트의 색 즉 몇 종류의 색을 표현할 수 있느냐를 말한다.
18/39 이미지 해상도 동일한 크기의 이미지일지라도 가로, 세로가 몇 개의 픽셀로 구성 되어 있는지에 따라 이미지의 품질이 달라진다.
19/39 모니터 해상도 (monitor resolution) 모니터의 화면을 가로 x 세로로 몇 등분하였는지를 나타내는 것으로, 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024 등의 해상도가 사용되고 있다. 동일한 모니터에서 해상도를 높게 설정할수록 이미지의 크기 는 줄어드는 반면 이미지의 선명도는 증가하고, 모니터 화면 안에 더 많은 내용을 표시할 수 있다
20/39 래스터 그래픽과 벡터 그래픽의 비교
21/39 주의 : Painting 과 Drawing 많은 서적과 IT 사전에서 Painting 을 칠하기, Drawing 을 그리기로 번역하고 있으나 ‘ 칠하 기 ’ 와 ‘ 그리기 ’ 가 구분되는 용어가 아니다. 우리가 “ 그림을 그린다.” 라고 표현할 때 대부 분 ‘ 붓이나 크레용으로 그리는 경우 ’ 를 상정하 고 있으며 이는 래스터 그래픽이다.
22/39 래스터 그래픽의 개념과 표현
23/39 서로 다른 수준으로 확대한 비트맵 이미지의 예
24/39 래스터 그래픽의 전형적인 예
25/39 벡터 그래픽의 개념과 표현
26/39 서로 다른 수준으로 확대한 벡터 그래픽의 예
27/39 벡터 그래픽의 전형적인 예
28/39 그래픽과 이미지의 비교
29/39 이미지 압축 사람은 색상보다 명암에 더 민감하게 반응하기 때문에 이미지를 압축할 때 시각적인 영향이 적은 색상 정보를 줄이는 것이 효율 적일 것이다. JPG 가 이 원리에 따른 압축 기법이다. GIF 는 인접한 픽셀들이 같은 값을 가질 때 이들을 압축하는 방식 을 사용한다. 그러므로 홈페이지를 제작할 때 미묘한 색의 변화가 많은 사진 이미지를 담고자 한다면 JPG 로 저장하고, 버튼, 메뉴 등과 같이 색상이 많이 포함되지 않은 이미지일 경우는 GIF 로 저장하는 것 이 좋다. 이를 쉽게 말하면 사진과 유사한 이미지는 JPG, 만화와 유사한 이미지는 GIF 로 저장하면 된다. 실습 p.172 포토샵에서의 압축
30/39 BMP, GIF, JPG 파일 크기의 비교
31/39 투명 GIF
32/39 투명 GIF 이미지와 다른 이미지의 합성
33/39 편집 소프트웨어 페인팅 도구 (painting tool) 는 붓으로 칠한다는 개념으로 래스 터 그래픽을 생성한다. 드로잉 도구 (drawing tool) 는 자나 컴퍼스 (compass) 등의 도구 를 이용하여 제도를 한다는 개념으로 벡터 그래픽을 생성한다
34/39 Photoshop Photoshop 은 어도비 (Adobe) 사에서 개발한 것으로 비트맵 이미지를 다루며 이미지 프로세싱 (processing) 기능이 막강하다. 그래서 웹 디자이너, 그래픽 디자이너, 사진 작가들이 효율적으로 고 품질의 이미지를 제작할 수 있도록 도와준다
35/39 Illustrator Illustrator 의 사전적인 의미는 ‘ 삽화가 ’ 이다. Illustrator 는 출판이나 광 고 등에 쓰여질 삽화나 그림을 제작하기에 적합한 도구이다. 현재 Illustrator 는 PDF 파일을 완벽하게 지원하여 Illustrator 에서 수 정된 페이지는 Acrobat Reader 에서 올바르게 읽어 들일 수 있다.
36/39 3D Studio MAX AutoDesk 사의 계열사인 Kinetix 사에서 개발한 것으로 3 차원 그래픽에 대한 뛰어난 모델링과 렌더링 (rendering), 애니메이 션 기능을 제공한다. 이를 통해 게임 제작, 영화의 시각 효과, 빌딩 등의 시뮬레이션 등을 할 수 있다.
37/39 래스터 그래픽의 형식
38/39 벡터 그래픽의 형식
39/39 맺는말 본 장에서는 그래픽과 이미지에 대해 꼭 알아 두어야 할 개념적인 내용에 대해 살펴 보았다. 이 중에서 연구자에게나 필요로 하는 구체적 인 알고리즘이나 원리에 대한 언급은 의도적 으로 피했다. 그러한 내용들이 멀티미디어 제작과 같은 실 무에서는 알고 있어야 할 효용 가치가 별로 없기 때문이다. 이러한 내용에 대해 관심이 있는 사람은 대학원 과정에서 다루는 멀티미 디어 서적을 참고하기 바란다.