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