본문 바로가기

이미지 슬라이스하여 Html 저장/Slice Tool/이미지 조각/이미지 자르기 본문

포토샵 강좌/초급&TIP

이미지 슬라이스하여 Html 저장/Slice Tool/이미지 조각/이미지 자르기



슬라이스 툴을 활용하여 이미지를 "여러 조각으로 나누어 추출"하거나

"html코드를 생성 및 저장"하는 법을 배워보도록 하겠습니다.


우선은 완성된 자인된 파일이 필요합니다.
준비되지 않은 경우에는 일반적인 이미지로 테스트 해보셔도 무관합니다.
완성된 디자인 파일을 "어떤 식으로 조각을 낼지 가이드를 미리 생성"해주면 도움이 됩니다.


View > New Guide
①위치를 지정하지 않은 상태에서 가이드를 생성하게 되면, 화면 좌측이나 최상단에 생성됩니다.
이동 툴을 선택한 상태에서 생성된 가이드를 드래그하여 원하는 위치로 그래그하여 위치시켜줍니다.













본격 조각을 내기 위해서
툴박스에서 슬라이스 툴을 선택합니다.













구상한 대로~ 가이드를 참조하여 드래그해줍니다.
*바로 전단계 작업으로 되돌리려면 Ctrl+Z / 슬라이스 초기화 Ctrl+H













①또 다른 영역도 드래그하여 조각냅니다~
②슬라이스된 영역을 드래그하여 사이즈 조정도 가능하답니다.













맞닿는 조각 사이 사이~ 조금의 틈이 없도록 말끔하게 슬라이스 해주세요.
강좌에서는! 아래 예시와 같이 6조각으로 나눠주었답니다.













슬라이스가 마무리되었다면 Slice Select 툴을 선택해주세요.













슬라이스된 조각마다 번호가 생성되었죠~
포토샵내에서 각각의 조각낸 이미지마다 링크를 걸어줄 수도 있답니다.
슬라이스된 조각을 더블 클릭하면, 아래 예제 이미지처럼 슬라이스 옵션 대화 상자가 뜨는데요~

Slice Type: Image와 Html에서 선택
Name: 슬라이스 된 이미지의 이름을 결정
URL: 슬라이스 된 이미지의 하이퍼 링크 (해당 이미지 클릭시 이동할 페이지 경로)

Target: 하이퍼 링크가 열릴 타켓 > _self(현재창) 또는 _blank (새창)
Message Text: 마우스를 위치했을 때의 설명
Alt Tag: 마우스를 위치했을 때 브라우저 하단에 나타날 설명
Dimensions: 이미지 크기 재설정













마무리된 작업물을 "웹용 최적화 이미지 & html문서"로 저장해볼게요.
File > Save for web
①원하는 파일 형식으로 선택해주고 ②Save













저장 위치를 정해주고 ②파일 형식 부분을 HTML and Images (*.html) 선택!
파일 이름 부분에 html 파일명을 적어준 다음 저장!













①저장된 경로를 찾아 확인해보면 ②[images] 폴더와 ③html 문서가 생성되어 있습니다.
이미지 폴더를 열어보면~ 포토샵에서 슬라이스한 구성대로 이미지가 잘려져 저장되어 있답니다.













"에디터" 또는 "메모장"으로 html문서를 열어보면
아래와 보기와 같이~ 디자인된 구성대로 "웹에서 보여지도록 코드가 생성" 되어 있답니다.













생성된 html 파일을 브라우저로 실행해주면~ 코딩된 결과물 확인 가능하고요!
준비된 웹 계정이(웹서버) 있는 경우에는 결과물 [images] 폴더와 html 문서를 자신의 계정에(웹서버) 업로드한 후
브라우저 주소창에 http://도메인/파일명.html 입력하여 웹상에서 보여지는 결과물을 확인할 수 있답니다.
웹에서 실행된 웹페이지 = "홈페이지"라고 일컫습니다.


대표이미지






0 Comments
댓글쓰기 폼