Tag: Color Picker

  • Color Picker 사용법

    Color Picker 사용법

    Mac용 기본 Color Picker

    맥에 제공되는 모든 기본 프로그램에선 맥의 Color Picker를 사용할 수 있다. Color Picker에 설치할 수 있는 플러그인들이 많이 있어서 한층 더 업그레이드된 툴로 사용할 수도 있지만, 기본 툴도 충분히 괜찮은 기능들을 제공한다.

    OS X 기본 컬러 픽커

    Color Palette 켜기

    애플에서 제공하는 프로그램은 대부분 shift + cmd + c의 단축키를 통해서 Color Palette를 열 수 있다(Keynote, Numbers, TextEdit 등). cmd + t로 서체 관리자를 부르는 것과 마찬가지로 외워두면 편리하다.

    임의의 색깔 따오기

    하단에 위치한 스포이드를 이용하여, 화면에 보이는 그 어떤 색상도 따올 수 있다. 또한, 따온 색상을 오른쪽 빈칸에 드래그 앤 드롭해서 저장할 수도 있다.

    팔레트로 따온 색 삭제하기

    금일자 댓글로 내용 첨삭이 가능하며 아마도, 많은 분들이 삭제하는 데에 어려움을 겪었을 듯하다. 간단하게, 색을 잡고 휴지통으로 넣어주시기만 하면 된다.

    RGB, CMYK, HSB 확인하기

    두 번째 패널로 이동하면, 아래와 같이 RGB 값 및 CMYK, HSB 값을 확인할 수 있다. 내가 저장해놓은 색을 선택할 때마다 색의 값이 바뀌니 가져다 쓰기 크게 불편하지 않다.

    나만의 팔레트 만들기

    세 번째 패널에서는 나만의 팔레트를 만들어서 저장해 놓을 수 있다. 아래 하단에 저장된 색깔을 드래그 앤드 드롭해둬도 되고, 원하는 색상을 선택한 후, + 버튼으로 추가해도 된다. 톱니바퀴 버튼을 통해 팔레트 추가/이름 바꾸기/삭제 등을 수행할 수 있다.

    사진에서 원하는 색상 추출하기

    네 번째 패널에서는 아래 경로로 사진을 선택하여, 사진을 나만의 스펙트럼처럼 이용할 수 있다. 마우스 포인터가 움직이는 곳이 곧 나의 색상으로 결정된다.

    톱니바퀴 > New from File…

    마지막 패널의 경우, 자주 사용되는 색상들을 모아놓은 경우인데, 거의 사용하지 않는다. 따로 색을 편집할 시간이 없을 때 사용하면 빠르게 사용할 수 있을 듯하다.

    Windows/Mac 모두 지원하는 Color Picker

    웹 디자이너, 사진작가, 그래픽 디자이너 및 디지털 아티스트를 위한 무료 컬러픽커 및 색상 편집 도구이다. 컬러로 작업하는 모든 사람이 사용하기 쉽고 기능이 뛰어나며, 무료 Just Color Picker를 사용하려면 아래의 사이트에 방문하여 다운로드하면 된다.

    for Windows
    for OS X
    • 색상 코드의 가장 널리 사용되는 형식: HTML, RGB, HEX, HSB/HSV, HSL, CMYK 및 Delphi 색상 코드 형식을 지원
    • 색상 노이즈를 쉽게 처리할 수 있는 평균 색상 샘플링
    • 3x, 9x 및 15x 돋보기와 마우스 커서 이동의 키보드 제어로 정밀도 향상
    • 포인트 간의 픽셀 거리의 계산
    • 선택한 색을 저장하고 다시 사용하기 위한 색 목록 작성
    • Adobe Photoshop의 .aco 색상 견본(Adobe 색상 파일) 및 GIMP의 .gpl 색상표 파일을 열고 편집하고 저장할 수 있는 기능 지원
    • 표준 Windows 또는 macOS 색상 대화 상자와 상호 작용
    • 사용자가 선택한 각 색상에 대한 주석과 참고 사항 메모 가능
    • HTML/HEX(16 진수) 및 RGB 색상 코드를 해당 색상으로 변환 가능
    • 표시된 트라이어드 및 보색이 있는 빨강-녹색-파랑(RGB), 시안-마젠타-옐로우(CMY) 및 빨강-옐로우-블루(RYB) 조화로운 컬러 휠이 표시됨( *이 기능을 사용하면 웹 사이트와 같이 색상 조합을 빠르게 찾을 수 있다. )
    • 선택한 색상을 조정하고 편집하기 위한 RGB, HSV 및 HSL 색상 편집 가능
    • 중간 색상의 넓은 범위를 생성하기 위해 두 색상 간 그라데이션 전환
    • 선택한 글꼴 및 배경 색상 조합의 가독성을 평가하기 위한 텍스트 도구 사용 가능
    • 선택적으로 Stay-On-Top 동작
    • 사용자 정의 단축키 지원
    • 버튼 하나만 클릭하면 색상 코드 또는 선택한 부분이 클립보드에 복사
    • CSS 호환 색상 코드
    • 높은 DPI 인식
    • 다중 모니터 지원
    • 다국어 인터페이스(아쉽게도 맥용에서만 한국어를 지원한다는~)

    Just Color Picker는 휴대용 프로그램이며 설치가 필요 없이 USB 메모리에서 직접 실행할 수 있다는 것이 매우 매력적인 부분이다.

    크롬 브라우저에서 Color Picker 사용

    마지막으로 브라우저 상에서 Color Picker를 사용하는 방법을 소개한다. 크롬 브라우저에서 검색 ‘Color Picker’라고 검색하면 심플한 컬러픽커를 경험할 수 있다.

  • 맥에서 디지털 컬러 측정기 활용 방법

    맥에서 디지털 컬러 측정기 활용 방법

    개발자나 디자이너에게 ‘색상’을 고르는 과정은 흔히 있는 일인 동시에 매우 중요한 일이다. 특히 모니터에서 ‘색상값(Color Code)’을 추출해야 할 때가 많이 생기는데 이럴 때를 대비해 OSX 안에는 ‘디지털 컬러 측정기(Digital Color Meter)’라는 유틸리티가 내장돼 있다. 생각보다 잘 알려지지 않은 이유는 사용 방법이 다소 모호하기 때문인 듯한데, 이번 기회에 디지털 컬러 측정기의 기본적인 사용 방법을 살펴보도록 하자.

    Digital Color Meter 사용 방법

    디지털 컬러 측정기는 응용 프로그램 > 유틸리티 폴더에 위치해 있다. 스팟라이트나 알프레드를 쓰는 경우 ‘Color’라는 키워드로 손쉽게 불러낼 수 있다.

    1. 아래는 디지털 컬러 측정기를 실행한 모습이다. 왼쪽에 마우스 포인터 주변을 확대한 섬네일 이미지가 보이고, 오른쪽에는 마우스 포인터가 올려져 있는 픽셀의 색 값이 다양한 방식으로 표시된다.


    2. 마우스 포인터가 놓은 위치의 픽셀 하나가 아닌 주변 픽셀의 평균값을 구하고 싶을 때는 조리개 슬라이드 바를 통해 조리개 크기를 조정할 수 있다. 정확도보다는 좀 더 조화로운 색상을 찾을 때 유용한 기능이다.


    3. 디자이너는 주로 RGB 모델을 바탕으로 한 색상값을 사용할 때가 많다. 우측 상단에 달린 풀다운 메뉴를 통해 총 5가지 색상 표준을 선택할 수 있는데 아래의 그림에서는 RGB 모델을 선택한다.


    4. 이제 화면(또는 이미지)에서 색상값을 추출해 본다. 색상값을 추출할 픽셀 위에 마우스 포인터를 올린 후 [keybt]⌘ Command[/keybt] + [keybt]L[/keybt] 키를 눌러주며, 나중에 마우스 포인터를 움직이더라도 색상값을 유지하기 위해서 사용된다.
    5. 참고로 웹 작업에 주로 이용하는 색상값을 얻으려면 디지털 컬러 측정기 보기 > 값 표시에서 16진수를 선택해야 한다. 예컨대 기본 상태에서 ‘흰색’의 색상값을 측정하면 ‘255, 255, 255’라는 값을 얻게 되고, 16진수에선 #FFFFFF라는 값을 얻게 된다.
    6. 이제 [keybt]⌘ Command[/keybt] + [keybt]⇧ Shift[/keybt] + [keybt]C[/keybt] 키를 누르면 색상값이 클립보드에 텍스트로 저장되며 다른 응용 프로그램에 붙여넣을 수 있게 된다.
    7. 예컨대 클립보드에 저장한 색상값을 포토샵 컬러 픽커에 붙여 넣으면, 현재 작업 중인 이미지에 해당 색상을 사용할 수 있게 된다. 또 같은 방법으로 HTML이나 CSS 코드에 붙여넣을 수도 있다.

    이처럼 OSX 안에는 의외로 유용한 기능을 품은 유틸리티가 곳곳에 숨어 있다. 보다 전문적인 도구가 필요하다면 맥 앱스토어와 인터넷을 뒤져봐야 하겠지만, 간단한 도구로도 괜찮다면 OSX에 내장된 프로그램을 먼저 이용해 보는 건 어떨까?

  • GUI 디자인 요소 Color-II

    GUI 디자인 요소 Color-II

    로고 이외에도 색상은 브랜드 인지도 중 가장 눈에 띄는 부분이다. 대부분 브랜드 컬러는 대담하고 다양한 커뮤니티를 반영하며, 색상을 적절히 사용하는 것이 브랜드를 응집력 있게 반영하는 가장 쉬운 방법 중 하나이다.

    1. Color Combination
    2. Color Picker
    3. Color Style Guide
    4. References
    5. Practice & Assignment

    슬라이드 자료