[디자인] 디자이너의 색상 선택을 도와주는 Adobe Color CC

프리모아

·

2015. 12. 24. 14:38

안녕하세요! 프리모아의 Mac 입니다.

웹디자인의 동일한 시안을 전혀 다른 느낌으로 바꾸는 가장 쉬운 방법은 무엇일까요?

동일한 레이아웃이지만 색을 Blue 계열이냐, Red 계열이냐에 따라서 느낌은 확 달라지게 됩니다.

또 Blue 계열로 통일한 디자인과 몇몇 오브젝트를 Red 계열로 하여 강조를 주는 디자인도 전혀 다른 느낌을 주게 됩니다.

이처럼 색상의 배열은 레이아웃만큼이나 중요하며, 어렵습니다.

아마 많은 프리랜서 디자이너분들도 그런 색상의 선택에서 많은 고민을 하실 텐데요.

오늘은 Adobe 에서 운영하는 한 페이지가 웹디자이너, 그래픽 디자이너분들에게 도움이 될 것 같아 소개시켜드리고자 가져와 봤습니다!



☆Adobe Color CC(https://color.adobe.com/ko)



☆Adobe Color CC 의 기능

1. 만들기


Adobe Color CC 에 들어가면 이와 같은 디스플레이를 제공합니다.

6가지의 색상 규칙과 사용자 지정에 따라서 5가지의 색상을 비교 할 수 있습니다.

화살표가 표시되어있는 원을 이동시 색상 규칙에 따라서 나머지 4가지 색들이 자동으로 선택되어 비교해줍니다.

각 색은 하단에서 RGB 값이 표시되며 HEX 값도 같이 나와 웹 디자인 코드에 바로 사용 할 수 있습니다.

상단의 원형 RGB 파레트에서 직점 드래그 하여 색상을 선택 할 수 도 있습니다.

이렇게 선택된 5가지 색을 왼쪽 위의 '저장' 버튼을 통하여 내 테마에 저장 할 수 있습니다.

단, 저장시에는 Adobe ID 로 로그인이 되어야 합니다.

웹 디자이너가 웹 디자인을 할 때 몇가지 색중 어떤 색이 더 나을지 , 색상 비교가 애매한 상황이거나 할때 상당이 유용 할 것 같습니다.



2. 이미지로 만들기


오른쪽 상단의 카메라 모양을 클릭하면 [이미지로 만들기] 가 시작됩니다.

자신의 PC에 저장된 이미지를 불러와 이미지에 있는 색상으로 테마를 만들어 줍니다

색상 무드에는 5가지가 있으며, 무드에 따라서 색은 자동으로 골라집니다.

이미지에 표시되어있는 5개의 원형을 드래그 앤 드랍 형식으로 임의로 지정도 가능합니다.

원형을 드래그 시 Zoom Display 가 지원되어 이미지를 확대해서 색의 선택을 보다 정밀하게 도와줍니다.

마찬가지로 저장버튼을 통해 자신의 테마로 저장 할 수 있으며, 탐색목록에 게시 여부도 정할 수 있습니다.



3. 만든 테마를 저장


왼쪽 위의 파란 [저장] 버튼을 통하여 현재 보고 잇는 색상 테마를 저장 할 수 있습니다.

테마의 이름을 작성 후 클라우드와 라이브러리를 통해 저장 장소를 저장 할 수 있습니다.

추가로 테마에 대한 태그도 입력이 가능합니다.

[이 테마를 탐색에 게시합니다] 를 체크할 경우 상단의 '탐색' 부분에 자신의 테마를 게시하여 다른 유져들과 공유 할 수 있습니다.


4. 탐색


유져들에 의해 이미 만들어진 색상표테마를 볼 수 있습니다.

색상표 테마는 인기도순, 사용 횟수순, 임의, 시간에 따라서 정렬이 가능하며 테마의 이름으로도 검색이 가능합니다.



5. 내 테마


자신이 생성한 테마는 [탐색] 에서도 나오지만 다른 유져들이 테마와 함께 나오게 됩니다.

상단의 [내 테마] 에선 보인이 등록한 테마만 출력이 됩니다.

디자이너분들이 직접 비교하여 자주 쓰일 것 같은 색상 패턴을 저장해 두면 추후에 해당 배열을 찾아보기 좋습니다.



(이미지를 클릭하시면 프리모아 홈페이지로 이동됩니다.)






0 개의 댓글

Recommended for You

[디자인] 웹 디자인 최신 트렌드 페럴렉스 제대로 쓰기 콘텐츠 대표 이미지

[디자인] 웹 디자인 최신 트렌드 페럴렉스 제대로 쓰기

2015.11.18

[디자인]2016 웹디자인 트렌드 요점정리! 콘텐츠 대표 이미지

[디자인]2016 웹디자인 트렌드 요점정리!

2016.02.11