포토샵 - 이미지 하나를 여러개로 잘라서 저장하기

안녕하세요 지지나입니다! 

주말마다 html/css 수업을 듣는데, 웹퍼블리셔 과정이다 보니 포토샵능력을 요구할 때가 간혹 있네요ㅎㅎ

저는 개발을 배우고 싶다는 첫 방향으로 정한 길인데, 점점 더 디자인 쪽으로 가는것 같은 기분입니다ㅋㅋ그래도 html/css는 프론트엔드 개발자가 되려면 꼭 알아야 한다고 생각해 열심히 듣고 있습니다.

 

아무튼 수업시간에 프로그래밍을 위해 필요한 이미지를 만들었는데요, 포토샵을 이용해 하나의 이미지를 여러 개로 분할한 후, 자른 이미지들을 한번에 저장하는 것을 배웠어요. 

왠지 저도 알면 다음에 유용하게 쓸 수 있을것 같아서 기록용으로 남깁니다. 

 

포토샵을 실행 후, 내가 분할하고 싶은 이미지를 열어주세요. 

 

포토샵 화면의 왼쪽, 윗쪽 눈금표시는 단축키 Ctrl+R 을 이용하면 가져올 수 있답니다. 눈금에서 마우스 오른쪽을 클릭한 후, Pixels 를 항상 설정값으로 해주세요. 컴퓨터에서 이미지 높이, 크기 단위는 픽셀을 사용하니까요. 

 

 

눈금에 마우스를 가져다 댄 후, 눈금을 살짝 끌어내린다는 느낌으로 마우스를 아래로 드래그하면 하늘색 얇은 줄이 생기는데요, 요걸로 내가 자를 부분에 영역을 그어주세요. 

저는 네이버 메인화면에서 언론사들 로고가 필요해서 아래처럼 분할 영역을 만들었어요. 

 

 

이미지 분할영역을 만들었으면 이제 내가 원하는 이미지들을 잘라야겠지요? 오른쪽 아이콘중에 칼 모양 아이콘을 선택 후, Slice Tool 을 선택하세요.

그런 다음, 이미지를 하나하나 모양에 맞게 자르면 됩니다. 분할영역이 나누어져 있으니 쉽게 따올 수 있어요. 

slice tool로 선택한 이미지는 왼쪽 상단에 번호가 매겨진 것 보이지요? 분할된 영역에서 골라가는 이미지의 순서입니다.  

 

제가 뽑을 24개의 이미지들을 모두 자른 모습이에요. 

 

 

그런데 여기서 이대로 저장하면 나중에 파일명을 변경하고 싶을때 번거로울 수가 있어요. 이왕 저장할 꺼, 처음부터 내가 원하는 파일명으로 저장하면 편하잖아요? 

아까 선택한 칼 모양 아이콘에서 이번엔 Slice Select Tool 을 선택해주세요. 

 

그런 다음, 내가 자른 이미지위에 더블클릭을 하면 Slice Options가 나올 거에요. 

 

 

여기서 바로 파일명을 변경 해주면 요대로 저장이 된답니다. 내가 원하는 파일명을 쓰고 OK 클릭! 

 

이젠 자른 이미지 저장할 일만 남았어요. File - Export - Save for Web (Legacy) 클릭, 웹용으로 저장하기를 쓸 거에요. 

단축키는 Alt+Shift+Ctrl+S 입니다. 

 

 

이미지를왼쪽 상단에 Original로 선택하구요, 전체 화면에서 아까 내가 자른 이미지들만 선택해주세요. 여러 장 선택하는 것이니 꼭 Shift 키를 누른 채 클릭해야 합니당! 

 

 

화면이 작아서 이미지가 다 담기지 않을 거에요. Space 키를 누른 채 마우스로 왼쪽/오른쪽 드래그하면 화면 안에서 이미지를 왔다갔다 할 수 있답니다. 

 

 

이제 저장을 해줄 건데요, 파일명을 원하는대로 정하고 맨 마지막 Slices에서 꼭! Selected Slices 를 클릭해야 돼요. 

내가 분할한 후 선택한 이미지만 저장하고 싶으니까요!

 

 

바탕화면에 저절로 images 폴더가 생성 되고, 폴더 안에 내가 정한 파일명에 맞게 저장되었어요. 

 

내가 분할한 이미지는 언론사 로고였고, 그거에 맞게 자른 이미지가 한번에 저장된 것 보이지요? 

 

포토샵을 이용해 이미지 하나를 여러개로 분할할 후 저장하는 방법을 보았는데요, 확실히 편리하네요. 

html/css 수업을 듣고 포토샵도 한번 배워 봐?ㅋㅋㅋ 왠지 욕심나는 1인^^