Web Color 디자인 No.5 ( 미완성 파일임 ). 2/14 사진 1 3/14 사진 2.

Presentation on theme: "Web Color 디자인 No.5 ( 미완성 파일임 ). 2/14 사진 1 3/14 사진 2."— Presentation transcript:

1 Web Color 디자인 No.5 ( 미완성 파일임 )

2 2/14 사진 1

3 3/14 사진 2

4 4/14 사진 3

5 5/14 디지털 컬러 0 과 1 이라는 숫자로 이루어진 신호에 의해 재현되는 색 컴퓨터를 통해 신호를 주고 받으며, 색을 재현하는 모든 장치에서 보여지는 색 - 스캐너, 프린터, PDA, 카메라 등 ** 웹으로 보는 컬러는 서로 다. 르. 다. ** 216 웹 안전색 (216 web safety color) 216 웹 안전색 (216 web safety color) 컴퓨터의 운영체제나 브라우저의 종류에 상관없이 동일하게 재현 되는 안전한 색 체계 Mac 과 Windows 공통 지원색 = 216 40 개의 색은 디더링 (dithering) 과정 요구

6 올바른 웹 컬러 선택을 위해서는 ?

7 7/14 색채학의 분류 물리학 측면의 연구 - 색의 정확한 기록, 전달, 재현을 목적으로 하는 연구 심리적 측면의 연구 - 색에 대한 느낌, 선호 등 심리적 측면을 연구 - 심리적 측면이 주류 색상과 색조 체계의 기본개념 - 색과 언어의 관계, 사람들의 색에 대한 인상 예 ) 흰색이 많이 들어간 파스텔 – ‘ 연하다 ’, ‘ 부드럽다 ’ 빨강, 노랑, 파랑 – ‘ 선명한 ’, ’ 강렬한 ’ *** 동일 형용사 표현 가능 영역  색조, 톤 (tone)

8 8/14 색의 3 속성 색상 빨강, 노랑, 파랑 등과 같은 색의 기미. 파장이 다른 빛을 서로 다른 색으로 느끼게 하는 속성 명도 색의 밝고 어두움의 정도 빛을 반사하고 흡수하는 정도에 따라 차이 밝은 색 – 고명도, 어두운 색 – 저명도 채도 색의 기미가 강한지, 약한지의 정도 색 기미가 강하고, 무채색이 덜 섞였을 때 ( 가장 깨끗하고 순수하게 원래 색에 가까울 때 ) – 채도가 높다. 흰색과 검은색이 많이 섞여 탁하게 느껴질 때 – 채도가 낮다. 색조

9 9/14 색상 & 색조 (Hue & Tone)

10 10/14 120 색체계 / 색상 (10) 색조 (11) 단계

11 11/14 ** 컬러는 웹 사이트의 포장 : 어떻게 포장하느냐에 따라서 웹 사이트의 이미지가 달라질 수 있다. 웹 사이트에 어떤 색이 적절한지의 판단 위해서는 객관적 인 컬러에 대한 자료 분석 요구 컬러 이미지 공간 이해

12 12/14 컬러 이미지 스페이스 단색 이미지, 배색 이미지, 형용사 이미지 색 이미지를 평가할 수 있는 대표 형용사 선정 색상 & 색조 120 색을 평가 ‘ 부드러운 (Soft)’ - ‘ 딱딱한 (Hard)’, ‘ 동적인 (Dynamic)’ - ‘ 정적인 (Static)’  이 기준을 XY 축으로 하여 색의 이미지를 좌표상에 늘어 놓아 색의 위치 한눈 에 파악 하도록 구성

13 13/14 색에 대한 평가의 예 빨강색 – 매우 동적 느낌 파랑색 – 정적, 딱딱한 느낌 노랑색 – 동적, 부드러운 느낌 녹색 – 부드럽지만 동적이지도 않고, 정적이지도 않은 느낌

14 14/14 단색 이미지 공간

15 15/14 배색 이미지 공간

16 16/14 형용사 이미지 공간

17 17/14 컬러 이미지 공간에서의 “ 색 ” 의미 선명한 (vivid) 톤의 빨강색 – “ 활동적인 ” 컬러와 형용사를 같은 공간에 배치  각각 색의 의미를 비교 판단 가능. 예 ) 유아관련 사이트 디자인 컨셉 – 귀여운, 즐거운 형용사 이미지 공간 – 위치결정 배색 단색 이미지 공간 – 색 파악 이용

18 18/14

19 19/14 배색 원리의 이해 색상을 이용한 배색 색조를 이용한 배색

20 20/14 색상에서의 관계 보색 반대색상 빨강 + 빨강, 색조가 다른 경우  동일 색상 배색 자주 + 주황  유사 색상 배색 : 정돈된 느낌 빨강 – 청록  반대 색상 배색 : 변화감

21 21/14 색상을 이용한 배색 화려하고 선명한 경우가 대부분 예 ) 색동 저고리, 단청, 보자기 등의 배색 색상 배색의 특징 : 다채로운 변화감 보색대비 배색 – 강조, 명쾌함 유사색조 배색 – 정리, 안정감

22 22/14 색조에서의 관계 동일 색조 배색 같은 연한 색조이면서 색상이 상이 예 ) 선명한 빨강색, 선명한 노랑색 유사 색조 배색 색조 배색에서 바로 옆에 위치한 색과의 배색 예 ) 맑은 (Pale), 흐릿한 (Light grayish) 반대 색조 배색 기준 색조와 멀리 위치해 있는 배색 예 ) 진한 (Deep), 어두운 (Dark)

23 23/14 CASE 1 : 반대색상 유사색조 배색 특징 – 안정감 있는 변화성 고채도 배색 – 강하고 선명한 이미지 저채도 배색 – 차분하고 무거운 이미지 배경 – 노랑, 인물 – 파랑  안정적, 평화로움

24 24/14 배색사전 CASE 1 : 반대색상 유사색조 배색

25 25/14 관련 사이트 살펴보기  배경색 – 배경에 사용되는 바탕색 메인 컬러 – 주인공이 되는 색, 웹사이트의 내용과 성격을 분명하게 함 서브 컬러 – 메인 컬러를 도와주는 보조 색, 메인 컬러와 어우러져 전체 이미지 액센트 컬러 – 배색에 포인트 강조점을 주는 색, 작은 면적에 강하게 삽입 배경색, 메인 컬러, 서브 컬러, 액센트 컬러는 무엇인가 ?

26 26/14 예 1 : http://www.brainpop.com http://www.brainpop.com 액센트 컬러 서브 컬러 메인 컬러

27 27/14 예 2:http://www.kennethcole.com http://www.kennethcole.com

28 28/14 CASE 2 : 반대색상 반대색조 배색 특징 : 변화감, 역동성 컬러의 색상, 색조에 따른 면적비 조절이 필요 고채도의 빨간색 의상과 배경이 되는 어두운 초록색의 대비  인물 의 모습 선명

29 29/14 배색사전 관련사이트

30 30/14 CASE 3 : 무채색과 유채색 배색 특징 – 무채색의 면적이 넓으면 안정감 고명도 배색 – 경쾌함 저명도 배색 – 중후함 붉은 드레스와 검은 숄의 대비 빨강 + 무채색 ( 검정 )  채도 대비, 선명, 주인공 시선

31 31/14 CASE 3 : 무채색과 유채색 배색 배색사전

32 32/14 예 1:http://www.relevare.com/site http://www.relevare.com/site Main color Sub color Accent color

33 33/14

34 34/14 색조를 이용한 배색 색조배색 – 색조의 변화를 주제로 하는 배색 맑은 느낌의 색조 – 선명한 이미지 탁한 느낌의 색조 – 차분한 이미지

35 35/14 CASE 1 : 유사색상, 유사색조 특징 : 차분하고 정돈된 이미지 한 가지 색상의 이미지를 일관되게 표현할 때 사용 노랑색, 주황색

36 36/14 배색사전 CASE 1 : 유사색상, 유사색조

37 37/14 http://www.blankandcables.com/index2. html http://www.blankandcables.com/index2. html Accent color Sub color Main color

38 38/14

39 39/14 CASE 2 : 유사색상, 반대색조 특징 – 통일감 있는 반대색조 색조의 차이가 클수록 강한 이미지 보라색의 톤 변화

40 40/14 배색사전 CASE 2 : 유사색상, 반대색조

41 41/14 EX1 : http://www.style.com http://www.style.com Main color Accent color Sub color

42 42/14 Accent color Main color Sub color

43 43/14 웹 사이트 컬러분석 컬러 이미지 스페이스를 이용  체계적 논리적 사이트 디자인 가능 예 ) 대형 약국의 홈 페이지 제작 건강 / 의약 관련 사이트 수집 병원에서 개설한 사이트, 의약 관련 사이트, 건강상담 / 미용관련 사이트 각각의 사이트 특성 분석, 정리

44 44/14 병원 사이트의 컬러분석 정리

45 45/14 병원 사이트의 컬러분석 정리 병원 배경색 – 흰색, 고명도 색 서브와 메인 컬러 – 푸른 계열 ( 파랑색, 연두색 ) 엑센트 컬러 – 빨강색, 주황색 부드럽고, 정적 이미지 위생적, 청결한 이미지 의약 메인 컬러 – 연한 파랑색, 남색, 회색 서브 컬러 – 연두색, 녹색 엑센트 컬러 – 빨강, 푸른 계열 단정하고 차분한 이미지 건강 흰색, 파랑, 남색, 빨강, 자주 등 다양한 컬러 생동감, 친근한 이미지 부드럽고 동적 이미지

46 46/14 건강 / 의약 관련 사이트 컬러분석 약국 홈 페이지 의약 전문 지식. 지적이고 단정한 이미지. 친근감 의약과 건강상담의 중. 간. 쯤.

47 47/14 실습 벤치마킹대상 사이트 중 한 개를 골라 사이트 color 를 분 석 해본다. 분석결과가 해당 사이트를 효과적으로 표현하는 color 인 지 검토한 후 수정 방향을 제시해 본다.

48 48/14 과제 자신의 주제와 타겟사용자에 적합한 color 를 선택한다. 단색 이미지 선택 배색 이미지 선택 형용사 이미지 선택 색상 / 색조 배색 선택 지난 주에 작성된 스토리 보드에 선택된 color 를 넣어 스 토리보드를 수정한다.

49 49/14 프로그래밍