본문 바로가기
IT인터넷/웹서비스

웹사이트 색조합 프로그램 ColorSchemer Studio 2

by Rookie Smart 2014. 5. 21.
반응형

웹사이트 색조합  프로그램 ColorSchemer Studio 2를 소개하기 전에 색에 대한 기초가 없는 분은 색의 3속성(색상, 명도, 채도) 및 톤이라는 개념을 알 필요가 있는데요. 색상은 빨강, 주황, 노랑 등으로 생각하면 되구요.

 

 

 

 

명도는 색의 밝기로 보통 색이 밝으면 고명도, 색이 어두우면 저명도라고 부릅니다. 채도는 색의 선명도인데요 원색은 고채도 다른 색이 많이 섞여있으면 저채도 색입니다. 채도가 없는 색을 무채색이라고 합니다. 톤은 비슷한 명도와 채도의 색들을 묶어 놓은 것입니다.

 

까만색과 흰색처럼 명도차가 큰 배색은 정보전달이 명확한 장점이 있구요. 채도가 높은 색은 화려하고 채도가 낮은 색은 소박한 특징이 있습니다.

 

 

 

 

녹색을 기본색으로 선정하고 우측메뉴에서 triads(3가지)를 선택하고 선정된 색을 마우스로 옮겨 보았는데요. 선택한 색상을 삭제하려면 우측 마우스를 클릭하면 됩니다. 녹색의 보색 2가지는 강조색으로 사용하면 좋을 것입니다.

 

이상적인 색 비율은 바탕색 70%, 보조색 25%, 강조색 5%가 알맞다고 하는데요. 바탕색이 흰색이면 흰색을 제외하고 비율을 생각하면 됩니다. 바탕색은 저채도가 좋은데요. 왜냐하면 강조색을 사용할 때 효과적이기 때문입니다.

 

 

 

 

 

 

 

 

두번째 메뉴 아이콘은 이미 많은 사용자들이 만들어 놓은 색상들을 가져올 수 있구요. 세번째 아이콘은 사진을 업로드해서 원하는 색상들을 가져올 수 있습니다.

 

 

 

 

 

 

 

 

사진 옆에 모자이크 버튼을 누르면 모자이크 상태에서 필요한 색을 가져올 수 있습니다. 네번째 아이콘은 선택한 색상들을 웹사이트, 블로그등의 레이아웃에서 미리적용해 볼 수 있는데요. 제일 마음에 드는 기능입니다.

 

 

 

 

좌측아래 스크린 피커를 선택하면 브라우저 화면에서 마음에 드는 색을 가져올 수 있습니다. 상단 기본색 옆 LiveSchemes은 배색을 추천 받거나 스스로 색상을 고를 수 있습니다.

 

 

 

Mixer>

 

<Variations>

 

 

Mixer는 두가지 색의 그라데이션 색상들을 선택할 수 있구요. Variations는 기본색에 관련된 색상들을 선택할 수 있습니다.

 

 

 

 

상단메뉴 Tools - Contrast Analyzer를 체크하면 선택한 색상을 배경으로 명도차가 큰 글씨가 어떻게 보이는지 알려주네요. 상단메뉴 File-Export Wizard를 클릭하면 여러가지 파일로 선택한 색상들을 저장할 수 있는데요. 저는 Html 파일로 저장한 후 브라우저로 살펴보았습니다.

 

 

 

 

 File-Import Wizard를 클릭해 파일들을 가져올 수도 있고 선택한 색상들을 인쇄하기도 가능합니다. 요즘 웹사이트를 만들면서 TV, 상품 포장지 등의 색상에 관심을 갖게 되네요. 유명한 웹사이트 색조합도 눈에 들어옵니다.


반응형

댓글