미니멀한 디자인 '뉴모피즘' 포토샵으로 제작해보기

 

뉴모피즘 디자인

 

평면적인 이미지를 대신해서 그림자를 통한 음각과 양각을 표현한 '뉴모피즘'

최근까지도 반짝 인기를 끌었지만 uxui 측면에서 봤을 때 기능적인 한계와 불편함으로 금방 인기가 식어버린 디자인이기도 하다.

하지만 단순히 디자인만으로만 봤을 때 정말 깔끔하고 '미니멀한 디자인'으로는 완벽하다.

앱, 웹 페이지 전체로 뉴모피즘을 도배하기엔 무리가 있더라도

부분적으로 양감을 표현할 때는 유용하게 쓰일 것 같고 포토샵 기능으로 Drop Shadow를 가장 잘 활용한 예가 아닐까 싶다.

 

포토샵 미니멀 디자인 작업과정

우선 앱화면을 표현하기 위해서 기본적인 도형을 추가하고 

Layer Style - Drop Shadow에서 빛방향에 따라 그림자를 설정한다.

도형과 분위기에 따라 약간씩 다르지만 위 디자인을 제작할 때는 아래와 같이 설정했다.(상단 동그라미 부분)

[밝은 영역]
1.
Blend Mode : Screen
Angle : -45
Distance : 2px
Spread : 0px
Size : 7px
 
2.
Blend Mode : Screen
Angle : -45
Distance : 20px
Spread : 0px
Size : 40px
 
[어두운 영역]
1.
Blend Mode : Multiply
Angle : 135
Distance : 4px
Spread : 0px
Size : 7px
 
2.
Blend Mode : Multiply
Angle : 135
Distance : 4px
Spread : 0px
Size : 7px 

뉴모피즘은 이렇게 그림자 부분만 끝난다면

그 위에 적절한 아이콘과 텍스트를 삽입하여 배치해 주면 끝이다.

다른 작업에 비해서 작업 또한 매우 미니멀한 편이다:-)

 

 

앱으로 구현해 본 뉴모피즘 디자인