피그마는 여러모로 사용하기 편하다. 어도비의 툴들과 혼용해서 쓰는 경우가 대부분이긴 한데 프로젝트에 따라서 피그마만 쓰기도 한다. 또 어떨 때는 사용빈도가 피그마 10% 어도비 90%의 비율이 되기도 한다. 앱과 웹을 디자인할 때는 압도적으로 피그마의 사용량이 많고 그래픽 작업의 비중이 큰 작업들, AR이나 VR의 화면을 디자인할 때는 어도비의 사용이 현저히 많다. 하지만 간단한 이펙트 같은 경우는 피그마에서 해결하는 경우가 많은데 그중 가장 많은 사용(주관적 내 기준) 빈도를 차지하는 컬러 닷지 이펙트에 대해 간략히 써본다.
AR이나 VR의 디자인을 할 경우 사용자들이 익숙하고 친숙한 게임 UI를 많이 차용하는 편이다. 게임 화면의 경우 전체적으로 어둡고 화려한 이펙트를 사용하는 경우가 많다. 전체적인 분위기가 밝을 경우도 딤드 처리나 어두운 마스크를 부분에만 사용해서 그 위에 이팩트를 주는 경우가 많다. 그중 어두운 화면에 가장 흔하고 간단히 쓸 수 있는 이펙트다.
1. 아트보드를 만든다.
2. 배경은 블랙말고 컬러가 조금 들어간 어두운 색으로 고른다. 꼭 이미지와 같은 컬러 정보(#051E1D)가 아니어도 된다.
3. 배경위에 원을 하나 그린다.
1. 원이 선택된 상태에서 그라디언트 - Radial을 선택한다.
1. 그라데이션 두 가지 컬러는 한쪽은 흰색, 한쪽은 검은색을 선택해 준다.
** 기본은 저렇게 자연스러운 구의 그라데이션으로 만들어진다.
1. 그라데이션에서 흰색을 검은색 쪽으로 옮겨준다. (흰색의 비율이 많아야 한다)
1. 레이어 효과에서 Color dodge를 선택한다.
2. 그러면 검은색과 흰색의 경계가 아트보드의 색을 기준으로 빛나면서 눈부신(?) 표현으로 바뀌게 된다.
** 돋보기에 해를 모아 검은 종이에 비췄을 때의 느낌이랄까??
** 레이어 효과는 컬러파레트 오른쪽 물방울 모양 아이콘을 눌러 바로 적용할 수 있다.
1. 조금 작게 원을 하나 더 그려준다.
1. 두 원을 합친다. (새로 그린 원이 위로 가도록)
2. 위에 있는 새로 그린 원의 색은 배경색과 같게 한다. (필수는 아니고 이질감을 낮추기 위해서다. 다른 컬러를 사용해도 된다.)
1. 이펙트 효과를 줬던 원을 복사해서 하나 더 만든다.
1. 복사해준 원을 이미지와 같이 줄여준다.
** 복사를 하지 않고 다른 모양으로 만들어도 상관없다. 효과만 동일하게 주면 된다.
1. 선처럼 된 타원이 선택된 상태에서 그라디언트 바에 있는 흰색을 검은색에 가깝게 이동한다.
** 흰색의 영역이 적어질 수 록 자연스러운 선의 느낌과 가까워진다. 필요한 만큼 조절하면 된다.
2. 여기까지가 준비는 끝이다.
1. 만들어진 선(타원)을 움직이며 원과 겹쳐보면 위의 이미지같은 효과들이 만들어진다.
가성비 좋은 라이트 이펙트 효과다.
간단하지만 큰 효과를 볼 수 있다. 그래픽 작업을 하게 될때 유용하게 쓰일 수 있다.
댓글