레이블이 배색인 게시물을 표시합니다. 모든 게시물 표시
레이블이 배색인 게시물을 표시합니다. 모든 게시물 표시

2013년 8월 14일 수요일

블로그/웹사이트 색상 조합 시 참고할 만한 사이트 - Adobe Kuler

블로거를 처음 개설하거나 꾸밀 때 가장 먼저 설정해주는 것 중 하나가 바로 색상이죠.

Adobe Kuler

는 블로그나 웹사이트에서 색상 조합이나 배치를 설정할 때 상당히 유용하게 쓰일 수 있는 사이트입니다.

영문 사이트이지만, 사용법은 매우 쉽습니다.

그림1

위의 링크로 들어간 다음 Color Rule 메뉴에서 자신이 원하는 배색/색상조합 방식을 설정합니다. 각각의 조합이 무엇을 의미하는지 잘 와닿지 않는다면, 배색, 색상조합 기본 개념 이해하기 라는 글을 참고하시기 바랍니다.

그림2

원하는 조합 방식을 선택했다면, 아래에서 색상 하나를 클릭한 후 <그림2>에서 보시는 것처럼 색상코드를 입력, 베이스 컬러로 설정해 줍니다. <그림2>에서는 제 블로그의 베이스 컬러인 '2580a2'를 입력해주었습니다.

그림3
그리고, 베이스 컬러를 제외한, 나머지 색상들 아래에 있는 원을 조금씩 움직여서 원하는 색상을 설정합니다. <그림1>의 단계에서 Complementary(보색)을 설정했다면, 보색 조합의 범위 안에서 색상을 얻을 것입니다. 기준 색상을 정하지 않았다면, 팔레트 위의 시계 바늘처럼 생긴 돋보기를 클릭하여 원하는 조합을 찾아보는 것도 좋은 방법입니다.

그림4
Adobe Kuler를 이용하여, 이미지로 부터 색상을 추출할 수도 있습니다. 예를 들어, <그림4>와 같은 분위기의 색상을 얻고자 한다면,

그림5
사이트 우측 상단의 'Create from Image'를 클릭하여 이미지 파일을 업로드 합니다.

그림6
그 다음, 왼쪽의 Color Mood에서 색상 추출 방식을 선택하여, 색상을 추출합니다.

그림7
추출된 색상이 마음에 들지 않는다면, 이미지의 원들을 클릭 드래그하여 추출하고자 하는 색상을 직접 설정해줄 수도 있습니다.



배색, 색상조합 기본 개념 이해하기 - Monochromatic, Complementray, Analogous, Split-complementary, Triad, Tints, Shades, Tones



  • Monochromatic - 단색 배색, 또는 단색 조화
  • 같은 색조에 의한 배색 방법.
  • 기본 색상을 하나만 골라 명도를 조절해 밝거나 어두운 색을 몇 가지 만들어 쓰는 방식
  • 무난하고 안정적이며 부드러운 느낌을 준다.





  • Complementray - 보색
  • 색상환에서 서로 상반된 위치에 있는 색들로 구성하는 방법.
  • 보색 조합은 그외 여러 색상 설계와는 매우 달라서, 보색관계에 있는 색들을 함게 모으면 동시 대비 효과(simultaneous contrast) 가 나기도한다.
  • 각 색은 다른 색을 좀 더 선명하게 하고, 서로를 더 두드러져 보이게 한다. 이 효과를 잘 이용하면 사이트 방문객들의 시선을 성공적으로 유도할수 있다.
  • 그러나 잘못 사용하면 두색이 서로 충돌하는 부조화 현상이 일어날 수 있다.





  • Analogous - 유사색 배색
  • 색상환에서 한 색과, 이웃한 다른 색으로 구성하는 방식
  • 색을 차분하게 조화시키고 싶을 때 인접색끼리 배치한다
  • 색의 차이가 크지 않아 안정적이고 친근한 느낌을 준다.
  • 유사색을 구성할 때는 색의 수가 색상환에서 3분의 1이하로 선택해야 한다.





  • Split-complementary - 분할보색 배색
  • 기본 색을 선택하고 그 색과 보색위치에 있는 색에 있접한 두 색을 사용하는 방식






  • Triad - 3색 배색
  • 기본 색상을 중심으로 3가지 대비되는 색상으로 선택.
  • 색상환에서 각각 같은 간격으로 위치하는 색상을 세 개 선택한다.
  • 다채롭고 뚜렷하지만, 연관되지 않은 다른 종류의 색이 흩어져있는 듯한 느낌을 피하려면 주의가 필요하다.



Tints, Shades, Tones


  • Tints - 기본 색조에서 흰색을 첨가해나가는 방식


  • Shades - 기본  색조에서 검정색을 첨가해나가는 방식


  • Tones - 기본 색조에서 회색을 첨가해나가는 방식





sources :
여러색상 설계법 (해피나무의 걷기 좋은 길)
컬러 배색법 (북극을 사랑한 여우)
tigercolor
worqx
cristinacolli