이미지 가져오기, 속성, 이펙트, 마스크
- 이미지 가져오는 방법
- 이미지 속성
- 이미지 자르기
- 이펙트
- 마스크 만들기
- 마스크 제거하기
1. 이미지 가져오기
무료 이미지 : https://pixabay.com/
1) 메뉴, 툴
- [피그마아이콘] - [file] - [place image]
- 단축키 : Ctrl+Shift+k
- 도형툴 - [place image]
2) 도형안에 이미지 넣기
3) 여러개의 도형 안에 이미지 넣기
2. 이미지 보정과 속성
1. 이미지
2. 이미지 또는 GIF의 섬네일
3. 불투명도 백분율 값(%) 0% ~ 100%
4. 숨기기 / 보이기
5. [-] 이미지를 제거
6. [+] 추가
7. 이미지, 단색 및 그라디언트에서 색상 스타일을 만들고. 스타일 아이콘(4개의 점 사각형)을 클릭하여 스타일을 보거나 적용하거나 생성
1) 이미지 보정
- Exposure (노출 ) : 노출은 카메라 내의 센서에 도달하는 빛의 양
- Contrast (대비) : 대비는 이미지 내의 밝은 픽셀과 어두운 픽셀 간의 차이
- Saturation( 채도 ) : 이미지 내 색상의 강도를 조정
- Temperature ( 이미지의 톤 ) : "차가운" 이미지에는 파란색 색조가 있고 "따뜻한" 이미지에는 호박색 색조
- Tint ( 색조 ) : 녹색에서 자홍색까지 수직 축을 따라 색조를 측정
- Highlights : 이미지의 밝은 영역만 분리하고 조정
- Shadows : 이미지의 더 어두운 영역만 분리하고 조정
2) 이미지 속성
- fill : 도형에 꽉 채움
- fit : 이미지 중 큰 쪽에 맞춰서
- crop : 이미지 사이즈를 사용자가 조절
- tile : 이미지 반복, 패턴과 비슷
3. Blend Mode
레이어 합성
이미지 합성
Normal
Darken : 어둡게 하기
두레이어의 색상을 비교하고 밝은색은 버리고 어두운 색만 가져와서 합성
Multiply : 곱하기 효과
흰색에 가까우면 투명하고 어두운색이 혼합되면 어두움이 곱하기되어 더 어두워지는 합성
Color burn : 색상 번
색상정보를 보고 명도를 떨어뜨리고 기본색을 어둡게 함
Light : 밝게하기
두 이미지중 더 밝은 색의 픽셀을 선택
Screen : 스크린
상단이미지의 어두운 부분이 검은색에 가까울수록 투명해지고 밝은 부분은 하단 이미지와 섞이면서 밝은 부분을 더 밝게 처리
Color dodge : 컬러닷지
대비를 감소시키면서 혼합 레이어의 색상을 하위 레이어에 반사시켜 밝게 만든다
Overlay : 가장 밝은 색과 어두운 색을 유지하면서 밝은 색은 더 밝게 어두운 색은 더 어둡게 처리
Soft light
Hard light
Difference
Exclusion
Hue
Saturation
Color
Luminosity
4 ) 색상 및 Gradients
1. 색상, 그라디언트, 이미지 : 일반 색상 ( Solid ), 이미지(image)로 영역을 채울 수 있습니다.
2. 그라디언트( Linear, Radial, Angular, Diamond) 제공됩니다.
3. 레이어 합성 스타일 : 포토샵에서 레이어 합성할 때 사용하는 Mulitply 같은 옵션을 피그마에서도 사용할 수 있습니다.
4. 컬러값 변경 : 6자리로 표현하며 웹에서 일반적으로 사용하는 Hex 뿐만 아니라 RGB나 채도와 명도값 조절이 편일한 HSL, HSB 색상 옵션을 제공합니다.
5. 색상 구분 : Document colors에는 현재 문서에서 있는 모든 색상이 표시됩니다.
3. 이펙트
- Drop shadow
- Inner shadow
- Layer blur
- Background blur
1) Drop shadow , Inner shadow
figma에는 그림자 효과와 내부 그림자 두 가지 유형의 그림자 효과가 있습니다.
Drop shadow : 객체의 거리, 블러 , 그림자크기를 설정할 수 있습니다.
Inner shadow : 객체의 안쪽 그림자 설정으로 거리, 블러, 크기를 지정할 수 있습니다.
2) background blur
이미지위에 오브젝트를 만들고 투명도 처리
background blur 처리하면 아래 영역의 이미지가 블러처리됩니다.
레이어에 background blur를 적용하면 figma 캔버스에서 선택항목 뒤에 있는 모든 레이어를 흐리게 처리합니다.
3) 레이어 블러
레이어 전체를 블러처리를 합니다.
4) 레이어
1. 레이어블러( 상단)
2. 스트로크 페인트
3. 내부 그림자
4. 채우기 페인트
5. 그림자
6. 배경 흐림( 하단 )
1) 이미지 자르기
- 도형선택
- 속성 - [ crop ]
2) 마스크
레이어를 마스크로 사용하면 마스크 개체와 마스크 되는 모든 레이어를 포함하는 마스크 개체가 만들어집니다.
마스크 적용
3) 마스크 제거
- 마스크를 선택하고 상단 툴바에서 마스크모양을 선택
- 마스크를 마우스 오른쪽 버튼으로 클릭하고 Remove mask 선택
- 마스크를 선택하고 키보드 단축키를 사용합니다.
- 맥: Control ⌘ Command M
- 윈도우:[ Ctrl ] + [ Alt ] + [ M ]
마스크 윤곽선을 전환하려면:
- Figma 메뉴를 엽니다.
- View > mask outline으로 이동합니다.
4) 이미지 내보내기
[ Ctrl ]+[ Shift ]+[ E ] / [ Command ]+[ Shift ]+[ E ]
Export 설정 후 선택 오브젝트 빠르게 내보내기
추가
하나 선택 : ctrl
여러 개 선택 : Shift
일치하는 것 선택
일치하는 개체는 둘 이상의 프레임이나 그룹에 걸쳐 존재하는 동일한 레이어입니다.
일치하는 모든 개체를 한 번에 선택하여 편집하거나 프로토타이핑할 때 시간을 절약할 수 있습니다.
예를 들어, 많은 앱 디자인에서는 각 프레임 상단에 검색창을 사용합니다.
빠르게 선택하고 동시에 편집할 수 있습니다.
'figma' 카테고리의 다른 글
| [ figma ] 07. 컴포넌트 ( Component ) 개념과 등록 (0) | 2023.07.28 |
|---|---|
| [ figma ] 06. 이미지 누끼 플러그인 Remove BG (0) | 2023.07.27 |
| [ figma ] 04. 그룹 프레임 섹션, 펜툴, Boolean operations ( 패스파인더 ), 텍스트 (0) | 2023.07.26 |
| [ figma ] 03. 피그마 페이지, 프레임 ,도형, 편집 (0) | 2023.07.22 |
| [ figma ] 02. 피그마 화면구조 ,메뉴, 룰러(Ruler)와 가이드(Guide) (0) | 2023.07.21 |