2008년 02월 11일
[얼음집 꾸미기]#6 헤더 크기보다 큰 헤더 이미지 올리기
이번에는 #header 의 크기보다 큰 header이미지를 올려보겠습니다.
(이미지중 #header의 영역을 넘어서는 부분을 #content와 #sidebar에 나눠 올리는 방법을 사용하겠습니다)
이를 위해서는 선행되어야 할 조건이 한가지 있습니다.
이게 왜 그러냐고 물으신다면..
아래 그림을 이해하시면 됩니다.
①은 #body의 폭, ②는 #container의 폭, ③은 #sidebar의 폭, ④는 #content의 폭이 되겠습니다.
#sidebar와 #content는 각각 #container의 양 끝으로 정렬됩니다.
따라서 각각의 폭의 합이 전체와 같지 않으면 두 레이어 사이에 틈이 생기게 됩니다.
따라서 틈이 생긴 레이어에 이미지를 아무리 올려봤자 이미지는 따로따로 떨어져 버릴 뿐 하나가 되지 못합니다.
[영역을 확인하는 방법]
#sidebar와 #content의 영역은 쉽게 찾으실 수도 있지만 어느정도 튜닝을 거친 스킨이라면 조금 헤메실 수도 있습니다.
이럴때는 #sidebar와 #content의 옵션에서 이미지를 지우고 각각 다른 색상의 배경을 입혀보는 것이 좋습니다.
예를 들기 위해 제 스킨에 이미지를 지우고 배경을 입혀봤습니다.
#sidebar의 영역과 #content의 영역 사이에 다른 색이 끼지 않았습니다.
이는 두 영역이 붙어있다는 뜻입니다.
만약 다른 색상이 사이에 끼어있게 된다면 #content의 크기를 조절해 주어야 합니다.
[이미지 자르기]
#sidebar의 영역과 #content의 영역이 빈틈없이 붙어있음을 확인하셨다면 적용하실 이미지를 재단할 차례입니다.
우선 #container, #sidebar, #content의 폭(width 수치)을 다시한번 확인해 주세요.
#header는 폭과 높이를 모두 확인해 주셔야 합니다.
저의 경우에는
#container의 폭 1010픽셀, #sidebar의 폭 190픽셀, #content의 폭 890픽셀, #header의 폭 1010픽셀 높이 240픽셀이 나왔습니다.
따라서 우리는 이미지를 이러한 형태로 나누어야 합니다.
이제 포토샵에서 이미지를 나눠 보도록 하겠습니다.
이미지를 불러들입니다.
이미지의 폭이 원하는 크기보다 넓다면 포토샵 메뉴 : 이미지 > 이미지 크기 로 들어가서 원하는 폭만큼 줄여주시면 됩니다.
이미지의 폭이 원하는 크기보다 좁다면 포토샵 메뉴 : 이미지 > 캔버스 크기 로 들어가서 원하는 폭으로 설정하시면 됩니다.
이때 주의하실 점은 캔버스 확장 색상을 투명으로 해주셔야 한다는 점입니다.
크기 조정이 끝났으면 이미지 영역을 나누겠습니다.
이미지 분할 도구를 선택하고 이미지에서 마우스 우클릭을 합니다.
설정창이 나오면 #header의 높이를 참고하여 적어줍니다.
확인을 누르면 영역이 분할된 이미지가 나옵니다.
계속해서 분할된 영역 중 아래쪽에서 마우스 우클릭을 합니다.
위의 부분에 #sidebar의 폭을 적고 확인을 누르면 3분할된 이미지가 보일 것입니다.
이제 영역 분할된 이미지를 저장해야 합니다.
포토샵 메뉴 : 파일 > 웹용으로 저장 을 누릅니다.
세 영역을 각각 클릭해서 우측에 보이는 저장 옵션을 조정해 주시기 바랍니다.
jpeg든 png24든 큰 상관은 없지만 앞에서 캔버스 이미지 확대를 하신 분은 반드시 png24로 저장하시기 바랍니다.
저장하실 때는 이런 옵션을 적용하시면 됩니다.
파일 형식은 이미지 전용입니다 - 다른 형식을 적용하시면 다른 필요없는 파일이 생성됩니다.
분할 영역은 모든 분할 영역입니다 - 이렇게 해야 모든 분할 이미지가 생성됩니다.
이렇게 하시면 저장하신 폴더에 image폴더가 생성되며 이 폴더 안에 이미지가 저장되어 있습니다.
[이미지 올리기]
이제 막바지군요. 실제로 이미지를 올릴 차례입니다.
이글루 관리 > 블로그 스킨 > 소스편집 으로 들어갑니다.
저장했던 이미지를 올려주세요.
올린 이미지를 css편집을 통해 스킨에 적용합니다.
css편집이 생소하신 분은 #2배경 올리기를 참고해 주세요.
위의 세 곳에 각각 위치할 이미지를 적용합니다.
그러면 완성! >ㅁ </
어때요, 참 쉽죠?(퍽!!
수고하셨습니다^^
(이미지중 #header의 영역을 넘어서는 부분을 #content와 #sidebar에 나눠 올리는 방법을 사용하겠습니다)
이를 위해서는 선행되어야 할 조건이 한가지 있습니다.
#content 의 폭과 #sidebar 의 폭의 합이 #container 의 폭과 같아야 한다!!
이게 왜 그러냐고 물으신다면..
아래 그림을 이해하시면 됩니다.
①은 #body의 폭, ②는 #container의 폭, ③은 #sidebar의 폭, ④는 #content의 폭이 되겠습니다.
#sidebar와 #content는 각각 #container의 양 끝으로 정렬됩니다.
따라서 각각의 폭의 합이 전체와 같지 않으면 두 레이어 사이에 틈이 생기게 됩니다.
따라서 틈이 생긴 레이어에 이미지를 아무리 올려봤자 이미지는 따로따로 떨어져 버릴 뿐 하나가 되지 못합니다.
[영역을 확인하는 방법]
#sidebar와 #content의 영역은 쉽게 찾으실 수도 있지만 어느정도 튜닝을 거친 스킨이라면 조금 헤메실 수도 있습니다.
이럴때는 #sidebar와 #content의 옵션에서 이미지를 지우고 각각 다른 색상의 배경을 입혀보는 것이 좋습니다.
예를 들기 위해 제 스킨에 이미지를 지우고 배경을 입혀봤습니다.
#sidebar의 영역과 #content의 영역 사이에 다른 색이 끼지 않았습니다.
이는 두 영역이 붙어있다는 뜻입니다.
만약 다른 색상이 사이에 끼어있게 된다면 #content의 크기를 조절해 주어야 합니다.
[이미지 자르기]
#sidebar의 영역과 #content의 영역이 빈틈없이 붙어있음을 확인하셨다면 적용하실 이미지를 재단할 차례입니다.
우선 #container, #sidebar, #content의 폭(width 수치)을 다시한번 확인해 주세요.
#header는 폭과 높이를 모두 확인해 주셔야 합니다.
저의 경우에는
#container의 폭 1010픽셀, #sidebar의 폭 190픽셀, #content의 폭 890픽셀, #header의 폭 1010픽셀 높이 240픽셀이 나왔습니다.
따라서 우리는 이미지를 이러한 형태로 나누어야 합니다.
이제 포토샵에서 이미지를 나눠 보도록 하겠습니다.
이미지를 불러들입니다.
이미지의 폭이 원하는 크기보다 넓다면 포토샵 메뉴 : 이미지 > 이미지 크기 로 들어가서 원하는 폭만큼 줄여주시면 됩니다.
이미지의 폭이 원하는 크기보다 좁다면 포토샵 메뉴 : 이미지 > 캔버스 크기 로 들어가서 원하는 폭으로 설정하시면 됩니다.
이때 주의하실 점은 캔버스 확장 색상을 투명으로 해주셔야 한다는 점입니다.
크기 조정이 끝났으면 이미지 영역을 나누겠습니다.
이미지 분할 도구를 선택하고 이미지에서 마우스 우클릭을 합니다.
설정창이 나오면 #header의 높이를 참고하여 적어줍니다.
확인을 누르면 영역이 분할된 이미지가 나옵니다.
계속해서 분할된 영역 중 아래쪽에서 마우스 우클릭을 합니다.
위의 부분에 #sidebar의 폭을 적고 확인을 누르면 3분할된 이미지가 보일 것입니다.
이제 영역 분할된 이미지를 저장해야 합니다.
포토샵 메뉴 : 파일 > 웹용으로 저장 을 누릅니다.
세 영역을 각각 클릭해서 우측에 보이는 저장 옵션을 조정해 주시기 바랍니다.
jpeg든 png24든 큰 상관은 없지만 앞에서 캔버스 이미지 확대를 하신 분은 반드시 png24로 저장하시기 바랍니다.
저장하실 때는 이런 옵션을 적용하시면 됩니다.
분할 영역은 모든 분할 영역입니다 - 이렇게 해야 모든 분할 이미지가 생성됩니다.
이렇게 하시면 저장하신 폴더에 image폴더가 생성되며 이 폴더 안에 이미지가 저장되어 있습니다.
[이미지 올리기]
이제 막바지군요. 실제로 이미지를 올릴 차례입니다.
이글루 관리 > 블로그 스킨 > 소스편집 으로 들어갑니다.
저장했던 이미지를 올려주세요.
올린 이미지를 css편집을 통해 스킨에 적용합니다.
css편집이 생소하신 분은 #2배경 올리기를 참고해 주세요.
#header {
width: 1010px;
height: 240px;
position: relative;
margin: 0 auto;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_01.png) right no-repeat;
}
width: 1010px;
height: 240px;
position: relative;
margin: 0 auto;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_01.png) right no-repeat;
}
#content {
float: right;
width: 820px;
text-align: center;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_03.png) top right no-repeat;
}
float: right;
width: 820px;
text-align: center;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_03.png) top right no-repeat;
}
#sidebar {
float: left;
width: 190px;
text-align: center;
line-height: 1.2em;
margin-bottom: 50px;
padding-top: 20px;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_02.png) top right no-repeat;
}
float: left;
width: 190px;
text-align: center;
line-height: 1.2em;
margin-bottom: 50px;
padding-top: 20px;
background: url(http://pds9.egloos.com/pds/200802/10/25/fly6_02.png) top right no-repeat;
}
위의 세 곳에 각각 위치할 이미지를 적용합니다.
그러면 완성! >ㅁ </
어때요, 참 쉽죠?(퍽!!
수고하셨습니다^^
# by | 2008/02/11 09:41 | ▶얼음집 꾸미기 | 트랙백 | 덧글(2)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]