피그마 마스크는 어떻게 활용할 수 있을까?
올해는 꼭 피그마 배우고 만다!
디자이너들의 새해 계획 중 하나가 '피그마'라고 할 정도로 피그마는 협업툴로 각광받고 있습니다. 저또한 웹디자인에 관심을 두면서 요즘 피그마를 공부중인데요.
아직 기초 단계를 훑고 있긴 하지만, 웹 기반이라 그런지 일러스트보다 직관적인 기능이 많다는 걸 느끼고 있어요. 앞으로 제가 배운 내용을 복습할 겸 조금씩 이곳에 풀어보려고 합니다.
오늘은 그 첫 번째 시간으로 피그마의 마스크 기능을 이용해 그라데이션 텍스트를 만들어볼게요🙂
마스크 기능으로 텍스트 꾸미기
피그마의 마스크는 일러스트라고 가정한다면 클리핑 마스크와 같습니다. 특정 영역만 보이게 하는 기능인 것이죠.
설명하기 전에 완성본 부터 공유해볼게요. 도형에 마스크를 입히고 그걸 텍스트에 적용해서 만들었습니다. 과정은 생각보다 쉽습니다.
01. 사이즈 500x500의 프레임(단축키 F)을 만들어주세요.
※ 프레임은 일러스트의 아트보드와 유사하다고 보시면 됩니다. 사이즈는 임의로 지정했습니다.
02. 단축키 R을 눌러 500x300의 사각형을 만들어주세요
03. 다음의 두 가지 컬러로 사각형에 그라데이션을 적용해볼게요. 🔗추천하는 색조합 사이트
04. 오른쪽 Fill 패널에서 앞쪽 사각형을 클릭하면 색상 지정할 수 있는 창이 나옵니다. Custom탭에서 상단 네 가지 아이콘 중 두 번째가 그라데이션이에요. 하단에 헥스코드를 입력해주세요
05. Linear 모양으로 선택한 후, 각도는 직접 조절할 수 있어요
06. 이젠 텍스트를 입력해볼게요. 임의로 Figma Design이란 단어를 입력했습니다. 그라데이션이 잘 반영되려면 폰트의 두께가 굵은 게 좋아요. (Inter체, Extra Bold, 75pt, -5%로 입력)
07. 마스크를 적용하려면, 적용할 텍스트가 레이어 가장 하단에 있어야 합니다. 사각형을 텍스트 위로 올릴게요
08. 이제 마스크를 적용해볼게요. 단축키는 아래와 같습니다. 마스크 그룹이 생성되었고, 텍스트 앞의 모양도 달라졌어요!
💡피그마 마스크 적용 단축키
Mac: ⌥ (Option) + ⌘ (Command) + M
Windows: Ctrl + Alt + M
텍스트 수정해도 그라디언트 그대로 적용됩니다
그라디언트가 그대로 적용된 상태에서 텍스트를 바꿔볼게요.
좌측 패널에서 사각형 레이어를 잠그고, 텍스트 레이어를 선택한 후 텍스트를 변경하면 됩니다
영어에서 한글로 바꿔도 그라데이션이 그대로 적용되는 걸 볼 수 있어요 (이건 일러스트보다 훨씬 간편한 것 같아요👍)
피그마 마스크 해제는 어떻게 할까?
그렇다면 마스크 해제는 어떻게 할까요? 아주 간단해요
좌측 패널에서 텍스트 레이어를 선택한 후, 단축키를 다시 한번 누르면 됩니다.
💡피그마 마스크 해제 단축키
Mac: ⌥ (Option) + ⌘ (Command) + M
Windows: Ctrl + Alt + M
마스크 해제 완료된 모습입니다. 피그마 마스크는 적용과 해제 단축키가 동일하니 좋더라고요 😉
+덧붙임
🔻혹시 텍스트가 아닌 이미지에 마스크 하는 방법이 궁금하다면, 아래 영상을 참고해주세요🔻
오늘의 기록은 여기까지 입니다
다음엔 더 쓸모있는 경험을 가져올게요
🫰
인기글 더 살펴보기
[일러스트 벡터화] 로고 원본이 없다고? 이미지 추적으로 해결하는 법!
이미지를 일러스트로 바꿀 수 있을까?로고 원본 파일이 없는데, 괜찮나요? 명함 디자인을 하다 보면 로고 원본 파일이 없다는 경우가 종종 있습니다. 주로 외주로 명함을 제작하고, 이후 일러스
cream-bread.tistory.com
[티스토리 블로그] 키워드 검색량 조회하다 급 현타...저만 그런가요?
블로그수익화? 정말 돈만 보고 지속할 수 있을까?블로그SEO, 수익화 조건, 키워드 검색량 조회, 글쓰기 루틴 만드는 방법까지. 블로그 운영 팁이 넘쳐나는 세상입니다. 부업 열풍으로 인해 수익형
cream-bread.tistory.com
크몽, 숨고 없이도 일을 받는다고? 처음 외주를 받은 이야기
크몽, 숨고 없이도 일을 받는다고? 처음 외주를 받은 이야기
디자이너가 블로그 운영을? 퇴사 후에도 블로그 포스팅 좀 해줄 수 있어? 이 말 한마디에 저는 크몽이나 숨고 같은 플랫폼 없이도 첫 외주를 맡게 되었습니다. 사실 저는 이전 직장에서 편집 디
cream-bread.tistory.com
'디자인 > 스킬 노트' 카테고리의 다른 글
| [일러스트 아트보드] 정리 방법, 이렇게 쉬운데 안 할 거예요? (트림뷰 기능 이해하기) (0) | 2025.03.31 |
|---|---|
| [무료사이트 추천] 시간 낭비 금지! 무료 일러스트·아이콘 사이트 4곳 공개 (0) | 2025.03.24 |
| [그래픽 자격증] 컴퓨터그래픽기능사 실기/필기 후기(기출문제,공부법공유) (0) | 2025.03.20 |
| [인쇄 용어] RGB로 작업하면 큰일 난다고? 편집 디자이너 지망생에게 추천하는 실무 용어 정리 (0) | 2025.03.15 |
| [일러스트 벡터화] 로고 원본이 없다고? 이미지 추적으로 해결하는 법! (0) | 2025.03.14 |
댓글