글래스모피즘 아이콘 피그마로 쉽게 제작해 보기(2)
라이브러리와 원본 다운로드를 제공합니다.
지난 시간에 피그마로 글래스모피즘 아이콘을 제작하는 방법 기초에 대해 설명드렸습니다.
두 번째 시간은 더 쉽게 제작할 수 있도록 라이브러리에 컬러 스타일이 담겨 있는 피그마 파일을 공유하도록 하겠습니다. 관심 있으신 분들은 하단의 피그마 링크를 통해 다운로드 받으시면 됩니다.
지난 시간에 언급한 내용 중 정정할 내용이 있습니다. 하나의 도형에 하나의 이펙트만 줄 수 있다고 언급한 내용이 있는데 이를 정정합니다. 하나의 도형에 한꺼번에 여러 개의 이펙트 적용이 가능합니다.
먼저 못 보신 분들을 위해 지난 글 보기 링크입니다.
https://brunch.co.kr/@jisungmin/55
먼저 다운로드를 받고 싶으신 분은 클릭해 주세요.
https://drive.google.com/file/d/1l-8C0tph6iZFlWnuURtd_FClYv9rvTFG/view?usp=share_link
위에서 언급한 대로 공유된 피그마 파일을 분석해 보시기 전에 이번에 아이콘을 만들면서 느낀 점 두 가지를 말씀드리도록 하겠습니다.
첫째. 크기가 더 큰 형태를 유리로 사용
작은 유리틀 뒤에 큰 형태를 보는 것보다 큰 유리 뒤에 작은 형태를 위치하는 것이 시각적으로 느껴지는 효과가 더 컸습니다. 아래 이미지를 참조해 주세요.
오른쪽이 지향점두 번째, 코너의 라운드 적용
유리의 모서리가 날카로운 경우보다는 라운드 값이 있는 경우 마찬가지로 시각적으로 느껴지는 효과가 컸습니다. 또한 심리적으로 날카로운 유리는 시각적인 불편함을 동반하게 됩니다.
오른쪽이 지향점위의 두 가지 사항을 다시 한번 상기하시길 바라며 라이브러리를 이용한 제작과정에 대해 설명드리겠습니다. 따라 해 보실까요?
Step 01.
피그마에 프레임을 만들고 원하는 도형 2개를 그려줍니다.
Step 02.
두 도형에 라이브러리에 등록된 컬러스타일 중 하나를 각각 적용해 줍니다. 저는 "Gradation_Face_Red"와 "Gradation_Face_Pink"를 적용하였습니다.
Step 03.
두 도형에 Stroke값을 5로 적용하여 줍니다. (두께는 도형의 크기에 따라 자율)
Step 04.
Stroke에 라이브러리의 컬러스타일 "Stroke"를 적용해 줍니다.
Step 05.
두 도형을 겹쳐줍니다.
Step 06.
앞쪽에 있는(고도가 더 높은) 도형에
Effects > Background Blur(수치값 자율)
Effects > Drop Shadow(수치값 자율, 그림자는 보일 듯 말듯하게 적용)
를 적용합니다.
위의 1번부터 6번까지의 과정을 따라 하시면 피그마로 글래스모피즘 아이콘을 쉽게 만드실 수 있습니다. 위와 같은 과정을 통해 제작된 아이콘들을 한번 보도록 할까요?
마이 페이지
찜하기
검색
파일
페이퍼, 서류
챗, 메신저
지도
시간, 타임
필터
마우스
앨범 - 아이폰
앱스토어
아이스 바다시 피그마 다운로드 링크입니다.
https://drive.google.com/file/d/1l-8C0tph6iZFlWnuURtd_FClYv9rvTFG/view?usp=share_link
피그마의 스마트 애니메이션을 사용하면 아래와 같은 영상이 제작 가능합니다. 이 부분도 추후 다루도록 하겠습니다.
읽어주셔서 감사합니다.
