'롱 쉐도우 디자인'에 해당되는 글 1건
[Flat design] Long shadow design 롱 쉐도우 디자인이란?
Design portfolio/Design interest




Long shadow icon

롱 쉐도우 디자인


글을 준비해놓고 두달정도 묵혀둔 뒤에 올리는지라 조금 늦어진 감이 있지만…

최근 디자인 트렌드를 보다보면 많이 보이는 디자인 스타일이 있다.
바로 롱 쉐도우 아이콘 디자인(Long shadow icon design)이다.




Long shadow가 무엇인가?

드리블 사이트에서 Long shadow라고 검색을 해보자.
아래와 같은 검색결과가 나오며 특징을 쉽게 알 수 있다.

주로 UI디자인에서 인터페이스 요소 및 아이콘에 큰 영향을 미치고 있으며,

웹 사이트 디자인에 많이 쓰여지고 있다.





http://dribbble.com/search?page=1&q=long+shadow










Long shadow design 의 특징?


롱 쉐도우는 해가지는 오후 또는 새벽에 물체를 보는 듯이 

긴 그림자 현상을 통해 드라마틱한 효과와 느낌을 선사하며, 

45도 기울기로 2.5배 이상의 길이를 유지하는 것이 특징이다.
(일부는 120도 기울기로 하기도 하지만 대부분 45도 각도로 

오브젝트의 오른쪽 하단 모서리 방향으로 그림자를 디자인한다.)


주로 이용되는 디자인의 형식이 플랫하며, 크게 2가지 스타일로 나눌 수 있다.
첫번째는 같은 톤의 그림자가 끝까지 선명하게 유지되는것.
두번째는 그림자가 끝으로 갈수록 차차 흐려지는 형식.


그러나 그림자가 점차 흐려진다 하더라도 기존의 디자인 형식에서의 

그림자보다 훨씬 길며, 확연하게 그림자 영역이 구분된다.





Long shadow design 의 역할?


롱 쉐도우는 플랫 디자인의 심플함과 단조로움을 보완해주는 역할을 한다.
플랫 디자인이 깔끔하고 명쾌하다는 장점이 있지만 낮은 완성도와

자칫 단조로울수 있는 단점 역시 존재한다. 

롱 쉐도우는 플랫 디자인의 이러한 부분을 보완해 줄 수 있는 하나의 방법으로 볼 수 있다.





Long shadow 디자인 보기





by David Hakkert





by Christoph Gromer





Long shadow experiment

by Giuseppe Pessia





Savory

by Christoph Gromer





Long Shadow Icons

by Georgi Davitaya





Long Shadow Flat Icons

by Hakan Ertan






Paris before sunset.

by Diana Gosi







Long snake

by fabio cuba







Long shadow Mail Icon

by Andrew -



MongolMusic logo with long shadow

by Chris






Flat long shadow Oreo

by Nick Bruun






Long shadow 디자인하는 법



http://www.awwwards.com/flat-long-shadows-step-by-step-tutorial-resources-and-examples.html


친절하게도 awwwards 사이트에 롱쉐도우 디자인 제작방법을 알려주는 방법을 올려준 분이 계시다. 감사한 페이지 :D






동영상으로도 볼 수 있다




더 참고하기 +

구글의 Straight hard shadows

롱 쉐도우는 아니지만 이와 비슷한 디자인 스타일을 지닌 구글의 Straight hard shadows 디자인이 있다.


http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 


위 링크는 behance에 올라와있는 구글 Visual assets guidelines이다. 
구글 아이덴티티를 총 정리하여 제공된 가이드라인북으로
구글의 대표 아이콘들의 형태와 컬러, 섀도우 등 모두 정의가 되어있다. 
그 중 design principles 의 shadow부분을 살펴보면 straight hard shadows라고 명시되어있다. 
이는 long shadow와도 비슷하기도 하지만 미묘하게 다르다.

Long shadow가 일반적으로 길게 빠지는 그림자의 모든 것을 지칭한다면 
구글에서 정한 Straight hard shadows는
블러나 그라데이션이 들어가지 않은 직선 형태의 그림자여야 한다. 

사용불가 예시를 보면 알 수 있듯이, 블러나 그라데이션 등 자연스러움을 강조한 효과는 사용해선 안된다.










트렌드라고 막 따라하는 것이 아니라 
롱 쉐도우 디자인에 대해 정확하게 파악하고 이용하면 더 좋은 디자인을 하도록 하자!






참고 페이지


http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/

http://www.entyce-creative.com/the-latest-trend-in-web-design-long-shadow/

http://je.roon.io/long-shadow-design

http://designmodo.com/long-shadows-design/



저작자 표시 비영리 변경 금지
신고
Creative Commons License
Name
Password
Homepage
Secret

티스토리 툴바