PS를 이용해 사진을 자를 수 있는 프론트엔드 개발자가 되어보세요

사진 자르기 방법 분류

PhotoShop은 CS 버전에서 현재 CC 버전으로 발전했습니다. 사진 자르기 기능은 PhotoShop CS 버전의 사진 자르기 기능이라고 할 수 있습니다. PS는 PhotoShop CC 버전부터 정밀한 커팅을 제안했습니다. 소위 전통적인 절단은 절단 인력이 기본적으로 레이어를 나누고 도면을 스스로 절단하는 것을 의미합니다. 전통적인 절단은 수동 절단과 기준선 절단으로 구분됩니다. 이제 CC 버전은 절단 인력이 신뢰할 수 있습니다. 컴퓨터에서 레이어 개체를 정확하게 자르면 이런 방식으로 잘라낸 레이어가 기존 절단보다 확실히 더 정확해집니다. 반면 CC 버전은 스크립트를 통해 완전 자동 커팅이 가능해 커팅 담당자의 손이 완전히 자유로워진다.

일반적으로 절단 방법은 전통적인 절단(수동 절단, 기준선 절단)과 정밀 절단으로 구분됩니다.

잘라내기 도구

이전 기사에서는 도구 모음의 "잘라내기 도구"에 대해 설명했습니다. 실제로 자르기 도구는 총 4가지 도구를 제공합니다. "자르기 도구", "원근감 자르기 도구", "슬라이스 도구" 및 "슬라이스 선택 도구"입니다.

사진 속 '슬라이스 도구'와 '슬라이스 선택 도구'는 사진 자르기에 필요한 두 가지 도구입니다. "슬라이스 도구"는 둘 다 영역을 선택한다는 점에서 "선택 도구"와 다소 유사합니다. 차이점은 슬라이스 도구가 영역을 선택한 후 슬라이스로 표시된다는 점입니다. 예를 들어 아래 그림에서는 슬라이스 도구를 사용하여 작은 슬라이스를 잘라냈습니다. 왼쪽 상단의 03은 슬라이스 이름을 나타냅니다.

슬라이스 도구를 사용하여 12장 이상의 사진을 자르고 그 중 일부를 조정하거나 삭제해야 한다고 생각되면 "슬라이스" 도구를 사용할 수 있습니다. 이름에서 알 수 있듯이 선택 도구"입니다. 이전에 잘라낸 이미지를 선택하는 데 사용됩니다. 그런 다음 선택한 이미지를 마우스 오른쪽 버튼으로 클릭하면 "삭제" 작업이 포함된 메뉴가 나타납니다.

전통 커팅

전통적인 커팅 방법을 소개하든 정밀 커팅을 하든 다음 사진을 예로 들어보겠습니다. 그림 디자인은 상대적으로 단순하고 소개하기 쉽도록 내용이 적습니다.

수동 커팅

수동 커팅은 커터가 "슬라이싱 도구"를 완전히 수동으로 사용하여 그림을 하나씩 잘라야 합니다. 먼저 '슬라이스 도구'를 선택한 후, 슬라이스해야 하는 아이콘에 대해 '슬라이스 도구'를 이용해 아이콘이 포함된 영역을 선택합니다. 예를 들어 아래 그림의 ADDRESS 텍스트 위의 아이콘은 "Slice Tool"을 사용하여 선택되었습니다. 계속해서 다른 아이콘을 자르세요. 각 잘라낸 이미지의 왼쪽 상단에 숫자가 있는 것을 그림에서 볼 수 있습니다. 이 숫자는 잘라낼 때 잘라낼 이미지를 나타내는 숫자입니다.

위의 컷 사진도 몇 가지 의문점을 드러냅니다. 먼저 위 사진의 하단을 확대하여 좀 더 명확하게 보겠습니다. 사진의 오른쪽 하단에 영역이 있고, 해당 영역의 왼쪽 상단에도 숫자 30이 있습니다. 이 영역도 우리가 보는 가장 큰 숫자로, 실제로 가지고 있음을 보여줍니다. 총 30장의 사진을 잘라냅니다. 당연히 8장만 잘랐는데 왜 갑자기 30장으로 된 걸까요?

사진을 자르면 PS가 자동으로 잘라낸 사진을 추가하기 때문입니다. 컷아웃 07번을 예로 들어보겠습니다. 전화 아이콘을 수동으로 자르면 컷아웃 07번의 오른쪽(08)과 하단(10)에 컷아웃이 자동으로 생성됩니다. 컷 수가 늘어날수록 자동으로 생성되는 컷이 늘어나 총 30컷이 됩니다. 그리고 자동으로 생성된 컷아웃은 삭제할 수 없습니다.

가끔 컷팅한 사진이 너무 많아서 귀찮은데, 우리가 직접 컷팅한 사진만 전시해도 되나요? 대답은 '예'입니다. 먼저 도구를 "슬라이스 선택 도구"로 전환해 보겠습니다. 위의 메뉴 표시줄에 "자동 슬라이스 숨기기" 버튼이 있습니다.

"자동 슬라이싱 숨기기" 버튼을 누르면 컷 사진을 보니 8컷 밖에 없네요. 이 8컷 사진은 정말 저희가 잘라낸 사진입니다. 그러나 좀 더 주의깊은 학생들은 마지막 조각의 수가 29라는 것을 보았습니다. "자동 조각 숨기기"는 자동으로 생성된 조각을 삭제하는 것이 아니라 숨기기만 합니다.

이미지를 잘라낸 후 내보낼 수 있습니다. "파일"->"내보내기"->"웹용으로 저장"(이전 버전은 "파일"->"웹용으로 저장"으로 열림)을 열면 "웹용으로 저장" 창이 나타납니다. 여러 옵션을 설정해야 합니다. 오른쪽 상단의 드롭다운 목록에서 "PNG-24"를 선택하고 "투명도" 및 "인터레이스" 옵션을 확인하세요. 마지막으로 "저장..."을 클릭하고 저장할 경로를 선택합니다. 여기까지 수동절단 작업은 기본적으로 완료되었습니다.

참조선 자르기

참조선 자르기를 소개하기 전에 먼저 참조선이 무엇인지 알아야 합니다. 먼저 질문에 대해 논의해 보겠습니다. PS를 사용하여 웹 페이지를 설정하고, 웹 콘텐츠를 중앙에 표시하고, 왼쪽과 오른쪽에 너비가 200픽셀이 되어야 한다고 가정해 보겠습니다. 참고할 수 있도록 양쪽에 기준선이 있으면 참 편리하지 않을까요?

참조선을 추가하는 방법에는 두 가지가 있습니다.

첫 번째 방법: "보기" -> "새 참조선" 메뉴를 열면 "새 참조선"이 나타납니다. 참조에는 "방향"(수평 또는 수직), "위치"가 포함됩니다. 예를 들어 캔버스 너비가 1200인 경우 세로 방향으로 200픽셀과 1000픽셀에 두 개의 수직 안내선을 추가해야 합니다.

참조선을 사용하면 레이아웃이 비교적 간단합니다. 선택 도구를 사용하여 영역을 선택할 때 추가된 가이드를 참고할 수 있습니다. 아래 그림의 레이아웃은 참조선을 기준으로 완성되었습니다.

둘째: 첫 번째 방법으로 참조선을 추가하면 너무 비효율적입니다. 특히 곧 소개될 기준선 자르기 다이어그램은 첫 번째 방법으로 수십 개의 기준선을 추가하면 원숭이 해, 말의 달까지 기다려야 합니다. 참조선을 추가하는 두 번째 방법은 매우 간단합니다. 수직 눈금자 또는 수평 눈금자를 마우스 왼쪽 버튼으로 누른 상태에서 바깥쪽으로 드래그하면 새 참조선이 그려집니다.

참조선 자르기는 참조선을 추가하는 두 번째 방법입니다. 예를 들어 이제 디자인 도면의 ADDRESS, MAIL, PHONE 세 아이콘을 참조선을 사용하여 잘라내고 가로 눈금자와 세로 눈금자에서 참조선을 드래그하여 추가한 후 아래 그림과 같이 추가해야 합니다.

그런 다음 툴바에서 "슬라이스 도구"를 선택하세요. 이때 도구 메뉴 표시줄에 "가이드 기반 슬라이스" 버튼이 있습니다. 이 버튼을 클릭하세요. 설계 도면에는 여러 개의 슬라이스가 자동으로 생성되며, 슬라이싱 도구는 참조선을 기반으로 절단 도면을 자동으로 생성합니다. 이러한 컷아웃 생성 방법은 기존의 수동 컷아웃을 하나씩 생성하는 것보다 더 효율적입니다.

그리고 참조선 자르기의 한 가지 장점은 생성된 컷을 수동으로 삭제할 수 있다는 것입니다. 추가 컷이 필요하지 않다고 생각되면 "슬라이스 선택 도구"를 사용하여 컷을 마우스 오른쪽 버튼으로 클릭하고 선택할 수 있습니다. 삭제 작업을 수행합니다. 아래 사진은 기준선 컷을 활용한 최종 컷입니다. 컷은 3개뿐입니다.

다음 작업은 수동 이미지 자르기와 동일하게 아이콘을 내보내는데 여기서는 소개하지 않습니다.

정확한 이미지 커팅

정밀한 이미지 커팅은 CC 버전에 도입된 새로운 기능입니다. 정밀한 커팅으로 커터의 손이 자유로워지고 PS는 스크립트를 통해 각 레이어를 자동으로 커팅합니다. 이미지 커팅 담당자는 이미지 커팅 명령을 실행하기 위해 몇 가지 메뉴만 선택하면 되고, 남은 작업은 PS가 이미지 커팅을 실행할 때까지 기다리는 것입니다. 반면, 정밀 커팅은 "레이어 개체"를 기반으로 한 컴퓨터 커팅을 기반으로 하며, 모든 커팅 그래픽의 정확도는 수동 커팅보다 확실히 높습니다.

"파일"->"내보내기"->"레이어를 파일로 전송" 메뉴를 열면 내보내기 창이 나타납니다.

위 창에서는 여러 매개변수를 입력해야 합니다. "대상"은 내보낼 디렉터리를 나타내고, "파일 이름 접두사"는 내보낸 모든 이미지 파일 이름의 접두사이며, "표시 레이어만"은 표시 레이어만 내보내고, "파일 type"은 내보내기 파일입니다. 유형(예: png, jpg 등)입니다. 마지막으로 "실행" 버튼을 클릭하면 자동 이미지 자르기가 시작됩니다. 아래 그림은 PS "레이어"의 자동 절단 과정을 보여주는 스크린샷입니다. PS가 각 레이어를 자동으로 선택한 후 내보내기를 수행하는 것을 볼 수 있습니다.

PS는 자동 커팅 시 각 레이어를 내보내기 때문에 시간이 오래 걸릴 수 있으므로 인내심을 가지고 기다려주셔야 합니다. 자동 이미지 자르기가 완료되면 대상 디렉터리에서 내보낸 모든 이미지를 볼 수 있습니다.

확장 포인트 - 사진 자동 자르기

CC 버전의 또 다른 강력한 기능은 "사진 자동 자르기"입니다. 먼저 사진 자동 자르기가 무엇인지 설명하겠습니다. 정밀컷팅을 하면 PS컷팅 과정을 볼 수 있는데, 자동컷팅을 하면 컷팅과정을 전혀 볼 수 없습니다. 레이어를 디자인하면 컷팅이 완료됩니다.

자동 이미지 자르기 기능을 사용하기 전에 두 가지 작업을 수행해야 합니다.

첫 번째 작업은 "편집"->"기본 설정"->"플러그인" 메뉴를 선택합니다. , 다음 창이 나타납니다. "생성기 활성화"를 확인하십시오.

두 번째 작업, "파일"->"생성"->"이미지 리소스" 메뉴를 확인합니다.

이제 준비 작업이 완료되었으니 사진을 자동으로 자르는 방법을 살펴보겠습니다. 예를 들어 이제 배경색을 포함하지 않고 아래 레이어를 내보내야 합니다.

실제로 위 사진의 리소스는 모두 "Address"라는 레이어 그룹에 배치되어 있습니다. 이제 그룹 이름을 "Address.png"로 바꿉니다. 그런 다음 psd 파일 디렉터리로 이동하면 psd 파일 이름이 "Artica - One Page PSD Template"이고 동일한 디렉터리에 "Artica - One Page PSD Template-assets"라는 폴더가 생성되는 것을 볼 수 있습니다.

그런 다음 "Artica - One Page PSD Template-assets" 폴더를 열고 레이어 그룹의 이름인 Address.png라는 파일을 확인하면 그림의 배경이 투명해집니다. 이 기능 정말 강력하지 않나요?

자동 이미지 자르기는 SVG 생성을 위한 강력한 도구이기도 합니다. PS는 레이어를 png 파일로 생성할 수 있을 뿐만 아니라 svg 파일 생성도 지원합니다. 이제 아래 아이콘을 svg 형식으로 저장하고 싶습니다. 레이어 파일 이름을 "Icon.svg"로 변경하기만 하면 됩니다. "Artica - One Page PSD Template-assets" 폴더를 열면 Icon.svg 파일이 생성된 것을 확인할 수 있습니다.

텍스트 편집기로 Icon.svg 파일을 열어 어떤 콘텐츠가 생성되는지 확인하세요. 파일에는 너비, 높이 및 CSS 스타일이 포함되어 있으며 이는 비교적 일반적인 svg 파일입니다. CSS 스타일을 수정하여 그림의 색상을 변경할 수 있습니다. 예를 들어 이제 "fill:#fff"를 "fill:#FF3300"으로 변경한 다음 파일을 저장합니다. 브라우저로 열어보면 사진의 색상이 빨간색으로 변하는 것을 볼 수 있습니다.

요약: 레이어를 디자인할 때 *. 파일 형식에 따라 레이어 이름을 지정하면 레이어 디자인과 동시에 커팅 작업이 완료됩니다.

PS에서 사진을 자를 수 있는 프론트엔드 개발 관련 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!