HTML5 및 CSS3 사이트의 바둑판 식 배경 제작 방법 - 더미

종종 HTML5 및 CSS3 웹 사이트의 전체 페이지를 배경 이미지로 덮기를 원합니다. 페이지 크기가 사용자의 브라우저에 얼마나 커지는지 알 수 없기 때문에 이것은 더 어려울 수 있습니다.

더 큰 이미지는 거대한 공간을 차지할 수 있고 사용자의 경험을 느리게 할 수 있습니다. 일반적인 해결책은 백그라운드에서 반복되도록 설계된 바둑판 식 이미지를 사용하는 것입니다. 김프는 타일 이미지를 만드는 데 매우 유용한 도구를 가지고 있습니다.

기와 배경의 목표는 상대적으로 작은 그래픽을 전체 페이지에 채우고 더 큰 이미지처럼 보이게 만드는 것입니다. 비밀은 이미지를 만드는 것이므로 이미지가 반복되는 곳을보기가 어렵습니다. 김프에서 바둑판 식 배경을 만드는 한 가지 방법이 있습니다. 물론이 기술을 자신의 목적에 맞게 조정할 수 있습니다.

새 이미지를 만듭니다.

1. 이미지 크기가 중요합니다. 작은 이미지는 다운로드하는 것이 훨씬 효율적이지만 패턴이 훨씬 더 분명합니다. 256 x 256 픽셀로 시작하십시오.

   임의 패턴 생성.

2. 필터 필터 기술을 사용하거나 필터 → 렌더링 → 구름 → 차이점을 선택하여 유사한 기술을 시도 할 수 있습니다. Difference Clouds 필터는 회색 음영 이미지를 만들지 만 여러 가지 흥미로운 옵션이 있습니다. Tileable 옵션은 타일링 할 준비가 된 패턴을 만듭니다. 재미있는 것을 얻을 때까지이 옵션으로 재생하십시오.

   명암을 조정하십시오.

3. 최상의 효과를 얻으려면 밝음에서 어두운 값까지 상대적으로 균일하게 분포시켜야합니다. 가장 쉬운 방법은 자동 표준화 도구 (색상 → 자동 → 표준화)를 사용하는 것입니다.

   그라데이션을 선택합니다.

4. 그라데이션 매핑

   이라는 기법을 사용하여 패턴에 색상을 추가합니다. 그라디언트 대화 상자 (Windows → Dockable Dialogs → Gradients)를 사용하여 그라데이션을 선택하십시오. 이미지의 어두운 색은 그라디언트 왼쪽의 색에 매핑되고 밝은 색은 왼쪽에 매핑됩니다. 색상을 조정할 수 있으므로 원하는 색상이 아닌 경우 걱정하지 마십시오. 그라데이션 맵 도구 (색상 ➪ 맵 ➪ 그라데이션 맵)를 사용하여 그라데이션의 색상을 클라우드 패턴에 매핑합니다. 타일을 확인하기 위해 이미지를 오프셋합니다.

5. 이미지 타일이 올바른지 확인하는 가장 쉬운 방법은 이미지를 오프셋하는 것입니다.이렇게하면 중앙에 모서리가 배치되어 여러 복사본이 서로 옆에있을 때 이미지가 어떻게 표시되는지 확인할 수 있습니다. Layer → Transform → Offset을 선택하여 Offset 대화 상자를 엽니 다. 오프셋 (Offset) 대화 상자에는 편리한 x / 2, y / 2 버튼이 있습니다. 버튼을 클릭하면 이미지 모양을 볼 수 있습니다.

6. 필요한 경우 이미지를 청소하십시오.

   클라우드 이미지를 만들 때 Tileable 옵션을 선택하면 새 이미지가 잘 보입니다. 그렇지 않은 경우 눈에 띄는 이음새가있을 수 있습니다. 필요한 경우 얼룩 및 복제 도구를 사용하여 이음선을 제거하십시오. 두 번째로 오프셋 도구를 적용하여 솔기가 잘 보이는지 확인합니다.

7. 필터를 적용하여 원하는 효과를 얻으십시오.

   이미지를 컬러링하거나 약간 흐리게하여 정리의 아티팩트를 덮을 수 있습니다. 읽을 수있는 텍스트를 원한다면 배경 이미지가 매우 어둡거나 매우 밝게 표시되어야합니다.

8. 이미지를 XCF 형식 및 웹용 형식 (예: PNG)으로 저장하고 이미지를 배경으로 사용하여 간단한 페이지를 작성한 다음 브라우저에 페이지를로드하여 원하는 방식으로 타일을 적용하여 이미지를 테스트합니다..