웹 2.0 디자인을 효과적으로 사용하는 방법을 알려주는 수많은 튜토리얼과 가이드가 온라인에 있습니다. 대부분의 튜토리얼은 유용하지만 동시에 웹 디자인의 독창성을 죽입니다. 예를 들어, 대부분의 "가이드"에서는 웹 2.0이 광택 있는 배지, 줄무늬 배경 및 굵은 글꼴을 갖는 것에 관한 것이라고 말합니다. 결과? 배지, 줄무늬, 굵은 글씨 등을 포함한 셀 수 없이 많은 디자인이 있으며 서로 다르지 않습니다. 웹 2.0, 웹 1.0 또는 웹 75.0 디자인을 만드는 것은 중요하지 않습니다. 결국 모든 것이 독창적이고 기억에 남을 것입니다.

그러나 디자인을 상징하는 특별히 독창적인 것을 찾을 수 없다면 현재 웹 디자인 트렌드를 따르는 것이 "더 안전"합니다. 여기에 웹 디자인 레이아웃의 아주 작은 부분과 일반 레이아웃을 웹 2.0 레이아웃으로 바꾸는 방법이 있습니다.

이것이 우리가 가졌던 것입니다…

14.png

그리고 이것이 우리가 할 일입니다…

13.png

우리는 레이어 스타일만을 사용하여 Photoshop에서 작업할 것입니다. 온화한 그라데이션과 그림자에 중점을 둡니다.

모서리가 둥근 직사각형 모양을 사용하고 직사각형을 그리는 것으로 시작하세요.

1.jpg

기치

먼저 해야 할 일은 직사각형에 깊이와 생명력을 부여하는 것입니다. 웹 2.0 디자인의 원칙에 따라 그림자, 윤곽선 및 조명 그라데이션만이 이러한 효과를 제공합니다. 레이어 스타일로 이동하여 약간 부드러운 그림자를 삭제하세요. 우리는 사용했었다 #96aed6 이 목적을 위해.

2.png

모양에 약간의 깊이를 주려면(평평한 물체처럼 보이지 않도록) 더 어두운 톤의 부드러운 내부 그림자를 추가합니다(우리는 #304f82 )

3.png

마지막으로 약간의 개요를 추가하는 것이 중요합니다. #FFFFFF 흰색 색상을 사용하겠습니다. 양쪽의 그림자가 더 어둡기 때문에 모양의 윤곽을 잡아주는 밝고 반쯤 보이는 선을 원합니다.

4.png