목차
이 디자인 기사는 디자인에서 그림자의 적용 및 용어에 대한 개요를 제공합니다.
그림자란 무엇입니까?
그림자는 빛이 방출되는 어두운 영역입니다. 광원이 불투명한 물체에 의해 차단되었습니다. 빛이 불투명한 물체를 통과할 수 없기 때문에 그림자가 형성됩니다. 개체는 빛을 차단하고 차단 개체를 지나 다음 표면으로 이동하도록 강제합니다. 그 결과 그림자는 2차원 형태이거나 빛을 차단하는 물체의 역투영입니다.
그림자의 크기는 광원과 이를 차단하는 물체 사이의 거리에 따라 다릅니다. 항목이 광원에 가까울수록 빛을 더 많이 차단하여 더 크고 부드러운 그림자가 나타납니다. 물체가 더 멀리 있으면 그림자가 더 선명하고 작아집니다.
어둡고 가장자리가 선명한 그림자는 단일 광원이 있는 어두운 방을 암시합니다. 가볍고 가장자리가 부드러운 그림자는 확산광이 풍부한 방을 나타냅니다.
자연스러운 그림자:햇빛에 의해 만들어집니다. 햇빛 공급 각도는 그림자의 길이를 결정합니다. 인공 그림자:
여기에는 인공 조명에 의해 생성되는 모든 그림자가 포함됩니다.
디자인의 그림자 적용
그림자의 배치와 동작은 디자인에서 필수적인 고려 사항입니다. 그라디언트, 하이라이트 및 그림자는 디자인 요소에 차원을 만들고시청자 주의. 그림자를 사용하면 디자인의 전반적인 미학과 기능을 극적으로 개선하고 깊이와 사실감을 더할 수 있습니다.
일반적으로 디자인의 그림자는 조명과 그림자 드리우기(키 및 앰비언트)의 자연스러운 실제 동작을 시뮬레이션해야 합니다. 조명) 디자인에 효과적으로 혼합됩니다.
디자인 프로세스에서 그림자를 효과적으로 사용하려면 먼저 그림자 드리우기의 기본 법칙과 핵심 요소를 이해해야 합니다.
조명 소스
광원은 광원에서 들어오는 광선의 방향과 위치를 정의합니다. 자연광은 태양의 위치를 유일한 광원으로 합니다. 인공 조명은 여러 광원을 허용합니다.
하이라이트
하이라이트로 정의되는 것은 개체에서 가장 밝게 빛나는 영역입니다. 광원을 향하고 가장 가까운 점입니다.
그림자/핵심 그림자
그림자/핵심 그림자는 빛에서 가장 멀리 떨어진 물체의 가장 어두운 부분을 나타냅니다. 원천. 그림자의 어두움은 그늘에서 다를 수 있습니다. 그림자의 가장 어두운 부분을 코어 섀도우라고 합니다.
The Cast Shadow
그림자 자체는 개체 위에 있지만 개체 자체가 캐스트 그림자를 만듭니다. 캐스트 그림자는 개체가 놓여 있는 표면에 투영됩니다. 캐스트 그림자는 항상 들어오는 광선과 같은 방향을 가리키지만 항상 광선의 반대쪽을 가리킵니다.object.
Instagram에서 이 게시물 보기inspirationsl0g0(@inspirationsl0g0)이 공유한 게시물
디자인에 그림자 적용
웹 디자이너의 책임은 색상을 만드는 것입니다. 발광 2차원 스크린용 패턴. 그림자를 사용하면 2D 디자인에서 공간의 착시 효과와 깊이가 만들어집니다. 그림자는 그래픽 디자인의 필수적인 부분입니다. 이를 이미지 디자인 프로세스에 통합하는 방법은 무수히 많습니다.
드롭 섀도우와 그라데이션은 가장 일반적으로 사용되는 두 가지 디자인 요소입니다. 기타 관련 요소로는 그림자 불투명도, 그림자 각도, 그림자 오프셋, 그림자 반경 및 그림자 부드러움(흔히 흐림이라고 함)이 있습니다.
그림자 및 그래디언트 그림자 요소 는 모든 그래픽 프로그램으로 매우 쉽게 생성할 수 있지만 단점은 이 두 가지 그림자 효과가 자주 과도하게 사용된다는 것입니다.
Skeuomorphic Design의 그림자
특히 2000년대 초반부터 중반까지 사용이 정점을 이룬 스큐어모픽 디자인 시기에는 디자이너들이 포토샵이나 유사 소프트웨어 프로그램의 레이어 스타일을 최대한 활용하여 특히 작은 크기의 화면은 매우 어수선하고 복잡하게 느껴집니다. 아이콘은 반사, 그림자 및 올바른 정렬 선으로 생성되어 3D 느낌을 줍니다.
시각적 요소는 다를 수 있지만 사용자는 항상 이 두 가지를 만들 수 있습니다.가정:
- 올라온 것처럼 보이는 요소는 누를 수 있습니다(예: 버튼)
- 움직이는 것처럼 보이는 요소는 채워질 수 있습니다(예: 입력 필드)
왼쪽 이미지: Windows 95 Setup 화면, 이미지 출처: extremetech. 오른쪽 이미지: Apple skeuomorphic Homescreen, 이미지 출처: materialdesignblog
Material Design의 그림자
2010년대 중반, 창의적인 추는 다시 미니멀리스트로 돌아섰습니다. Flat Design 트렌드와 Material UI-디자인 언어 의 개발로 접근합니다.
플랫 디자인과 머티리얼 디자인의 비교. 이미지 출처: Medium
디자인과 그림자 동작은 현실 세계의 물체를 최대한 정확하게 묘사하는 것이 아닙니다. 명확성, 질서, 연속성 및 단순성에 관한 것입니다. Flat Design 접근 방식은 Z축을 생략하여 최고의 단순성을 제공합니다. z축이 없기 때문에 UI 요소에 그림자를 통합하는 것이 불필요해졌습니다.
Google에서 처음 개발한 머티리얼 디자인 언어 는 z축을 연속성을 위한 엄격한 규칙에 초점을 맞추고 종종 애니메이션 전환을 특징으로 하는 깨끗하고 단순한 접근 방식. 미니멀한 그림자를 사용하여 깊이감을 연출했습니다. 새로운 디자인 접근 방식은 색상과 공간을 사용할 수 있는 새로운 기회를 제공했습니다.
뉴모픽 디자인의 그림자
이후거의 10년 동안 보다 단순한 2D 디자인 접근 방식을 통해 새로운 디자인 언어가 등장했습니다. Neumorphism 은 macOS Big Sur에서 두드러지게 나타납니다. 아이콘과 UI 요소는 12시 방향 광원의 음영과 하이라이트로 디자인되었습니다. 스큐어모픽 디자인의 물리적, 촉각적 접근 방식에 다시 연결되지만 과도한 레이어 스타일 그림자가 없습니다.
그림자의 동작과 투영은 재료와 뉴모픽 디자인 스타일.
스큐어모피즘, 플랫 디자인, 뉴모피즘 비교. 이미지 출처: justinmind
Material Design 카드는 무한한 그림자와 함께 떠 있는 것처럼 보입니다.
Neumorphic 디자인 카드는 배경에서 돌출된 것처럼 보입니다. 그림자 프로젝션과 빛과의 상호 작용은 완전히 다릅니다.
Neumorphic 카드와 Material 카드 비교. 이미지 출처: uxdesign
또한보십시오: 아이소메트릭 일러스트레이션 이해
Neumorphic 카드와 Material 카드 비교. 이미지 출처: uxdesign
디자인에 그림자를 통합해야 하는 이유
2D/UI 디자인에서 그림자의 목적은 주로 3D 개체를 가능한 한 사실적으로 시뮬레이션하는 것이 아닙니다. 사용자를 위한 것이 아니라 인터페이스의 탐색을 미묘하게 지시하고 쉽게 합니다.
미묘하고 신중하게 계산된 투영과 그림자를 통합하는 것은 사용자가 디자인에 더 쉽게 접근할 수 있도록 하는 이상적인 방법입니다.사용자.
디자인에 그림자를 통합하기로 선택한 경우 이를 구현하는 방법에는 여러 가지가 있음을 기억하십시오. 기사에서 언급한 다양한 매개변수를 시험해 보십시오. 이러한 설정이 디자인의 모양과 접근성에 어떤 영향을 미치는지 확인하십시오.
또한보십시오: 벡터 그래픽이란 무엇입니까?그림자의 불투명도, 각도 또는 색상을 변경하면 디자인이 보는 사람에게 어필하는 방식이 완전히 달라질 수 있습니다. 그림자 색상 속성을 변경하기만 하면 비즈니스 스타일에서 재미있고 재미있는 디자인으로 디자인을 변형할 수 있습니다.
그림자의 흐림 또는 오프셋 속성을 조정하면 이전에 간과했던 디자인 요소로 사용자의 주의를 돌릴 수 있습니다.
제공한 기본 지침을 기억하고 그림자 속성을 가지고 놀아보세요!
