고급스런 색상 만들기 혹은 선택하기...

고급스런 색상 만들기 혹은 선택하기... > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

고급스런 색상 만들기 혹은 선택하기... 정보

JavaScript 고급스런 색상 만들기 혹은 선택하기...

본문

색상 선택에 관한 저나름대로의 방법입니다.

서핑을 하다가 보면

아주 깔끔하면서도 세련되고 고급스런 색들이 적절하게 매치된 사이트들을

많이 보셨을 것입니다.

색상선택은 사이트 제작시 고민을 많이 하는 분야입니다.

원색은 강렬한 느낌은 줄수 있지만 세기가 떨어져서

뭔가 덜 다듬어지고 투박한 느낌을 주기가 쉽습니다.

색상 선택을 돕는 컬러피커나 색상표 등이 많이 나와 있지만

자칫 색의 함정에 빠지기 쉽습니다.

색은 그 채워지는 면적이 넓어질수록 색의 특성이 강화됩니다.

예를 들면 같은 옅은 회색을 써도

그 면적이 넓으면 어두운 느낌을 주고 면적이 좁으면 밝거나 희미한 느낌을 줍니다.

색상표는 그저 참고용으로만 쓰시고

자신의 색을 만드는게 중요합니다.

일부분이겠지만 시각디자이너 중에서는 책임자로 있으면서도

색에 관한 노하우만은 부하 디자이너에게 전수하지 않으려는 사람들도 있을 정도입니다.

색상 팔레트나 색상표에서 멋진 색을 찾아 내기란 쉽지 않습니다.

아래와 같은 방법으로 해보시면 고급스런 자신만의 색을 찾기가 쉽습니다.

1.일단 실제 쓰려는 오브젝트와 비슷한 크기의 오브젝트를 하나 만듭니다.

2.색상팔레트에서 자신이 쓰고자 하는 색상과 유사한 색을 스포일러로 선택하여 채워 넣습니다.

3.image-adjustments-brighness/contrast를 선택하여

밝기와 선명도를 조절합니다. 같은 색이지만 밝기와 선명도의 조절에 따라서 전혀 다른 느낌을 줍니다. 선명도가 너무 높으면 보는 사람의 눈에 거부감을 줄수 있으므로 너무 높이지 않습니다.

4.image-adjustments-color balance에서 색상의 비율을 적절히 조절합니다.

5.어떤 색을 강조하고 싶을 때는 밝기를 낮추고 선명도는 올린 후 색상 밸런스에서

그 색상의 수치를 높여 줍니다.

6.회색게통의 색상이라면 image-adjustments-Levels의 수치로 조절합니다.

7.완성된 색상이 마음에 들면 그 색상값을 복사하여 새로만든 정확한 오브젝트에 적용합니다.

매우 간단하고도 쉬운 방법이지만

위와 같은 방법으로 색을 만들면 스포일러로 색상을 찍을 때와는

비교도 할수 없을 만큼 품위있는 색을 만들수 있습니다.

색상 선택시 꼭 기억하여야 할 사항입니다.

1.사이트의 특성에 잘 맞는 멋있는 색상은 선택하는 것이 아니라 만드는 것입니다.

2.색상은 혼자 쓰일 때와 다른 색과 어우러질 때의 느낌이 크게 다릅니다.

주변에 어떤 색을 쓸것인지 까지 고려해야 합니다.

3.너무 강한 느낌의 색은 면을 쪼개는 느낌과 함께 시각적으로 불편한 느낌을 줍니다.

4.어떤 면을 보았을 때 사람의 시선은 일반적으로 좌측에서 우측으로 이동합니다.

시각의 흐름을 거스르지 않게 좌측에서 부터 옅은 계열의 색상을 사용하여

우측으로 갈수록 강해지는 느낌의 색상을 씁니다.

특히 강조할 부분이 아니라면 그 중간에 우측보다 강한 색을 쓰지 않습니다.

흐름을 역으로 쓰는 것도 개성있는 방법일 수 있으나 가운데에 더 강한 색을 써

서 흐름을 끊는 방법은 피하는게 좋습니다.

5.같은 색상이라도 채우려는 오브젝트의 면적과 형태에 따라서 전혀 다른 느낌을

줍니다. 실제 사용하려는 오브젝트들을 제 위치에 배치한 후 결과를 보면서 1-7

번까지의 방법으로 조절하시면 느낌이 살아있는 색을 만드실 수 있습니다.

밤을 새우고도 잠이 오지 않아 유머게시판이나 기웃거릴까 해서 들어 왔다가

어떤분이 물어 오셨기에 간단하게 답할수 없는 내용이라 팁란에 올립니다.

* 지금 읽고 계시는 이글의 본문 바탕색인 옅은 회색은 색과 색사이에서 중화작용을 하며 어떤 색과도 잘 어울립니다. ***옅은 회색***을 잘 활용하시면 사이트의 품격이 달라집니다.

[이 게시물은 관리자님에 의해 2011-10-31 16:52:33 Photoshop에서 이동 됨]

댓글 13개

그누폐인 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

07.02.23 08:17:50

목마른 제게 단비같은 좋은 팁입니다. 감사합니다.

뜨락의이름 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

07.02.23 08:24:32

부족한 글에 늘 자상한 댓글로 격려하여 주시는 폐인님..감사합니다.

뜨락의이름 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

07.02.23 08:31:11

참고로
색의 흐름이 끊어진다는 의미는 제 서명을 보시면 이해하시기가 쉬울것입니다.
우측에서 옅은 색이 좌측으로 흐르다가 의도적으로 중간에서 캐릭터가 시선을 차단하고 있습니다.
이럴 경우 대부분의 시선은 캐릭터가 차단한 우측을 한번더 보게 됩니다.
강조효과는 있지만 캐릭터가 면을 양분하는 느낌을 주어서 시각적으로는 자연스럽지 못합니다.

색시별 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

07.02.23 08:32:36

글잘읽었습니다..아주 좋은 내용이네요....앞으로 많이 참고 해야겠습니다..

더불어 제 사이트 느낌을 한번부탁드립니다..

만들기는 만들었지만 혼자만의 사이트라 영 다른 분들이 어찌 느낄지가 궁금해서요..

http://www.beomsu.com/

뜨락의이름 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

07.02.23 08:37:35

방금 보았습니다...
깔끔하고 예쁜 사이트군요.
외람되게 말씀드릴 입장은 아니지만 조심스럽게 느낌을 말씀드린다면

1.메뉴의 짙은 색이 허공에 떠 있는 듯한 느낌을 줍니다.
2.메뉴의 세로폭이 필요이상으로 넓은 듯한 느낌입니다.
3.상단의 메뉴부분과 중간의 네비게이션 부분 사이의 주황색 띠가 굵어서 다소 투박한 느낌입니다.
4.왼쪽 부분의 빨간 로그인 버튼과 '별하나 시낭송'의 타이틀 배경색상이 약간 부딪치는 느낌입니다. 적색과 청색 계통은 극단적으로 부딪치는 계열입니다.

그외는 아주 깔끔하고 보기 좋은 것 같습니다.