figma 기초 (4) 컬러와 이미지, 그리고 레이어 패널

 

이번에는 피그마에서 컬러를 쓰는 방법에 대해서 다루어 보겠습니다.

 

 

 

---

1. 채우기(Fill) & 선(Stroke) 패널의 사용

1. Fill
2. Stroke

피그마에서 색상을 설정하는 영역은 크게 채우기(Fill) 와 선(Stroke)로 나뉜다. 

아무 레이어 개체나 선택한 후, +버튼을 눌러서 색상을 추가할 수 있다.

컬러는 중첩이 가능하다. 여기에서 색상을 클릭하면 색상 패널을 확인할 수 있다.

 

2. 색상 패널 사용하기

색상 패널에서는 페인트 타입, 컬러 피커 도구, 컬러 맵, 슬라이더, 지역 색상 및 문서 색상 확인이 가능하다.

 

• 페인트 타입 (Paint type) : 그래픽을 표현하는 방법을 설정한다. 크게 보면 단색, 그라디언트(4종), 이미지로 설정 가능
• 컬러 피커 (Color Picker) : 단축키 i 로 색상 선택을 마우스로 직접 할 수 있음. 화면 우측 상단에 확대경 생성됨.
  정확하게 컬러를 선택할 수 있음.
• 컬러 모델(Color model) : 컬러의 모델 종류를 고를 수 있다. HEX, RGB, CSS, HSL, HSB를 고를 수 있으며, 변경 시 다른 모델의 값을 볼 수 있다.
• 컬러 맵(Color map) : 세로 축은 명도(Brightness) , 가로 축은 채도(saturation)을 기준으로 색상 맵으로 원하는 색상을 선택할 수 있다.
• 슬라이더 : 컬러 맵의 색조, 색상의 투명도 등을 조절하는 슬라이더가 위치함.
  • 색조 (Hue) : 컬러 맵의 색조를 선택한다.
  • 투명도(Opacity) : 투명도를 설정한다. 투명도는 칠(Fill), 선(Stroke) 패널에서도 바로 접근이 가능하다.
• 지역 색상 (Local colors) : 현재 문서 내에 있는 컬러 스타일에 등록된 색상 목록이 뜸.
• 문서 색상 (Document colors) : 현재 문서 내에 있는 컬러 스타일에 등록되지 않은 색상 목록이 나타난다.

 

1. 컬러 패널

• 단색(solid) : 1개 색상 표현
• 선형 그라디언트 (linear) : 한 방향으로만 색상이 변화하는 그래디언트.
• 방사형 그라디언트(radius) : 중심 - 외곽방향으로 생성되는 원형 그래디언트
• 각도형 그라디언트(angluar) : 색상을 360도로 회전시켜 나타나는 각도 그래디언트.
• 다이아몬드 그라디언트 (diamond) : 다이아몬드 모양 그라디언트.
• 이미지(image) : 이미지 정보

 

2. 레이어 패널 : 블렌드 모드

• 기본 속성
  • 일반 (Normal) : 상위 이미지가 그대로 얹혀짐.가장 기본이 되는 합성 방법
• 어둡게 합성
  • 어둡게 (Darken) : 밝은 영역은 하위 레이어 어두운 영역만 상위 레이어 추가
  • 곱하기 (Multiply) : 어둡게(Darken) + 밝은 면도 어둡게 합성시킴
  • 컬러 번 (Color burn) : 어둡게 합성
+ 콘트라스트 up 
+ 채도 추가
• 밝게 합성
  • 밝게 (Lighten) : 어두운 영역은 하위 레이어 밝은 영역만 상위 레이어 추가
  • 스크린 (Screen) : 밝게(Lighten) 
+ 어두운 면도 밝게 합성시킴
  • 컬러 닷지 (Color Dodge) : 밝게 합성 
+ 콘트라스트 up 
+ 채도 추가
• 혼합 합성
  • 오버레이 (Overlay) : 밝은 영역에는 스크린(Screen) , 어두운 영역에는 곱하기(Multiply)
  • 소프트 라이트 (Soft light) : 회색 50%보다 밝으면 더 밝아지고 어두우면 더 어두워짐
  • 하드 라이트 (Hard light) : 회색 50%보다 밝으면 스크린(Screen) 어두우면 곱하기(Multiply)
• 반전 합성
  • 차이 (Difference) : 아래 레이어의 명도를 기준으로 반전 처리
  • 제외 (Exclusion) : 차이(Difference)와 비슷하지만 대비가 더 적은 형태로 표시함.
• 색상, 광도, 밝기 값 조정
  • 색조 (Hue) : 상위 레이어의 색조로 
하위 레이어를 표현.
  • 채도 (Saturation) : 상위 레이어의 채도로 하위 레이어를 표현
  • 색상 (Color) : 상위 레이어의 채도+명도로 하위 레이어를 표현
  • 광도 (Luminosity) : 상위 레이어의 
광도(Luminosity)와 하위 레이어의 색조로 표현하는 방식

각각의 자세한 컬러값의 변화는 추후 블렌드 모드 연재 분에서 다뤄볼 계획이다.

 

3. 투명도(opacity) 속성

기본적으로 투명도 속성을 조절하여 해당 요소를 반투명하게 바꿀 수 있다.

 레이어 패널부터 채우기 요소 등에서 바로 접근할 수 있으니 편리하게 사용해 보자.

 

4. 이미지 다루기

또한 이미지 편집 시에는 간단한 컬러 보정을 할 수 있는 기능이 존재한다. 노출, 대비, 채도, 온도, 색조, 하이라이트, 그림자 옵션을 조정하여 원하는 이미지 형식으로 보정해 보자. 단, 해당 기능은 포토샵에 비해 색상 변경 범위가 넓지 않으므로 주의가 필요하다. 

• 자르기
  
  • 패널 컨트롤 : 이미지를 더블 클릭하거나, 패널에서 이미지를 선택하면 자르기 영역이 나타난다.
  • 마우스 컨트롤 : ctrl / cmd 를 누른 채로 크기 조절 박스를 드래그하면 조절이 가능하다.  

---

• 보정하기 
  • 노출 Exposure : 이미지를 균등하게 밝거나 어둡게 만든다
  • 대비 Contrast : 밝은 부분은 더 밝게, 어두운 부분은 더 어둡게
  • 채도 Saturation : 무채색 - 유채색 단계를 조정할 수 있다.
  • 온도 Temperature : 전체적으로 푸른색 - 붉은색의 양을 조절할 수 있다.
  • 틴트 Tint : 전체적으로 녹색 - 보라색의 양을 조절할 수 있다.
  • 하이라이트 Highlights : 가장 밝은 영역의 색을 밝거나 어둡게 조절함.
  • 그림자 Shadows : 가장 어두운 영역의 색을 밝거나 어둡게 조절함.

---

오늘은 컬러 조정에 대해서 알아봤습니다.

다음 시간에는 이펙트(effect)와 둥글리기(Radius) 사용법에 대해서 알아보겠습니다.