이미지 스프라이트 사용하기.

이미지 스프라이트 사용하기 

 

 

이 세개의 로고는 한 이미지 안에 들어가 있다. 

 

저 세개의 로고를 사용하기 위해서 포토샵으로

쉽고 빠르게 잘라낼 수 있다. 

 

포토샵 실행.

사진 파일 가져오기

 

사진을 잘 가져왔다면, 몇가지 설정을 해주는 것이 편하다.

 

왼쪽과 상단에 자가 있다. 

 

상단과 왼쪽에 자가 보이지 않는다면, 

ctrl + R 단축키를 누르면 생성된다. 

 

만약 픽셀이 아니라 인치, 혹은 밀리미터 등 

다른 단위라면 마우스 우클릭으로 자를 클릭하여 

단위를 바꿔줄 수 있다. 

 

웹에 사용할 것이니 픽셀을 추천한다.

 

마우스 좌클릭으로 자에서 가이드를 끌고 나와

아래처럼 사진을 감싸준다.

컷팅할 크기만큼 정해서 가이드를 정해주고 

 

 

 

단축키 alt + ctrl + ; 

가이드를 잠그는 단축키이다

가이드를 잠궈준다. 

 

이제 단축키 " C " 누르기 혹은

도구창에 저렇게 생긴 모양을 누르면, 

화면에 아래처럼 사진을 감싸준다.

 

 

옆에 달려있는 흰색 바를 마우스로 끌면 자유롭게 자를 수 있다. 

자를만큼 크기를 지정하고 엔터!

 

 

깔끔하게 잘라졌다.

저장시에는 jpg파일로 저장한다. ( 다른이름으로 저장 단축키 ctrl + shift + S)

저장 후 작업내역 되돌리기 단축키( ctrl + Z)를 이용하여 

되돌리고 앞의 내용을 반복해주면 된다.

 

깔끔하게 사용할 수 있다. 

 

 

 

 

 

 

 이미지 스프라이트 사용하기

하나의 이미지를 나눠서 사용하는 방법이다. 

아래의 이미지를 사용하여 나눠볼 것이다.

 

 

 

위에서 빨간 동그라미로 표시해놓은 것을 가져다 써볼 것이다.

 

 

각자 .pig, .facebook, .cart 라는 이름을 붙여줬다.

 

 

 

.i

.doc

 

.calendar

 

                                                      위에서부터 순서대로 나열해보았다.

.pig

 

.facebook

 

 

.cart

 

 

 

 

 

 

이미지스프라이트1.html

0.00MB

 

이미지스프라이트.css

0.00MB