웹 디자인에서는 세부 사항 처리가 매우 중요합니다. 저는 개인적으로 Gringo의 웹사이트를 자주 관찰하며 훌륭한 웹사이트 디자인은 세부 사항 처리에 있어서 매우 사려 깊다는 것을 알게 되었습니다. 오늘 제가 여러분과 공유하는 팁은 매우 간단하지만 전체 웹사이트의 세부 사항을 크게 향상시킬 수 있습니다. 따라서 이러한 팁은 귀하의 웹사이트 디자인 수준을 향상시키는 데에도 도움이 된다고 생각합니다.
그리고 이러한 기술은 모두 "픽셀화"라는 한 단어를 중심으로 이루어지며 이는 단순히 1px와 2px의 작은 선을 의미합니다. 좋아, 간다.
1. 픽셀 구분선 첫 번째 소개는 아래 그림의 탐색 표시줄을 살펴보세요.
그림의 빨간색 원 안의 선과 버튼 사이의 구분선을 주의 깊게 살펴보세요. 이 선은 움푹 들어가 있어 좋은 구분선 느낌을 줍니다. 다음에는 이 사진을 확대해서 원리를 살펴보겠습니다.
이 구분선은 두 개의 인접한 1px 직선으로 구성되어 있으며, 한 색상은 배경색보다 더 어둡고 다른 색상은 더 밝다는 것을 알 수 있습니다. 다음으로 방법을 살펴보세요.
연필 도구를 선택하고(실수로 브러시를 선택하지 마십시오) 크기를 1px로 설정합니다.
사진 속 진한 파란색 등 배경색보다 어두운 색상을 선택하고 Shift 키를 누른 채 직선을 그립니다.
더 밝은 색상을 선택하고 또 다른 직선을 그립니다. 좋아요
PS. 선을 그리는 과정에서 캔버스(Z)를 확대하여 관찰할 수 있습니다.
단일 색상 구분선보다 효과가 훨씬 낫죠? 이 구분선 기술을 사용하는 몇 가지 예를 더 살펴보겠습니다.
2. 픽셀 가장자리
먼저 "픽셀 가장자리"가 없는 원본 이미지를 살펴보겠습니다.
다음으로 추가된 내용은 다음과 같습니다.
