Photoshop에서 BG가 타일을 올바르게 반복하는지 테스트합니까?

9

웹에서 사용할 Photoshop에서 배경 질감을 만들기 위해 자주 노력하고 있습니다. 불행히도 나는 보통 다른 웹 사이트의 공짜를 추측하거나 사용해야합니다.

Photoshop에서 직접 텍스처를 만들고 이미지 를 내보내기 전에 타일이 제대로 타일링되어 있는지 확인하고 싶습니다 . 이것을 빨리 할 수있는 방법이 있습니까? 오프셋을 사용하는 방법을 기억하지만 도구에 익숙하지 않습니다.

아래는 몇 가지 배경 타일 예제이므로 내가 말하는 것을 볼 수 있습니다.

tile1

tile2

adobe-photoshop  website-design  background  tiles 
— 데스티니 아일랜드
소스

답변:

17
  • 이미지를 만드십시오. 예를 들어 200px 정사각형이라고 가정 해 봅시다.
  • 필터> 기타> 오프셋으로 이동하여 이미지 크기의 절반 인 x 및 y 숫자를 입력하십시오 (이 경우 100px).
  • 이렇게하면 이미지가 많은 픽셀 위로 이동하고 캔버스에서 이동 된 픽셀이 다른쪽에 놓입니다. 이제 패턴 중간에 패턴이 완전히 반복되지 않는 이음새가 이미지 가운데로 내려가는 것을 볼 수 있습니다.
  • 이 솔기를 손질하여 원하는 도구를 사용하여 부드럽게 혼합하십시오 (복제 도구는 일반적인 옵션입니다).
  • 새 이미지를 저장하십시오.

더 복잡한 이미지의 경우, 캔버스 가장자리 근처에서 처음 놓친 가장자리를 만지기 위해 픽셀 크기의 1/4과 같은 최종 오프셋을 수행해야 할 수도 있습니다.

— DA01
소스
이것이 완벽합니다 감사합니다! 내가 찾던 것
— 데스티니 아일랜드
5

DA01은 그것을 만드는 방법에 대한 답변이지만 귀하의 질문은 그것을 테스트하는 방법입니다. 그 질문에 대한 답은 다음과 같습니다.

  1. 패턴 레이어를 선택하십시오
  2. 편집> 패턴 정의
  3. 새 레이어 만들기
  4. 모두 선택
  5. 편집> 채우기> 패턴> 패턴 선택
  6. 괜찮아 보이는지 확인 해봐
— 라이언
소스
2
우와 나는 질문을 완전히 잘못 읽었다! 좋은 팁. 또 다른 옵션은 단순히 반복되는 배경으로 테스트 HTML 파일을 만드는 것입니다. 그런 다음 파일을 다시 저장하고 브라우저를 다시로드하십시오.
— DA01
1
예, HTML / CSS에서이 작업을 수행하는 방법을 알고 있었지만 Photoshop에서도 테스트 할 수 있다는 것을 알지 못했습니다. 충고 감사합니다!
— 데스티니 아일랜드
2

전통적으로 이미지를 jpg 또는 png로 저장 한 다음 기본 HTML을 사용하여 타일링을 테스트합니다.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

브라우저에서 해당 파일을 열고 타일링을보고 "image.jpg"를 다시 저장 한 후 웹 페이지를 새로 고쳐서 개정을 확인할 수 있습니다.

— 스캇
소스
1

이 작업을 수행하는 또 다른 방법이 있지만 한계는 다른 모든 패턴의 크기가 이유와 동일해야한다는 것입니다.

단계 :

  • 200 x 200 픽셀의 상자를 만드십시오.
  • 스마트 오브젝트로 변환하십시오.
  • 수평으로 3 개의 상자가 있도록 복제하고 정렬하십시오. 사이에 겹치거나 공백이 없는지 확인하십시오.
  • 선택한 세 개의 상자를 3 개의 세로 열로 복제하십시오.
  • 아직 활성화되지 않은 경우 기본 설정에서 플로팅 창을 활성화하십시오.
  • 스마트 객체를 두 번 클릭하고 엽니 다.
  • 두 파일을 모두 볼 수 있도록 두 창을 정렬하십시오.
  • 스마트 패턴을 원하는 패턴으로 채우고 다른 창에서 동시에 작동하는 것을보십시오.
— 무하마드 우 메르
소스
1

AMP Tile Viewer 라는 훌륭한 (개인용 프리웨어) 도구 가있어 이미지를 타일링 할 수 있는지 여부와 타일 모양을 신속하게 확인할 수 있습니다. 나는 항상 그것을 사용하고 그것은 잘 작동합니다. Photoshop에서 패턴을 만들 필요가 없으므로 나중에 사용하거나 삭제하지 않아도됩니다.

— 타란 큐
소스
0

내가하는 방법은 타일을 jpg로 저장하고 바탕 화면에 타일로 설정하는 것입니다. 매우 빠르고 쉽습니다.

— 처녀
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.