슬라이싱을 줄이려면 PSD를 슬라이싱하기위한 팁과 요령
더러운 작은 비밀이 있습니다. Photoshop 파일을 자르는 것이 싫습니다. 그렇기 때문에 PSD 구성 요소를 웹 사이트로 변환하는 것을 싫어한다는 것은 Photoshop의 슬라이싱 도구를 싫어한다는 의미입니다. 전체 프로세스를 통해 PSD가 바쁘고 복잡하며 지나치게 복잡해 보이기 때문에 대개는 건너 뛰지 않고 필요에 따라 이미지를 개별적으로 자르고 저장하도록 선택합니다.
이러한 경향에 맞서 싸우고 Photoshop 슬라이싱 도구의 진정한 유용성을 확인하기 위해 슬라이싱 작동 방식의 모든 복잡성을 배우는 사명을 시작했습니다. 아래는이 여정에서 얻은 몇 가지 팁과 요령입니다. 잘만되면, 당신은 당신이 모르는 것을 배우게 될 것입니다!
Photoshop에는 세 가지 유형의 슬라이스가 있습니다
세 가지 유형의 슬라이스!? 이것은 내가 배운 가장 흥미롭고 놀라운 것 중 하나였습니다. 슬라이싱 기능을 너무 많이 실험하지는 않았지만 방금 한 가지 방법이 있다고 생각했습니다. 내가 틀렸어.
세 가지 종류의 슬라이스는 사용자 슬라이스, 자동 슬라이스 및 레이어 기반 슬라이스입니다. 먼저 사용자 슬라이스와 자동 슬라이스에 대해 잘 알고 있습니다. 이것들은 매우 밀접하게 관련되어 있으며, 실제로 하나는 다른 하나를 만듭니다.
아시다시피, PSD를 슬라이스하려면 슬라이스 도구 (C)를 잡고 독립형 이미지로 내보낼 영역 주위에 상자를 그려 시작합니다. 이 작업을 수행하려는 모든 영역에 슬라이스를 추가하면 여러 이미지를 한 번에 빠르고 쉽게 최적화하고 내보낼 수 있습니다.
슬라이스를 수행하면 아래와 같은 결과가 나타납니다.
내가 한 것은 페이지 상단의 로고 주위에 상자를 그리는 것입니다. 이 작업으로 사용자 슬라이스와 여러 자동 슬라이스가 모두 생성되었습니다. 슬라이스를 만들 때 Photoshop에서는 최종 목표가 전체 PSD를 일련의 슬라이스로 전환하는 것으로 가정합니다. 나는 개인적으로이 가정이 상당히 성가신 것이라고 생각하며, 나중에 그 문제를 해결하는 방법을 논의 할 것입니다. 현재로서는이 가정으로 인해 Photoshop이 슬라이스 가장자리를 PSD 전체에 걸쳐 확장하여 다른 여러 섹션을 자동으로 생성한다는 사실 만 알고 계십시오. 위 이미지에 나와 있습니다.
사용자 및 자동 슬라이스 작업을위한 요령
우리는 사용자 및 자동 슬라이스에 관한 주제를 다루고 있지만 명백하고 명백하지 않은 기능 중 일부를 살펴보면 어떤 도구와 옵션을 마음대로 사용할 수 있습니다.
슬라이스 이동 및 편집
슬라이스를 만든 후에는 이동 및 편집 할 수있는 자유 변형의 컨트롤과 유사한 컨트롤이 표시됩니다. 슬라이스 선택 도구를 사용하여 현재 슬라이스 만 편집하고 새 슬라이스는 생성하지 않도록 할 수 있습니다. 이 도구는 플라이 아웃 메뉴의 슬라이스 도구 아래에 있습니다.
자동 슬라이스를 사용자 슬라이스로 변환
전체 슬라이싱 프로세스 전체에서 자동 슬라이스는 지속적으로 생성 및 업데이트되며 사용자 슬라이스와는 별도로 유지됩니다. 나중에 파일로 내보내거나 내보내는 경우 무시하는 방법에 대해 살펴 보겠습니다. 이제는 자동 슬라이스를 사용자 슬라이스로 바꾸는 방법을 살펴 보겠습니다.
과정은 매우 간단합니다. 먼저 슬라이스 선택 도구를 사용하여 자동 슬라이스를 선택해야합니다. 그런 다음 변환하려는 자동 슬라이스를 선택하고 상단 근처에있는 "프로모션"버튼을 누르십시오.
그게 다야! 이제 자동 슬라이스의 색상이 변경되어 사용자 슬라이스임을 나타냅니다. 이제 크기와 내보내기 방법을보다 강력하게 제어 할 수 있습니다.
자동 분할 슬라이스
가로, 세로 또는 그리드로 분산 된 일련의 개체가있는 경우 각 개별 장치를 둘러보고 슬라이스하는 데 시간을 들일 필요가 없습니다. 대신, 모든 객체를 덮는 하나의 슬라이스를 만들고 나머지는 Photoshop에 지시 할 수 있습니다.
이렇게하려면 먼저 모든 개체 주위에 상자를 그려 큰 조각을 만드십시오. 그런 다음 슬라이스 선택 도구를 활성화 한 상태에서 페이지 상단의 "분할"버튼을 클릭하십시오.
위에 표시된“Divide Slice”대화 상자가 나타납니다. 이 창을 사용하면 추가 세로 및 가로 슬라이스를 빠르게 삽입 할 수 있습니다. 그것들이 올바르게 정렬되지 않으면 "OK 버튼"을 누른 후 수동으로 조정할 수 있습니다.
가이드에서 조각
많은 사람들이 Photoshop 내부의 슬라이스보다 안내선으로 작업하는 것이 훨씬 편할 것입니다. 실제로는 둘 다 매우 유사하지만 가이드 시스템이 약간 더 부드럽게 느껴집니다.
이것이 롤 방식 인 경우 슬라이스를 만들기위한 쉬운 워크 플로에 완벽하게 맞습니다. 안내선을 드래그하여 PSD를 슬라이스하고 슬라이싱 도구를 모두 무시하십시오. 그런 다음 모든 작업이 끝나면 슬라이스 도구를 선택하고 상단의 "가이드에서 슬라이스"버튼을 누르십시오.
명명 슬라이스
슬라이스로 처음 작업 할 때 당신을 괴롭히는 성가신 것 중 하나는 내보낼 때 결과 파일이 전혀 의미가없는 큰 추악한 이름으로 나타납니다. 이 문제를 해결하려면 각 슬라이스에 적절히 이름을 지정해야합니다. 할당 한 이름은 내보내기시 파일 이름으로 이월됩니다.
슬라이스 이름을 지정하려면 슬라이스 도구를 선택한 상태에서 해당 내용을 두 번 클릭하십시오. 아래 대화 상자가 나타납니다.
여기에는 슬라이스 색상 설정, 수동으로 치수 입력 및 이름 지정을 포함하여 몇 가지 옵션이 있습니다. URL, Target 등과 같은 HTML이 많이 있습니다. Photoshop에서 슬라이스 PSD를 가져와 웹 페이지로 출력 할 수 있습니다. 일부 설정은 기본 설정이 테이블 기반 레이아웃을 생성하기 때문에이 기능을 강타하지만 CSS를 사용하도록 전환 할 수 있습니다.
이제 너무 흥분하지 마십시오. CSS 옵션을 선택하더라도 Photoshop은 여전히 웹 사이트를 구축 할 때 매우 썩습니다. 직접 작성하거나 최소한 Dreamweaver로 가져가는 것이 훨씬 좋습니다. 따라서 다른 모든 옵션을 완전히 무시해야합니다.
레이어 기반 슬라이스와 더 나은 이유
슬라이싱이 저를 덜 빨게 만든 주요 기능 중 하나는 레이어 기반 슬라이스입니다. 이들은 여러 가지면에서 우월한 특정 사용자 슬라이스 브랜드입니다.
이름에서 알 수 있듯이 이러한 슬라이스는 수동으로 그리는 상자를 기반으로하지 않고 대신 레이어의 경계를 자동으로 준수합니다. 레이어 기반 슬라이스를 만들려면 레이어 팔레트에서 레이어를 선택한 다음 메뉴로 이동하여 레이어> 새 레이어 기반 슬라이스를 선택하십시오. 여러 레이어를 선택한 경우에도 작동하며 각 레이어는 단순히 자체 슬라이스로 바뀝니다!
분명히 이것이 제대로 작동하려면 레이어를 어떻게 구성해야하는지 잘 알아야합니다. 어쨌든 모형을 완전히 계층화되고 구성된 파일로 작성해야하므로 문제가되지 않습니다.
장점
정상적인 슬라이스가 너무 불분명 한 주된 이유 중 하나는 돌아가서 디자인을 조정하려는 경우 추가 작업을 많이 생성하기 때문입니다. 아트웍을 뒤섞은 후에는 돌아가서 모든 조각을 이동하여 새 레이아웃에 맞 춥니 다. 이 성가심은 자르기를 통해 항상 개별 조각을 수동으로 저장하는 이유입니다.
그러나 레이어 기반 슬라이스는 실제로 매우 지능적입니다. 레이어 주위를 움직이면 슬라이스가 자동으로 따라옵니다. 외부 광선과 같이 경계를 변경하는 효과를 추가하면 슬라이스가 확장되어 효과가 포함됩니다. 레이어를 원래 크기의 30 %로 변환하면 슬라이스가 다시 자동으로 업데이트됩니다!
분명히 레이어 기반 슬라이스를 사용할 때마다 피할 수없는 재 설계 단계에서 엄청난 시간을 절약 할 수 있다는 분명한 논거가 있습니다.
혼란을 죽이고
슬라이싱에 대한 또 다른 가장 큰 고민 중 하나는 정말 혼란스러운 PSD를 만들 수 있다는 것입니다. 이것은 대부분 Auto Slicing 부작용입니다.
예를 들어 아래 이미지를 살펴보십시오 (여기서는 약간 단순화되었지만 요점을 알 수 있습니다). 여기서는 세 개의 슬라이스 만 만들고 싶었지만 Photoshop은 자동으로 열두 슬라이스 로 전환했습니다!
나는 당신에 대해 모르지만, 하나의 큰 이미지 모음이 모두 모여서 웹 페이지를 만들지는 않습니다. 그래서 나는 단순히 이러한 여분의 조각을 원하지 않습니다! 이 영역을 이미지로 내 보내지 않을 것이므로 인터페이스에 노이즈를 추가하기 만하면됩니다. 이와 같은 문서를 볼 때 슬라이스는 나에게 의미있는 도구가 아닙니다.
이 문제를 해결하기 위해 슬라이스 선택 도구를 잡고 화면 상단의 "자동 슬라이스 숨기기"버튼을 누릅니다. 이것은 그 이름이 의미하는 바를 정확하게 보여줍니다.
문서가 얼마나 단순 해 졌는지보세요! 우리가 사용한 몇 조각은 명확하게 식별 할 수 있으므로 유용성을 유지합니다. 제 생각에는 슬라이스를 보는이 방법이 매우 좋습니다. 이것은 Photoshop이 단순히 내가 선호하는 작업 과정을 예측하기 위해 너무 열심히 노력하고 기능을 과도하게 사용하는 경우 중 하나입니다.
슬라이스 내보내기
이것은 슬라이싱의 유용성이 실제로 작용하는 곳입니다. 슬라이스하지 않으면 한 번에 하나씩 comp의 각 부분을 저장해야합니다. 워크 플로는 다음과 같습니다. 선택, 자르기, 웹용 저장에서 최적화, 자르기, 자르기 실행 취소 및 반복. 그것은 많은 불필요한 단계입니다! 슬라이싱에서 어떻게 작동하는지 봅시다.
마지막으로 슬라이싱의 모든 내용을 파악하고 PSD를 준비한 후 파일 메뉴로 이동하여 "웹 및 장치에 저장"을 선택해야합니다. 이 대화 상자에 이미 익숙 할 것 같지만 문서에 조각이 있으면 조금 다릅니다.
슬라이스가 있으면이 창에서 문서의 미리보기에 모든 슬라이스가 표시됩니다 (불행히도 여기에는 성가신 자동 슬라이스가 포함됩니다). 여기에서 간단히 클릭하여 각 슬라이스를 선택하고 각각에 대한 설정을 최적화 할 수 있습니다. 여기에는 파일 형식, 품질 등이 포함됩니다. 따라서 한 세션에서 3 개의 JPG 및 PNG 내보내기를 각각 적절한 품질로 내보낼 수 있습니다.
원하는대로 모든 것을 조정했으면 "저장"버튼을 누르십시오. 모든 이미지를 저장할 폴더를 선택할 수있는 대화 상자가 나타납니다. 이미 명명 규칙을 설정 했으므로 그대로 두십시오. 여기서 핵심은 "모든 사용자 슬라이스"또는 "선택한 슬라이스"만 내보내는 것입니다.
원하는 워크 플로에 따라 이러한 옵션 중 하나가 효과적입니다. 기본 옵션은 단순히 "모든 슬라이스"이며, 여기에는 사용자 및 레이어 기반 슬라이스뿐만 아니라 어쨌든 버려야 할 완전히 쓸모없는 자동 슬라이스도 포함됩니다. 실제 저장이 이루어지기 전에 문제를 해결하고 여기에서 버리지 마십시오.
결론
우리는 오늘 꽤 많은 기술적 인 Photoshop 자료를 살펴 보았으므로 잘 정리하려고 노력할 것입니다. 첫째, PSD를 슬라이싱하면 실제로 무엇을하고 있는지 알지 못하면 정말 복잡한 프로세스처럼 느껴질 수 있습니다. Photoshop에서 실제로 둘러보고 위의 팁을 실험하여 사용 가능한 도구를 최대한 활용하십시오.
둘째, 세 가지 유형의 슬라이스 인 자동 슬라이스, 사용자 슬라이스 및 레이어 기반 슬라이스가 있습니다. 자동 슬라이스는 절름발이이며 유용한 기능보다 슬라이싱에 대한 불행한 부작용입니다. 당신은 이것에 대해 저에게 동의 할 필요는 없지만, 그렇게한다면 그것들을 숨겨서 산만 해지지 않도록하십시오. 사용자 슬라이스는 단순히 의도적으로 만든 것입니다. 슬라이스 선택 도구를 사용하여 조정하고 내용을 두 번 클릭하여 이름을 지정할 수 있습니다. 레이어 기반 슬라이스는 사용자 슬라이스와 비슷하지만 주어진 레이어의 경계를 자동으로 준수하기 때문에 훨씬 더 똑똑합니다. 레이어로 이동, 크기 조정 및 효과를 추가 할 수 있으며 슬라이스는 계속해서 자체적으로 업데이트됩니다.
마지막으로 슬라이스가있는 문서를 내보낼 때 웹에 저장 명령을 선택하고 각 슬라이스를 자체 파일로 최적화하십시오. 또한 사용자 슬라이스 또는 선택한 슬라이스 만 내 보내야합니다. 그렇지 않으면 Photoshop에서 만든 모든 자동 슬라이스가 이미지 폴더를 채 웁니다.
이것은 아마도 Photoshop에서 슬라이싱에 대해 알고 싶었던 것보다 많을 수도 있지만, 이것이 시스템의 비 효율성을 발견하여 어색함에 방해받지 않고이 유용한 도구 세트를 조정하고 여전히 활용할 수 있기를 바랍니다.
아래에 의견을 남기고 PSD를 슬라이스하는 방법을 알려주십시오. 여기에 설정 한 워크 플로는 가능한 많은 솔루션 중 하나 일뿐 아니라 귀하의 의견을 듣고 배우고 싶어합니다!
