포토샵 슬라이스 툴을 이용해 이미지를 잘라서 저장하는 방법

포토샵 슬라이스 툴을 이용해 이미지를 잘라서 저장하는 방법

How to use Photoshop Slice Tool

안녕하세요. 오늘은 웹디자인 작업을 하실 때 슬라이스 툴을 이용해 이미지를 잘라서 저장하는 방법과 아울러 html 파일도 같이 저장할 수 있는 방법에 대해 알아보겠습니다. 

인터넷으로 볼 때 기다랗고 용량이 큰 이미지는 로딩시간이 길어서 화면에 늦게 보이게 됩니다. 성질 급한 사람들은 이미지가 뜨기도 전에 뒤로가기를 눌러 버릴수도 있죠. 그래서 길이가 길고 용량이 큰 이미지를 슬라이스로 잘라서 올리게 되면 로딩속도가 빨라져 이미지가 빨리 뜨게 됩니다. 웹디자이너에게는 필수인 저장방법이니 알아두시면 유용하게 쓸 수 있습니다.

샘플 이미지 하나를 불러옵니다. 뉴욕 빌딩이미지를 가져와 봤습니다.

왼쪽에 있는 "Slice Tool" 툴을 선택하세요. Crop(크롭)툴을 누르고 있으면 Slice(슬라이스) 툴이 나옵니다. "Slice Tool"과 "Slice Select Tool"이 나오는데 "Slice Select Tool"은 Slice로 자른 이미지를 선택해서 편집할 수 있는 툴입니다.

슬라이스툴을 선택하신다음 이미지에 원하는 크기만큼 마우스로 영역지정을 하세요. 이미지 전체가 모두 슬라이스될 수 있도록 잘라줍니다.

그림 전체가 슬라이스로 잘린 모습니다. 영역별로 숫자가 적혀있죠. 이 상태에서 "Slice Select Tool"을 선택하셔서 지정된 영역의 크기를 다시 조정하실 수 있습니다. 크기를 잘못 잘랐다면 수정하셔서 크기를 다시 맞추시면 됩니다.

영역지정을 다 하셨다면 File > Export > Save for Web을 눌러서 웹용으로 저장을 실행해 주세요. 단축키는 Alt+Shift+Ctrl+S입니다. 웹용으로 저장은 웹사이트에서 사용할 이미지라 저용량으로 저장이 가능합니다.

웹용으로 저장을 클릭하면 위 화면이 나옵니다. 오른쪽 위에서 저장할 파일 확장자를 선택하시고 해상도와 퀄리티를 선택하세요. 보통 웹사이트에 사용할 용도로 이미지를 저장하는 경우에는 원본 대비 Quality를 70정도로 맞춰줍니다. 결과물을 보시고 해상도가 낮다 싶으시면 Quality를 다시 높여서 저장해 주시면 됩니다. 그리고 맨 아래 있는 "Save" 버튼을 눌러주세요.

저장하기 화면이 나옵니다. Format을 보면 3가지가 있습니다. 이미지만 저장할 수 있고, 이미지 말고 html만 따로 저장할 수도 있습니다. "HTML and Images"는 html 파일과 이미지를 같이 저장하는 것입니다. 저는 html과 이미지를 같이 저장해 보도록 하겠습니다. 

파일 이름은 building으로 적었는데 나중에 저장될 3개의 이미지는 이 이름 뒤에 숫자가 붙어서 나옵니다. ftp에 올려서 작업하실 거면 이름도 작업하기 편한 걸로 적어주시면 됩니다.

파일이 저장된 모습입니다. 바탕화면에 보시면 html파일과 images폴더에 3개의 이미지가 저장된 것을 볼 수 있습니다. 저장된 이미지는 각각 300kb 내외의 용량으로 저장되었습니다. html파일을 클릭하면 인터넷으로 보이는 이미지 확인도 가능합니다.

저장된 html 파일을 메모장으로 열어봤습니다. 3개의 잘려진 이미지가 테이블로 묶여서 코딩되어 있습니다. 이미지를 ftp에 넣으시고 html 코드에서 이미지 경로만 수정하시면 웹상에서 사용이 가능합니다.

2019/09/19 - [디자인 정보/포토샵 강좌] - 포토샵 슬라이스 이미지에 링크 걸기