Photoshop에서 CSS 스프라이트 만들기


14

웹 디자인의 PSD가 있습니다.
디자인을 조정할 때마다 다른 레이어 가시성 (투명도)을 사용하여 이미지의 다른 부분을 CSS 스프라이트에 수동으로 복사해야합니다.

얼마나 자동화 할 수 있습니까?


질문을 일반적인 것으로 유지하고 싶지만 예제가 도움이 될 것입니다. 레이어 가시성이 이미 설정되어 있거나 내보내기 전에 개별적으로 변경해야합니까?
Pekka

@Pekka : 다른 부분은 다른 가시성을 필요로합니다. 예를 들어 사이트 배경은 표시되지만 내보내는 배경은 전역 배경으로 보이지 않습니다. (투명한 그림자를 위해)
SLaks

내가 참조. 따라서 이것은 반드시 일괄 처리를 요구합니다. 무슨 일이 일어나는지보고 싶다! ...
Pekka

답변:


9

나는 자동 포토샵 스크립트를 한 번 사용했고 잘 작동했습니다.

개념은 다음과 같습니다

  • 각 부분은 다른 이미지입니다.
  • 각 부분 (및 각 이미지)은 다른 이미지가없는 동일한 폴더에 있어야합니다.
  • 폴더 및 일부 매개 변수 (크기, CSS 이름 등)를 나타내는 스크립트를 실행하십시오.
  • 스크립트는 다음을 수행합니다.

    1. 표시된 크기의 모든 이미지를 하나로 병합하십시오.
    2. CSS 파일 생성

귀하의 경우 하나의 이미지를 수정하면 스크립트를 통해 전역 이미지와 CSS를 다시 생성하게됩니다. 생성 된 CSS를 사용하지 않으려면 CSS를 복사 / 붙여 넣기해야 할 수도 있습니다.

노트 :

나는 몇 개의 파일로 그것을 시도하고 훌륭하게 일했다. 그런 다음 ~ 600 장의 사진을 시도한 다음 goooood CPU와 인내심이 필요합니다.)이 경우 사용하지 마십시오.


1

슬라이스를 사용하지 않고 beguins가 모든 슬라이스를 하나씩 선택하여 선택하고 (슬라이스에 맞추기 및 문서 경계와 함께) 선택적으로 자르고 매번 선택하여 자르고 png로 저장하면 자르지 않을 때까지 Ctrl 키를 누릅니다. 모든 섹터가 완료 될 때까지 각 섹터를 선택하고 자르기 등을 수행 한 다음 동작을 중지합니다. 중간에 항상 같은 파일처럼 어떤 레이어도 숨기거나 표시 할 수 있으므로 충돌해서는 안됩니다 ... 그래서 매번 변경된 psd에 액션을로드합니다. 내가 생각할 수있는 유일한 것은 실제로 조각 테두리를 변경해야한다는 것입니다. 아니면 ... 나는 당신을 제대로 이해하지 못했습니다 ...

편집 : 슬라이싱이 필요하지 않은 경우 모든 조정이 완료 된 후 레이어를 숨기거나 표시하는 순서 만 포함하는 매크로 (액션). 내가 말했듯이, 나는 이해하지 못할 수도 있습니다 ...


첫 번째 단락이 다소 혼란 스럽지만 그럼에도 불구하고 자동화하는 것보다 워크 플로에 추가하는 것 같습니다. I의 는 레이어 액션을 보여주는 / 은신처로에 향하고있어 어디 그것으로 조각을 사용하는 거라고하지만, 참조하십시오.
Jari Keinänen

감사합니다! 그래도 누구의 다운 투표를 이해하려고 노력하고 있습니다 ...
S.gfx
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.