그리고 이것이 우리가 얻은 것입니다…

5.png

그러나 이것은 우리에게 충분한 깊이를 제공하지 않습니다. 우리는 이 직사각형이 표면에 고르게 닿지 않기 때문에 더욱 눈에 띄게 곡선을 만들고 싶지만 레이어 스타일을 사용하여 더 많은 그림자를 추가하거나 그림자를 더 강하게 만들어도 원하는 효과를 얻을 수 없습니다. 이것을 사용하십시오 수평 분배기 dezinpolio.com에서 제공하는 것을 모양의 중앙에 추가하면 아래와 같이 모서리 쪽으로 "흐려지도록" 됩니다.

6.png

자, 우리가 굵은 글씨를 언급한 것을 기억하시나요? Web 2.0에서는 글꼴을 잘 활용합니다. 읽기 쉽고 약간 만화적이며 굵은 글꼴이 좋습니다. 우리는 적합한 글꼴을 선택하는 데 어려움을 겪었고 "Cooper Std"를 선택하기로 결정했습니다.

7.png

우리는 매우 부드러운 그림자를 추가하려고 합니다(#5674a7) 및 상단의 흰색부터 밝은 그라데이션(#ffffff)에서 연한 파란색(#cdd9de)…

8.png

9.png

기치

이것은 우리에게 아주 귀여운 아기 디자인을 줄 것입니다.

10.png

웹 2.0 역시 비율이 좋고 디자인이 특히 비대칭인 반면 다른 것들은 말하자면 강박적으로 대칭적입니다. 나는 두 번째 유형을 선호합니다. 창조하는 데 독창성과 취향이 덜 필요하기 때문에 필요한 것은 비례감뿐입니다. 디자인의 하단과 측면 모서리에 몇 개의 버튼을 추가한다고 가정해 보겠습니다.

11.png

이거 괜찮아 보이는데?

12.png

아니요, 탭이 너무 혼란스러워 보이기 때문이 아닙니다. 따라서 왼쪽 탭의 선이 아래쪽 탭의 선과 "만나는지" 확인하겠습니다. 이렇게…

131.png

이제 비례하는 것 같습니다.

crystal_clear_app_ark2.png

기치

왜 한 단계를 놓쳤는지 궁금하시다면 탭의 레이어 스타일은 기본 직사각형에 사용한 것과 거의 동일하며 "탭"의 글꼴 및 레이어 스타일도 마찬가지입니다. 학습 목적으로 PSD 파일을 다운로드하여 과정을 분석할 수 있습니다. 반쯤 보이는 그라데이션과 1px 윤곽선이 훌륭한 웹 디자인과 성숙한 디자인 시도의 차이를 만드는 경우가 많다는 점을 기억하세요. 행운을 빌어요!

psd 파일 다운로드