디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
  - HTML 소개
  - 텍스트
  - 링크
  - 이미지
  - 테이블
  - 인클루드
  - 프레임
  - 폼(FORM)
  - 이미지 자르기
  - 색상코드표
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
이미지 자르기
Home > 디자인 센터 > 웹강좌 > HTML 사용법 > 이미지 자르기
이미지 자르기 1 이미지 자르기 2 코딩하기 1 코딩하기 2
여기에서는 그래픽 프로그램에서 홈페이지의 레이아웃을 잡은 후 이미지를 자르는 방법과 지금까지 익혀온 태그들을 이용하여 코딩하는 시간을 갖도록 하겠습니다.
연습해 볼 예제입니다. 필요한 이미지는 을 누르시면 다운받으실 수 있습니다. 다운받으신 파일을 압축을 푸시면 직접 자르는 연습을 해보실 수 있는 main.psd와 이미 잘라져 있는 'imageuse' 폴더를 확인하실 수 있습니다. 되도록이면 main.psd 파일을 직접 여시고 자르는 연습부터 시작해서 직접 코딩까지 해보시기 바랍니다.

일단 압축을 풀고 main.psd 파일을 포토샵에서 열고 작업을 시작합니다.
파일은 이미 flatten image 해 놓았습니다. 대신 직접 작업을 하실 때에는 반드시 layer별로 작업하시기 바랍니다.
일단 주어진 이미지 파일을 가지고 아래의 그림처럼 자르도록 하겠습니다.
( 포토샵 6.0 이상에서 볼 수 있는 'slice tool' 기능을 사용하겠습니다. )


① 제일 먼저 포토샵을 실행하고 main.psd 파일을 열도록 합니다.

② main.psd 파일을 열면 포토샵 menu의 view에서 show → guides를 켜도록 합니다.
그러면, 이미 그어져 있는 가이드선을 보실 수 있을 것입니다.
작업을 하실 때에는 되도록이면 작업하고자 하는 이미지의 정확한 사이즈에 맞춰 가이드선을
그어가며 작업하시는 것이 편리합니다.
③ 가이드를 켜고 나면 이미 그어져 있는 파란색의 가이드선을 보실 수 있을 것입니다.
다시 한 번 이미지와 각각의 메뉴 크기에 맞춰 가이드선을 긋고자 한다면 menu의 view에서
clear guides를 클릭하여 기존의 가이드선을 지우고 새로운 가이드선을 그으시면 됩니다.
④ 지금부터는 가이드선을 따라 로고별, 메인이미지별, 메뉴별로 이미지를 자르도록 하겠습니다.
포토샵에서 이미지를 자를 때에는 tool bar에 있는 silce 기능을 사용하도록 합니다.
tool bar에 있는 slice tool을 선택합니다.
그리고, 이미지를 자르기전에 menu의 view에서 snap을 켜두시기 바랍니다.
이 snap 기능을 켜두어야만 그어져 있는 가이드선에 slice tool이 착착 달라붙어 정확하게
이미지를 자르실 수 있습니다.
⑤ slice tool로 그어져 있는 가이드선을 따라 자르기 원하는 크기만큼 드래그합니다.
snap 기능을 켜두었기 때문에 정확하게 드래그하지 않아도 원하는 가이드선에 자석처럼
딱 달라붙어 그어지게 될 것입니다.
메뉴는 개별적으로 링크를 걸어야 하므로 하나씩 자르도록 합니다.
왼쪽의 그림은 가이드선에 맞춰 slice tool로 이미지를 자른 상태입니다.
총 14개의 이미지가 필요합니다.
⑥ slice tool로 이미지를 그을때마다 각각의 구역마다 번호가 붙게 되는데 이것은 잘라진
순서대로 1번부터 차례대로 번호가 매겨집니다.
이제 잘라진 14개의 조각 이미지들을 각각 저장해야 합니다.
저장할 때는 menu의 file에서 'save for web'을 클릭합니다.
'save for web'을 클릭하면 왼쪽의 그림과 같은 창이 나타납니다.

하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 한국어 라인 이미지 中文 라인 이미지 日本語 라인 이미지 해시넷 라인 이미지 타고 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로   접속통계
디지털콘텐츠 No.1 (주)아사달